研究室のHPをサーバレス、SPA、GraphQL、ChatOpsで作った - Qiita
Slack botが更新する研究室のHPを作りました。 できたもの https://moriokalab.com Slack botが動いている様子 なぜ作ることになったか 〜ある日〜 指導教員「研究室のHPが欲しいから作って。何も管理したくないからWordPressとかCMSはいやだ。Slackから投稿出来るようにしたい。」 後輩くん「分かりました」 〜その後〜 後輩くん「先輩・・・お願いします・・・」 俺「任せろ」 こうして我々はHPを作ることになった。 要件整理 使う技術を決める前に、まずは頂いた要件を整理します。 webページを作る 動的に変更されるコンテンツがある データのリレーションは特になし サーバーやパスワードとか、何も管理したくない 研究室のみんなで更新したい Slackからアップデートできるようにしたい なるほど。どう作るかぼんやりと見えてきました。 構成を考える まず
GraphQLを推進する「GraphQL Foundation」設立、Facebookの手を離れLinux Foundation傘下へ
GraphQLを推進する「GraphQL Foundation」設立、Facebookの手を離れLinux Foundation傘下へ GraphQLはRESTful APIのように、APIに対して問い合わせをし、結果を受け取るための問い合わせ言語およびその仕組みです。 URLを用いることでシンプルかつ非常に自由度の高い問い合わせを表現できるRESTful APIに対して、GraphQLは型やスキーマを持つことでシンプルで分かりやすく効率の良い問い合わせが可能なことが特徴といえます。 Linux Foundationは、この「GraphQL Foundation」設立のプレスリリースでGraphQLを次のように説明しています。少し長いのですが引用します。 GraphQL is a next-generation API technology developed internally by
静的サイトジェネレーター 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
いいこと言ってそうな名言を集めたサイトを作った「プログラミングはセックスのようなもの。ひとつのミスに人生を捧げてサポートしなければならない」
英語でよくある、いいこと言ってそうに見えるけどなんかプッとくる名言みたいなのが好きで集めていた。職場での息抜きにそういう一文をslackに貼り付けるのはよくやっていて、面白いからまとめてウェブサイトにした。 エンジニアの名言メーゲン https://www.meigen.ga/ バックグラウンドにきれいな景色の写真を入れて無駄に「いいこと言ってそう」な雰囲気にした。 名言は人気順ということでツイート数順に上から並べている。もし気に入ったのがあって、ツイッターで共有していただければ順位が上がりますよ、と。 無料だから.gaでドメインを取った。「名言. ガー」とでも覚えてください。 https://www.meigen.ga/ ボタンひとつで英語版に切り替わるので英語の勉強にもどうぞ。（学習効果の保証は一切無し） ほんとただの趣味でしかないんだけど、集めているのでもし面白いのをご存知でしたらサ
LaravelとGraphQLでAPI開発
追記: ご注意 folkloreinc/laravel-graphql こちらの記事で採用しているライブラリが 2019/2/10 にアーカイブされてしまいました😢😢😢 今後ライブラリ導入を検討される方は nuwave/lighthouse を推奨します。 ========================================================= 会社でGraphQLを導入することが決まったものの、知見がないので調べつつ進めています。 GraphQLの情報がそもそも少ない上に、Laravelの情報が少なくソースコードとずっと睨めっこしてました。 自分の情報整理を兼ねて記事にしたいと思います。 間違い等あればご指摘して欲しいです。 GraphQL初めてなので要所要所で感動しました。 ※全部まとめて書こうと思ってたんですが、あまりにも長くなりそうなので 今回はTy
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
GraphCMS - Google 検索
GraphCMSのプラットフォームは当社のウェブサイトとシームレスに統合されており、大変迅速にストーリーをアップロードしてグローバルに配信することが可能です。
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
Nuxt.jsでGraphQLを扱う方法 - Qiita
株式会社スマートドライブのオオキです。遅ればせながらSmartDrive Advent Calendar 201725日目の記事です。 はじめに 弊社ではGraphQLを採用したプロダクトを開発中です。 詳しくは弊社アドベントカレンダー4日目の記事を見てみてください。 GraphQLのススメ 開発中のプロダクトのフロントエンドではNuxt.jsを採用する予定です。 NuxtでGraphQLを扱う上で少し躓いた部分があったのでまとめてみたいと思います。 実装 apollo-module Nuxt.jsでGraphQLを扱うためにNuxt.jsのapollo-moduleというモジュールを使います。 Nuxt.js module to use vue-apollo (integrates graphql-tag loader to parse .gql & .graphql files) ap
Nuxt.js＋GraphQLを導入してみて感じた、フロントエンドエンジニアのこれから
2018年4月21日、株式会社サイバーエージェントが主催するイベント「Battle Conference U30」が開催されました。30歳以下のエンジニアによる30歳以下のエンジニアのための技術カンファレンスである本イベントには、さまざまな領域で活躍する若手が登壇。企業の枠を超えて、自身の技術・事業・キャリアに関する知見を発表しました。「Nuxt.jsとGraphQLから見えたWeb開発の未来」に登壇したのは、株式会社スマートドライブの大木尊紀氏。Nuxt.jsとGraphQLを開発に用いるメリットと、今後のフロントエンドエンジニアの価値について語りました。 Nuxt.jsとGraphQLに見る、Web開発の未来 大木尊紀氏（以下、大木）：よろしくお願いします。「Nuxt.jsとGraphQLから見えたWeb開発の未来」とけっこう大層なこと言ってますけど、最後までお聞きください。 大木尊紀
GraphQLはRESTの置き換えではない｜こんぴゅ
GraphQLは最近注目されているWeb APIのための問い合わせ言語だ。 現在主流のRESTfulなAPIはURLとmethodでリソースを表現するわけだが、GraphQLは単一エンドポイント（ex: "POST /graphql"）だけ存在し、欲しいリソースをHTTP POSTのbodyに明示的に記載してリクエストする。 ↑JSON APIをGraphQLの形式でコールする（引用: how to graphql ) 徐々に実装例が増えてきており、2016年にはGithubがAPIの実装を全面的にGraphQLに移行させたのが注目された。 色々調べていくと、GraphQLは単にRESTの代替ではなく、開発・運用フローを一新させうるほど豊かな思想・機能を含む事が分かって来たので現状の整理をしてみたい。 APIリクエストを束ねて効率化RESTではURLがひとつのリソースを表すため、複数のリソ
雑に始める GraphQL Ruby【class-based API】 - Qiita
まずはじめに 目的 この記事は、これからgraphqlをはじめる、もしくはgraphql始めたてにおいて知っておくと良さそうな情報(と、そこへのindex)をまとめることを目的に書いています。 想定読者は「これからgraphql始めたい人、始めたばかりの人」です。 その背景として、graphqlベースのAPIがもっと増やすべく、その導入/学習コストがそこまでは高くないことを説明したい、ということがあります。 ------8<------- 以下宣伝 ------8<------- なお、 Issus(イシューズ) という個人向けマークダウンノートサービスの中でGraphqlを使う中で得た情報をまとめています。 ------8<------- 以上宣伝 ------8<------- 概要 Graphqlのコンセプト、特徴、強み、という概念としての話から、 リクエスト/レスポンスの流れ、クエ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sample-blog
GitHub - kawamataryo/vue-sample-blog: headlessCMS、vue、apolloのsample blog
nuxt.js graphcms - Google 検索
GraphCMS - The GraphQL Headless CMS
The Next Generation GraphQL Headless CMS
Streamlining APIs, Databases, & Microservices | Apollo GraphQL
GitHub GraphQL API documentation - GitHub Docs