アプリについて実装を紹介します。今回の発表用に作ったのはGridsomeを使って、Instagramから画像をとってきて並べるだけの簡単なサンプルアプリです。使い、入力ソースが簡単に扱えて、それでいて画像が出るので表現がわかりやすいかと思います。具体的な実装について聞いてくださった方がいらっしゃったので実装手順を紹介します。ことで、ちょっとデータを取ってこれるだけのアプリになります。本記事の開発環境は以下となります。プロジェクトの初期構築まずは@gridsome/cliでプロジェクトの初期構築をします。samples-gridsome-instagramとしました。name]この時点でローカルサーバーを起動して、初期状態のアプリを確認できます。起動したら、ブラウザでhttp://localhost:8080/へアクセスします。developシンプルな初期画面が表示されます。間で高速にページの表示切替ができます。以下のスコアを出します。サイトのタイトルはsiteNameなので、あわせて適切な名前と説明を設定します。[]}デフォルト値を入れていおくプルリクを出しましたが、本質的ではないのでマージされるのは難しいかな。続いて@zefman/gridsome-source-instagramを導入します。プロジェクトのディレクトリで下記コマンドを実行します。@zefman/gridsome-source-instagram/gridsome.config.jsファイルにプラグインの設定をします。(以下、設定項目の全文を抜粋)usernameは、取得したいインスタグラムのユーザー名です。クエリーで、このプラグインと設定を示すのに使う文字列です。developでローカルサーバーを再起動します。起動したらhttp://localhost:8080/___exploreへアクセスします。ボタンをクリックします。指定したtypeNameの文字列allInstagramPhotoにphotosの名前で使うという指定です。コメント(一番最初のだけ)です。タブを確認しながら欲しいデータが取得できるクエリーを作っていきます。値]でページを表示するための文字列が返ります。)ページの作成/src/pagesディレクトリにページ用のファイルを作ります。+.vueを作ります。今回はInstagramPhotos.vueとしました。ここからはローカルサーバーを立ち上げておきhttp://localhost:8080/instagram-photosへアクセスした状態で作業を進めます。ホットリロードでブラウザが自動更新するので確認が容易です。クエリーを書くための場所になります。4px;}</style>レイアウトにリンクを追加ページが作れたら、そのページへアクセスするためのリンクを作ります。リンクがあるのは/src/layouts/Default.vueです。特有の<g-link>タグを使います。ホスティングもしました。動作している状態を確認する場合は、こちらへアクセスしてください。当日の発表資料と、サマリーの記事はこちらです。よかったら、ご参照ください。Front』の発表資料はこちらになります。(下記、スライド埋め込み)また発表のサマリー記事は、こちらになります。アプリの実装例になります。簡単にデータソースの内容にアクセスできるのを感じていただけたでしょうか。して画一的に扱うことができます。いろいろなデータソースを扱っておもしろいサイトが作れそうです。2017Riotz.works投稿や発言は私的なものであり、所属する企業や組織には関係ありません。HomeSlides。