研究室のHPをサーバレス、SPA、GraphQL、ChatOpsで作った - Qiita
Slack botが更新する研究室のHPを作りました。 できたもの https://moriokalab.com Slack botが動いている様子 なぜ作ることになったか 〜ある日〜 指導教員「研究室のHPが欲しいから作って。何も管理したくないからWordPressとかCMSはいやだ。Slackから投稿出来るようにしたい。」 後輩くん「分かりました」 〜その後〜 後輩くん「先輩・・・お願いします・・・」 俺「任せろ」 こうして我々はHPを作ることになった。 要件整理 使う技術を決める前に、まずは頂いた要件を整理します。 webページを作る 動的に変更されるコンテンツがある データのリレーションは特になし サーバーやパスワードとか、何も管理したくない 研究室のみんなで更新したい Slackからアップデートできるようにしたい なるほど。どう作るかぼんやりと見えてきました。 構成を考える まず
静的サイトジェネレーター Gatsby を使ってみた事と、縦書きテンプレートを作った話 - Qiita
public ├── 404 │ └── index.html ├── 404.html ├── app-fdbfd90de30d9bb2f8ed.js ├── app-fdbfd90de30d9bb2f8ed.js.map ├── build-js-styles.css ├── build-js-styles.css.map ├── chunk-manifest.json ├── commons-61689ac9f897bb0fcb2f.js ├── commons-61689ac9f897bb0fcb2f.js.map ├── component---src-layouts-index-js-00f5c2e25cfe978dd214.js ├── component---src-layouts-index-js-00f5c2e25cfe978dd214.js.map ├── compo
vue.js, apolloで無限スクロール（Infinite Scroll）を実装する - Qiita
vue.jsとapolloを使って以下のような無限スクロールを実装します。 （正確にはスクロール位置検知での自動追加読み込み） フロントの説明のみになります。バックエンドのgraphQL APIサーバーはGraphCMS使っています。 デモページはこちら。 https://vue-sample-blog.firebaseapp.com/infiniteScrollDemo （スマホで動かなかったので修正します） 無限スクロール[Infinite Scroll]とは？ よくある画面下部までスクロールした際に、自動で次のコンテンツが読み込まれるやつです。 スマホアプリとかのUIで採用される場合が多いですね。 利点は、ページングがないので離脱を防ぎやすいなど。 欠点は、プラウザの戻るとの相性が悪いなど。 vue.js apolloでの実装 今回の元データはこちらで作成したブログを使っています。
HeadLessCMS + GraphQL + Vue.js でSPA（ブログ）を作ってみる
新しめの技術を勉強したいと思い、HeadLessCMS + GraphQL + Vue.js で簡単なSPA(ブログ）を作ってみました。 その過程で学んだことをチュートリアル形式でまとめます。 なるべく初学者の方にもわかりやすいようスクリーンショットを多めに掲載しています。 概要 headlessCMS、GraphQL、Vue.js、Apolloでブログを作成します。 チュートリアルがメインなので、graphQLのクエリの詳細な説明などは省略しています。 以下各バージョンです。 GraphCMS: 2018.7公開のもの Vue cli: 3.0.1 vue: 2.5.17 vue-apollo: 3.0.0-beta.11 vue-router": 3.0.1 vuetify: 1.2.4 graphql: 14.0.2 作成サンプル このようなのトップページ（投稿一覧）と詳細ページの2
vue.js, Apollo, graphQLで名簿アプリを作成する（CRUD機能の実装サンプル）
vue.jsとapollo、graphQLの学習用に、CRUD機能(create、read、update、delete）を持つ名簿アプリを作りました。 実装をチュートリアル形式でまとめます。 バックエンドはgraphQLのAPIサーバーであるGraphCMSというヘッドレスCMSを使っています。 概要 CRUD機能を持つ名簿アプリを作成します。 右上のボタンから名簿の追加。 各レコード右側のボタンで更新、削除が行えます。 さらにvuetifyのdata-tableの機能ですが、並び替えやページングも行えます。 デモサイトはこちら（追加更新削除やってみて大丈夫です。） https://vue-sample-crud.firebaseapp.com/ 全コードはこちら https://github.com/kawamataryo/vue-apollo-crud バージョン情報 vue-cli
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GraphCMS - The GraphQL Headless CMS
