会津ラボ

フォートナイトのプレイヤー統計「Free Fortnite API」のリクエスト方法

Epic Gamesが販売・配信するTPSゲーム「フォートナイト」もシーズン9を迎えて依然勢力衰えない印象を覚える。ほかのバトルロイヤルゲームが過度のバランス調整でユーザーを失うなか、新規モードやキャンペーン、ユニークスキンの追加で初心者プレイヤーを留まらせ、楽しませてくれる。ところが最近では、長時間労働を告発する記事により、過酷な労働環境が暴かれて話題になっている。同種のゲームに比べて豊富なアップデートには関心させられていたが、実情は、およそ週70時間労働に及ぶ極限状態で行われていたとのことだ。「建築ゲー」ともいわれるユニークなゲーム性をもつフォートナイトだが、こんなことでファンが減ってしまうのは大変お粗末な事案だと感じた次第である。とはいえフォートナイトを取り巻くコミュニティは盛んで、非公式APIまで公開されるなど、成長を支えている。サードパーティ製のサービスが公開されることは、Epic Gamesとしても歓迎すべき現象だろうと思う。このエントリーでは、非公式API「Free Fortnite API」を紹介する。それにより、たくさんのサードパーティ製アプリが公開されて、春夏冬二升五合を願うためものである。 Free Fortnite APIとは Free Fortnite APIは、数百万におよぶFortniteプレイヤーの統計データを提供する。特徴プレイヤーデータを取得パッチノートを入手最新のFortniteニュースを入手トップ10のFortniteプレイヤー情報を取得 Fortniteサーバーのステータス情報を取得すべての権利はEpic Gamesにある使い方ストア情報を取得する https://fortnite-public-api.theapinetwork.com/prod09/store/get?language={language} 追加されるアイテムを取得する https://fortnite-public-api.theapinetwork.com/prod09/upcoming/get すべてのアイテムを取得する https://fortnite-public-api.theapinetwork.com/prod09/items/list 特定のアイテムを取得する https://fortnite-public-api.theapinetwork.com/prod09/item/get?ids={identifier} API統計データに基づく人気アイテム https://fortnite-public-api.theapinetwork.com/prod09/items/popular ユーザーIDを取得する https://fortnite-public-api.theapinetwork.com/prod09/users/id?username={User name} ユーザー統計を取得する https://fortnite-public-api.theapinetwork.com/prod09/users/public/br_stats_v2?user_id={User ID} チャレンジ情報を取得する https://fortnite-public-api.theapinetwork.com/prod09/challenges/get?season=current 武器情報を取得する https://fortnite-public-api.theapinetwork.com/prod09/weapons/get 最新ニュースを取得する https://fortnite-public-api.theapinetwork.com/prod09/br_motd/get?language={language} サーバー情報を取得する https://fortnite-public-api.theapinetwork.com/prod09/status/fortnite_server_status まとめ以上が、Free Fortnite APIのリクエスト方法だ。かくしてフォートナイトプレイヤー統計を得ることができることだろう。あとはアイデア次第である。とはいえ、有名プレイヤー情報を取得したり、パッチノートを入手したりでも見込みありだ。このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

May 20, 2019
[gibo] Gitの無視ファイルgitignoreを一瞬で作る方法

みなさんは普段どのようにgitignoreを作成していますか？手作業で設定したり、GitHubのテンプレートから持ってきたり、前に使ったものを流用したりなど、様々な方法があるかと思いますが、もしこのような方法で作成している方には「gibo」というツールをオススメします。 https://github.com/simonwhitaker/gibo インストール Mac環境であればHomebrewでインストールできます。使い方 gibo listを実行すると対応する言語、フレームワークが表示されます。だいたいの言語やメジャーなフレームワークであればリストに含まれているかと思います。 gitignoreを作成するにはdumpコマンドを使います。以前はdump無しで良かったのですがアップデートで変更されたようです。 gibo dump NodeとするとNode.jsのgitignoreを出力します。 Railsであればgibo dump Railsのように使用する言語、フレームワークを指定しましょう。これを.gitignoreファイルに書き込みます。これでNodeの.gitignoreファイルが作成できます。まとめ giboは https://github.com/github/gitignore を参照してgitignoreを作成しているようなのでgitignoreの内容も問題ないと思います。私は以前から使用していたのですがあまりメジャーではないようでしたので紹介させて頂きました。今まで手作業でgitignoreを作成していた方は、ぜひ使用されてみてはいかがでしょうか。

May 20, 2019
Adobe Premiere cs5.5 が使えなくなったのでiMovieで動画編集してみた

こんにちは、日々心の平穏を求め続けているikaidaです。さて突然ですが、皆さんは動画編集にどんなソフトを使用していますか？動画編集は難しそうなのでやった事ないって方向けとは言いにくいですが、何かのきっかけになれば幸いです。さて、いつも私は自由度が高くて慣れると使いやすいAdobeさんの Premiere cs5.5 を使用していたのですが、macOS Mojave にアップデートしたばかりに起動はするけど使い物にならないポンコツ状態になってしまいました。 Mojave アップデートによるAdobe cs系の不具合何が起きたかを簡単に言いますとmacOS Mojave自体が Java 6をサポートしておらず、Adobe CSシリーズが使えない状態となります。(サポート外で動かす方法はGoogle先生に聞いて頂ければと思いますので割愛しますが・・・) そんな感じで、無理やり動かしたものだからでますよね不具合？私のAdobe Premiere cs5.5 に起きた悲劇CS系の不具合で一番有名かな思うのは、終了時にクラッシュしながら終了すると言うワイルドな終了方法ですが、他UIパネルのアイコンがバグって何だかわからなかったりと結構あります。そして、Premiereさんの場合はそんなあまっちょろいものじゃあ無かったのです！編集内容の確認や位置調整などを行う「プログラムモニター」が編集モードにすると何も映らなくなるという素敵な不具合！（わかりやすく例えるなら福笑い状態）なんとか治るかなと調べてみたけど・・・時間もないし諦めて別のソフトを使う事に iMovieを使ってみたそんな訳で手軽に使えてそれなりなモノが作れるものはないか（できれば無料アプリで）と調べていたら、iMovieが直感的操作で使いやすい上に無料と見かけコレだ！と、早速インストール！作成・編集手順を簡単に説明しますと使用する素材(動画や画像)を素材置き場またはタイムラインにドラッグ＆ドロッププレビューに表示されるのを確認しながらトリミング編集タイムラインで長さや表示順などを調整タイトルやトランジションを必要に応じて挿入と、非常にシンプルで使いやすい！ iMovieの不便と感じるところ　・タイトルがテンプレしかなくテロップとして自由に配置できない。　・トランジションがメインレイヤーにしかかけられない。他にマスクがかけられない等細かいものがありますが作成上一番困ったのは上記２点でした。テロップの対処法前述の通りそれなりにテンプレートが準備されてはいますが位置・スタイルが固定と痒いところにギリギリ手が届かない感じで非常にもどかしかった為、何か良い方法はないかとGoogle先生に尋ねてみたところ、『画像作成ソフトなどを使用し動画サイズでテロップを自作！』と言う原始的かつ的確なアドバイスを頂きました。早速XDを使用しテロップ量産開始！作成したテロップ画像を入れた場合なぜか「KenBurns」が適応され勝手にアニメーションされる場合があるりますので「フィット」に戻す事を忘れずに！もう一つの問題だった、サブレイヤーにトランジションは？と言うと・・・機能的にできないので諦める！まとめ Premiereほどの自由度はないですが、切り貼り程度のこだわらない動画を作成する場合には操作も簡単で作りやすいのでオススメです。ただ、凝った動画作成したい場合にはそれなりに工夫が必要となり出来る事と出来ない事の見極めは必要かなと。今回はかなり駆け足での記事となりましたがもう少し詳しく知りたいなどあれば次回はもう少し掘り下げた感じで書ければと思います。

May 18, 2019
デザイナーwって

若かりし頃、「デザイナーw」って思っていました。あの当時、デザイン科といえばおしゃれなかっこをしていて、iPodに刻印しちゃったり、イケイケなイメージ。我々絵画系とは完全に別の世界の住人だと思っておりました。（筆者は絵画系出身のため）作るものはきれいですが、心が持ってかれるような感覚になる作品はなく（ろくに見ていなかったかも・・）、デザインってなんだろう、デザイナーってなんだろう・・と。絵画って、自分の気持ちや考えを表現することができるので、デザインの人たちは、なんで自分を表現しないのだろうと常日頃考えていたものです。さて、あっという間に16年の月日が過ぎ、現在開発会社でデザイナーをしている私wです。むしろwの位置は変わり、「現在開発会社でデザイナーをしている私wです。」でしょうか。自分に対してのwポイント増加中ですがデザイナーにはなくなりました。なぜ、「デザイナーw」じゃなくなったか昔って、「ものつくり」=「自己表現」だと思っていたんですね。「絵画って、自分の気持ちや考えを表現することができる」って言いましたが、逆を言うと外部っていなくても成立するんです。（モチーフや表現先としてはいるかも）だから、最大限自分の心をさらけ出したり擦り切らせたり、傷ついたり喜んだり、そういうMax値が必要で、ものづくりと作品作りはイコールではなく・・。「作品作り」=「自己表現」ではあるかもしれないけど。で、デザインでいうものつくりはなんだろうってーと、「ものづくり」=「実現」デザインって、他者ありきなんですよね。むしろ、他者しかいないw。Max値とか出されると困っちゃうw。とても客観的である必要があります。自分は出さず、他者と他者をつなげて実現するのがむしろお仕事というか。例えば、お客さんと開発者をつないだり、サービス提供者とユーザーをつないだり、きれいに・おしゃれにレイアウトすることは仕事の一部分でしかなく、大部分はわかり易さや使いやすさを考えたり、ひととひとを繋ぐことが重要で。ただ繋ぐだけなら透明人間になればいいんですが、むしろ通訳したり変換したり、改良したりしながら繋いでいくので結構骨が折れる・・。そんなことを日々やっていると「デザイナー」って面白いな、と思うようになりました。いろんな情報に関わったり、いろんな目線を体験したり、いろんなものをつなげたりできるので、自分は開発会社のデザイナーに向いているのかもしれません。ぜひ若いデザイナーの方にはデザインを広く捉えて欲しいなと思います。ビジュアルをきれいにすることが好きでデザイナーになる人も多いと思いますが、決まったやり方で整形するだけならロボットやオペレーターで十分かもしれません。自分にしかできないやり方を見つけれれば、長く続けられる仕事だと思います。あ、そうそう、「ものづくり」=「実現」のスタンスでやる場合の大きな注意事項があります。この場合「誰か」の実現したいことを表現することが多くなるとは思うんですが、ここで、「人のせい」にするのは絶対にダメです。あくまで、「誰かのために、自分の能力・思考・技術を使って、責任を持って表現する」のがデザイナーです。ここんとこ履き違えるとこじらせて人間社会で生きていけなくなるのでお気をつけください！！！実際、考えと基礎力と吸収力があれば、どうにかなるw。これらは私の「デザイナー像」です。皆さんもぜひ、自分の「デザイナー像」見つめて見てください。以上、そんなお話でした。

May 16, 2019
Next.jsでSassファイルを使う！node-sassモジュール設定方法

Next.jsでSassモジュールを使えるようにしたい？その手続き、私がお手伝いしましょう。 Next.jsには、もともとstyled-jsxが用意されています。それによりパッケージを追加せずとも、ReactコンポーネントベースのCSS設計ができるわけです。コンポーネント単位でスタイルを当てる分には、設定もなくJSX形式で記述できます。しかしextendしたいCSSプロパティなどがある場合には、当該コンポーネントでは完結しません。そこで取り入れたいのが、アプリケーション全体に適用されるスタイルです。CSSファイルを読み込めば済みますが、開発過程でSassを使用しているケースもあります。それならば折角だから、Next.js環境にもSassを導入したいではありませんか。それが、このエントリーの動機です。あなたも同様のことでお困りなら、Next.js環境にSassモジュールを追加する方法をご覧になって、ぜひトライしてみてください。必要なモジュール Next.js環境にSassを導入するには、つぎの２つのモジュールが必要です。 @zeit/next-sass node-sass 対象の環境にインストールします。コマンド実行後は、package.jsonに追加されることを確認してください。または next.config.jsの修正 next.config.jsの先頭行で、「@zeit/next-sass」モジュールを読み込みます。当該モジュールは定数「withSass」格納してください。続いて、withSassメソッドをmodule.exportsに代入して、モジュール化しています。 CSS Modulesにする withSassメソッドにcssModules: trueを与えるとCSS Modulesが適用されます。CSS Modulesは、低レイヤーのUIにフォーカスしたアーキテクチャです。この概念の導入によりグローバル汚染防止に効果的です。styled-jsxも同様の考え方によるものといえるでしょう。しかし共通スタイルを複数コンポーネントに跨って適用したい場合には、使いません。エラーが発生したらエラーが発生しましたか？私の環境では、つぎのエラーが発生しました。node-sassが環境に適用されていないとのことです。エラー解消方法 node-sassのGitHubリポジトリにissuesが投稿されていました。 @aleclarson Thanks, it worked for me for macOS and electron 1.6.12. I’ve improved the script a bit to automate it: GitHub 上のシェルスクリプトを保存します。ファイル名は任意で結構。ファイルを、package.jsonがある階層に配置してください。用意が整ったら、シェルスクリプトを実行します。まとめ Next.js環境でSassを使う方法をお伝えしてきました。共通スタイルにおいては、効率的な作業ができるのではないでしょうか。ただしReactは、コンポーネントベースの開発を勧めるライブラリであるため、各コンポーネントで読み込むなり、styled-jsx記述をするなりして、CSS Modules化を検討することも忘れないでください。

May 16, 2019
入稿データの良し悪しは気配りで決まる！マークアップエンジニアが考える最高のデザインデータ

よい入稿データとは、どのようなものだろうか？マークアップエンジニアにしてみれば、コーディングしやすいデータに尽きるのだろう。コーディングしにくいデータよりは断然よいに決まっている。工数は短縮できるし、ミスも少なくなる。時間の余裕がソースコード見直しに寄与するわけだ。それでは「コーディングしやすい」とは、どのようなものか？私は、ひと目で構造を読み取れるデータと考えているが、いかがだろうか。構造がシンプルであれば、HTML/CSSが最適化しやすい。ソースコードの構造化ができれば、セマンティックWebに関わる定義に矛盾が生じにくい。さらにコンポーネント・ベースの UI 開発を取り入れることで、運用性があがる。つまりメンテナンス性の担保につながるわけだ。私はフリーランス時代に、多くのコーディング案件を受託してきた。デザインデータを入稿してもらいHTML/CSSコーディングを行うといった内容だ。JavaScriptによるリッチコンテンツを加えたり、メールフォームの実装だったりもする。制作会社でコーディングを担当する場合と違い、数多くのデザイナーのさまざまなデザインデータを預かる。癖も違えば、能力も違う。それでも柔軟な対応が求められ、違和感を覚えながらもマークアップをすることも少なくなかった。なかにはパワーポイントによるデザインデータの入稿を申告するケースもあった。きっとデザインと呼べるものではなかったに違いない。そんななかでも、もっとも素晴らしかったデザインデータをご覧に入れたい。もしかしたら学べるところがあるかもしれない。画像やバナー、テキストはダミーに差し替えている。その点はご容赦いただきたい。入稿データまず目につくことといえば、デザイン内に含まれた指示だろう。これはPhotoshopのレイヤーを活用して表示している。実際には、これに加えて指示書も添付されていた。とても用意周到なお仕事だと関心したことを記憶している。指示内容指示内容には、つぎの２点でメインビジュアルのローテーション指示デバイスフォント記述箇所の指示以上のことが示されている。メインビジュアルのローテーション指示についてまずメインビジュアルのローテーション（スライダー）は、参照先を提示している。これは動作イメージの共有を図ってのことだろう。これができるのは、デザインの段階で明確に動作までを考慮した設計あってのことだと思う。そして動作イメージにおいて、文章で説明しても伝わりにくいことから参照先を示したわけだ。たとえばスライダーの場合、一枚ずつ切り替えスピードはゆっくりこのような指示があっても漠然としていてよくわからない。すでにイメージしている動きに近いものがあるなら参照先の提示がもっとも効率がよいだろう。コーディングデータを確認したらイメージと違ったなんてことを未然に防ぐことできるはずだ。デバイスフォント記述箇所の指示についてつづいて、デバイスフォント記述箇所の指示は、透過オーバーレイで提示している。デバイスフォント指示には、アンチエイリアスを外して示すパターンもある。しかしアンチエイリアスを外すと、カクカクした見栄えからクライアントチェックで不評を招く恐れもあって、およそアンチエイリアスはかけたままが多い印象だ。そんなことから指示書に記されるわけだが、これも結局文章による説明となってしまい齟齬が発生しやすい。その点、デザイン上で示せるのならばベストといえる。デザインデータを見ながら指示書を確認する作業は、非常に負荷のかかる行為である。このデータの指示方法には唸らせてもらった。まとめデザインとはWebページのレイアウトだけに気にかけていればいい、という類のものではないことを自覚させられたデータだった。 Webページのデザインは言わずもがな素晴らしく、レイヤーの整理、各所の指示内容を明瞭にするなど気配りが感じられたと思う。デザインに限らず資料作成の際は、細部にまで気配りを加えることが必要だと学ぶことができるデータだったのではないだろうか。

May 14, 2019
【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する

こんにちは、ソリューションの五十嵐です。 MongoDB + GraphQLでデータを提供する案件に携わりました。その際に使用したgraphql-composeというライブラリが素晴らしかったので記事にまとめます。 GraphQLとは GraphQLはクライアントとサーバでのデータのやりとりに使用するクエリ言語です。欲しいデータを過不足なく取得できるほか、学習コストが小さいなどのメリットがあります。デメリットとしてサーバサイドの実装が難しいという情報が多いですが、 graphql-composeを使用することで簡単にCRUD機能を有するGraphQL APIを実装できます。 https://graphql-compose.github.io/ 構成は以下の通りです。 Node.js Express MongoDB Mongoose GraphQL Express まずは必要なパッケージをインストールし、Expressのアプリケーションを作成します。メインとなるserver.jsを実装していきましょう。 server.jsを実行し、http://localhost:8080/helloにアクセスするとHello Worldが表示されます。 MongoDB MongoDBとの接続を行います。 Mongooseを使用したいので、以下のコマンドで必要なパッケージをインストールしましょう。次にutilsディレクトリを作成し、その中にDBとの接続を行うdatabase.jsを作成します。 utils/database.js database.jsをimportし、DB.connect()を実行することでMongoDBに接続されるようになりました。 GraphQL GraphQLを実装していきます。まずはGraphQL関連の必要パッケージをインストールします。スキーマとモデルのディレクトリを作成します。今回はサンプルとして本のタイトルと著者のデータとします。タイトルと著者をString型として定義したモデルを作成します。 models/book.js さらにスキーマも作成します。ここで本記事の主役であるgraphql-composeを使用します。 graphql-composeはGraphQLのスキーマを作成するToolkitとのことで、簡単にスキーマを作成することができます。 schemata/book.js これだけでCRUDのGraphQL APIになります。最後にserver.jsを修正してGraphQLを有効にします。 server.js 再度server.jsを実行して以下のURLを開いてみましょう、GraphQLの実行環境が表示されます。 http://localhost:8080/graphql DBにデータが存在していないのでGraphQLでデータを新規登録してみます。【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する実行環境の左上に以下のmutationを入力します。さらに左下のQUERY VARIABLESの部分に以下を入力し実行しましょう。作成されたデータのIDがレスポンスとして返却されます。データが作成できましたのでGraphQLでデータを取得してみます。実行環境の左上に以下のqueryを入力して実行してみます。…

May 13, 2019
Macのターミナルで連番のテストデータを作る

実務の中で以下のようなテストデータが必要になりました。このようなデータを手作業で作成するのは非合理的なので、ターミナルから簡単に作成してみます。テストデータの作成まずディレクトリを作成します。 mkdirコマンドは-pオプションを指定することでディレクトリが存在しない場合に自動的に作成してくれます。今回のケースではDataディレクトリを作成し、TextDataディレクトリを作成し…という形です。その後はcd $_で作成したディレクトリに移動しますので、 $ cd Data/TextData/2019/0501のようにわざわざパスを指定して移動する手間がなくなります。テスト用のテキストファイルを作成するためにtruncateコマンドを使用します。 Macではデフォルトでは使用できませんのでbrewでインストールしましょう。 truncateコマンドをインストールできたらサイズを指定してファイルを作成します。（とりあえず10kbのテキストとします。）このテキストファイルが50件欲しいので連番でコピーします。 printf “%02d”とすることで２桁のゼロ埋めした数値となります。同じようにディレクトリも連番コピーします。これで最初に提示した構造のテストデータが作成できました。手順さえ覚えれば何千件、何万件のデータでも作成できますので覚えておくと役に立つかもしれません。

May 11, 2019
2019子どもの夢とおいしいもの祭りに参加します

5/18(土)、5/19(日)に道の駅あいづ湯川・会津坂下で、ふくしま産業賞受賞企業プレゼンツ「2019子どもの夢とおいしいもの祭り」が開催されます。ふくしま産業賞は、福島県内で「独自の光る技術」を持つ企業や「伝統を守り、地域性豊かなものづくり」を続ける人材などに、社会的な評価を与えることを目的とします。また、その活動の情報を発信する中で、新たな市場開拓につなげるなど、県内の企業活動・ものづくりを応援し、人材育成等を通して経済の活性化を図ります。福島民報「2019子どもの夢とおいしいもの祭り」には、ふくしま産業賞受賞企業が参加します。最新技術を駆使した先進性を評価された企業・団体によるブースで、子どもに夢を与える企画や魅力的なものづくりを体験できます。また地元の新たな産品や伝統的な味を堪能できるイベントです。会津ラボは、動物ぬりえAR無料体験をご用意しています。子どもから大人まで楽しんでいただけます。家族連れでお越しください。お待ちしております。

May 10, 2019
いますぐ使えるinput,select,textarea要素のCSSイディオム集

コーディングで手間がかかる要素といえば、フォーム周りではないでしょうか？ブラウザ固有のUIがあったり、ユーザーの操作によって状態に変化があったりと一筋縄にはいきません。そのような訳で、フォーム周りのコーディングが面倒だと感じている人は少なくないはずです。私がその筆頭に君臨します。デザインに引っ張られることで、毎案件で一貫性がないソースコードを披露してしまう始末。大概フォーム周りは後回しにしてきました。それが最近ようやく、まとまりのあるコーディングをするようになったと感じています。その一端をご覧ください。イディオムとはいわゆる慣用句のことで、プログラミングやマークアップにおける定型文をイディオムといいます。慣用句は、ふたつ以上のものが結合して、まったく別の機能を持つことを表します。したがって、小さな要素の集まりからなるコンポーネント単位のソースコードも同様です。きっとあなたも決まった書き方をするコンテンツがあると思います。それがイディオムです。イディオム集イディオム集には、input,select,textarea要素を用意しました。スタイルはSCSS形式で記述しています。「いますぐ使える」を目的としたため、コピペで使える状態です。したがって共通している箇所は適宜修正する必要があります。またサイズやボーダー、カラーはデザインに合わせて修正してください。 Input要素テキストボックス See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. サーチテキストボックス See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. チェックボックス See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. ラジオボタン See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen.…

May 9, 2019