サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
夏の料理
takeshiamano.medium.com
最近いろいろいじくっているGraphQLエンジンのHasuraを使うとPostgresのデータベースに格納したデータに対してGraphQLのクエリが発行できるようになります。 なのでRESTからデータを引っ張ってきてPostgres内に保存すればGraphQLでRESTからGraphQLへの変更が行える事に気づき、ぐるなびのAPIのデータを使って行ってみました。 手順は以下の通り: Hasuraの設定を行うデータ格納するテーブルを設定するテーブル間のrelationshipを設定するぐるなびAPIからデータを取ってきてPosgres内に格納するGraphQLのクエリを発行してみる基本これだけ。NodeJS内でGraphQL使ってデータの格納を行いますが、その他の追加のコーディングは必要ありません。 では実際にやってみましょう。 Hasuraの設定を行うHasuraはHerokuかDocke
TL;DR (この記事の概要)Auth0でVue.jsアプリに認証を追加Hasura GraphQLのpermissionを使ったJWT認証ログインしたユーザーが書いた記事だけが読めるサンプルVueアプリサンプルアプリのソースコード Vue.js + Auth0 + GraphQL + Hasura技術スタックアプリは次のスタックを使用して、動作させるために以下の設定および構成に必要があります。 vue-cli-plugin-apolloとvue-routerを使ったVue.jsAuth0で認証Hasura GraphQLエンジンでInstant GraphQL APIGraphQL APIを準備するために、Hasuraをpostgresと一緒にデプロイしましょう。 HasuraのデプロイHasuraは、新規または既存のPostgresデータベース上でリアルタイムのGraphQL APIを
ここ最近web業界でアンテナを立ててる人ならGraphQLを聞いたことはあると思います。 REST APIとGraphQLの違い これまでJavascriptで書かれたwebアプリやネイティブアプリがバックエンドのデータベースと通信するにはRESTという言う仕組みを使って通信してきました。 RESTの場合バックエンドエンジニアが実装したendpoint経由で裏で走っているデータベースと通信することになります。 なのでアプリを作っている際にはデータベースと何をするにもバックエンドエンジニアにendpointを作ってもらう必要があり、これが工数を余計に増やしてしまいます。 GraphQLはデータベース側にスキーマを定義するとそこに対して直接データを取りにいけるようになるため、バックエンドエンジニアにendpointを作ってもらう必要が無くなるという触れ込みです。 またGraphQLのメリットと
Last week Google’s Firebase platform released a new product, Cloud Firestore. Much like the Firebase real-time… 先週GoogleのFirebaseがCloud Firestoreという新製品をリリースしました。 Cloud FirestoreはFirebaseのリアルタイムデータベースとよく似ており、リアルタイムアプリケーションを構築するためのNoSQLベースのクラウドデータベースです。Firebaseへのクエリは複雑になりがちな問題などをCloud Firestoreを使うことで解決することができます。機能についての詳細ははこちらをみてください。 この記事ではVueとVuexとCloud Firestoreを使ってFirechatという簡単なリアルタイムチャットアプリケーション
Vue.jsをフロント、GraphQLをバックエンドに使って簡単なTODOアプリを実装してみたのでステップを詳細に説明します。 完成したコードは以下のgithubのレポジトリから取得できます。 https://github.com/moksahero/vue-appsync-basic GraphQLバックエンドはAWS AppSyncにした理由 GraphCoolや自前でGraphQLを立てる方法などGraphQLバックエンドの構築方法は多くありどれにしようかなと悩んでいました。今回はAWSのAppSyncを使ってバックエンドを構築することにしましたが、その理由は… 理由1: serverlessでお手軽に構築が可能 AppSyncのAPIの構築にはAWSコンソールから数クリックで初期の構築は終了します。 理由2:動作が安定している GraphQLはデータの書き込みや読み出しに失敗する事
先日開催されたGoogle I/O ’18のビデオをいろいろ見てますが、ひとつ気になったのはデスクトップPWAというキーワード。 モバイル用に作られたPWAがPCブラウザでも利用される例が増えているとのこと。 このセッションではスタバのPWAが紹介されています。昨年リリースしたスタバのPWAはかなり使われていて、現在でもPWAからの注文は毎週12%ずつアップしているとの事。 またこのPWAはPCブラウザからも使うことができ、PCからの注文も多く入っているとのこと。 Spotify PWAのデモはChrome OS上で行われinstall appアラートからインストールが行われ、一瞬でアプリのトレイにSpotify PWAが追加されました。 ChromeブラウザがPWA対応に 先日リリースされたChrome67からデスクトップPWAのサポートが強化されました。 追加されたデスクトップPWA周
With iOS 11.3, Apple has silently added support for the basic set of new technologies behind the idea of “Progressive… 今回のiOSのアップデートでService Workerが使えるようになったのはSafariブラウザのみでWeb Viewを使っているFirefox、Chrome、Fabookのアプリ内ブラウザではService Workerは動作しません。 Twitterのアプリ内ブラウザはSafari View Controllerを使っているのでService Workerが動作します。 iOSのPWAでできること (iOS 11.3以前から使えるものも入っています) 位置情報方位磁石、速度メーター、ジャイロスコープなどのセンサーカメラ音声出力スピーチ音声合成App
https://pinterest.com にログインして新しいPWAを体験してみてください。なぜProgressive Web App(PWA)なの?これまでの経緯。グローバルなな成長を目指すPinterestはモバイルサイト強化のためPWAの開発をはじめました。 認証をしていないユーザーの仕様状況を分析したところ、古い低速のモバイルサイトでは1%しかユーザー登録、ログイン、ネイティブアプリのダウンロードなどのコンバージョンをしていないのが分かりました。このコンバージョン率を向上させる事で得るメリットは大きく、PWAへの投資につながりました。 PWAの開発とリリースを3ヶ月以内で行う 3ヶ月という限られた期間中、Pinterestは、React、Redux、webpackを使用してモバイルサイトを再構築しました。この再構築地によりコアビジネスKPIに対して様々な改善がもたらされました。
Follow @joshuamorony ·The Ionic team recently announced a new project called Stencil. The best way to think of Stencil… Ionicチームは最近、Stencilという新しいプロジェクトを発表しました。Stencilは「最新のWeb Compを構築するためのツール」と思っていただければよいです。Stencilは、componentを構築するために必要な特定のスタイルの構文を持っています。 import { Component, Prop } from ‘@stencil/core’; @Component({ tag: ‘my-first-component’, styleUrl: ‘my-first-component.scss’ }) export class MyCom
アメリカでは次々に大手企業がPWAの導入に入っています。 いくつか気になるものをピックアップしてみました。 スターバックス https://preview.starbucks.com/ 現在はpreviewサイトとして公開されています。 基本はネイティブアプリと同じ機能が実現されています。 Reactで実装されているみたい。 Lyft https://ride.lyft.com Uberの競合サービス。 登録にはアメリカの電話番号がいるらしく、実際使ってみることはできませんでしたが。LyftのPWAもネイティブアプリを同じレベルの機能の実現を目指しているとこの事です。 PWAのインストールサイズがiOSに比べて75分の1以下になっているのがこのグラフから分かります。 Lancome USA https://www.lancome-usa.com/ 化粧品メーカーのLancomeのECサイト
Progressive Web App — PWAのメリット PWAは一言で言うとChromeやSafariなどスマホのブラウザ内で動作するけどネイティブアプリの様な操作性があり、カメラやGPSなどスマホ独自の機能にアクセスできるwebアプリの事。 SlackのPWA communityで最近選ばれたPWAのロゴ。 主な特徴は以下 webアプリのため、ダウンロードが必要ない アプリを使い始めるのに必要なのはURLだけ。例えば友達からline経由でPWAのURLが飛んできてそれをクリックするだけでアプリ開始みたいな使い方が可能。 ネイティブアプリはアプリの名前を友達から聞いてから実際にそのアプリが自分のスマホにインストールされて立ち上がるまでApp Storeで検索、iTunesにログイン、ダウンロードを待つなど6ステップあって1ステップ毎に20%脱落していくらしい。PWAならこのステップを
Native Apps are Doomed (ネイティブアプリは終わる運命)という挑発的なタイトルでEric ElliottがMedium記事を書き少し前に話題になりました。この記事で彼はもうiOSとAndroidのネイティブアプリは作らんと宣言し全部Progressive web appsでやると言い切ったのです。 次の記事のWhy Native Apps Are Really Doomedではネイティブアプリ制作は以下の様な理由でギャンブルだと言っています。 Google Play Store内のアプリの60%は一回もダウンロードされていない1ユーザーの一ヶ月の平均のアプリダウンロード数は3つ以下半分以上のアメリカのスマホユーザーは過去一ヶ月一回もアプリをダウンロードしていないアプリ経由の売上の94%が1%のアプリ出稿者によって作られているスマホユーザーの使用時間の80%は5つのアプ
Algoliaとは? Algoliaはフランスの人のfounderが2012年にはじめた検索のスタートアップです。 Algoliaの何がすごいの? AlgoliaのサーバーにデータをJSON形式で保存するとデータが自動的にインデックスされ検索を高速に行うことができます。 これまで検索を行うには各種の条件を選んで検索ボタンを押して結果を待つみたいのが普通でしたがAlgoliaを使うことで検索条件を変えた瞬間に検索結果がでるようになります。 Algoliaのデモ https://community.algolia.com/instantsearch.js/examples/ Algoliaを使った検索のでもサイトのいくつか、検索結果がリアルタイムに変わるのが分かりますね。 Place App https://place-app-4fc5b.firebaseapp.com/ こちらは天野が作った
PWA内でカード決済を行うと既存のApple PayやAndroid Payなどを通さないで決済できるので、アプリ内課金をしてもAppleに30%手数料を支払うことなく、決済会社への手数料だけで決済を行うことができるようになります。 PWAから決済できる方法をいくつか紹介します。 Payment Request API Googleが開発しているPayment Request APIを使うことでPWA内でもスムーズに決済を行うことが可能です。 Googleの詳細記事 https://developers.google.com/web/updates/2016/07/payment-request?hl=ja Payment Request APIはAndroid 向けChromeだけでしか利用することができなく、iOSのPWAではまだ対応していません。 Stripeを使った決済デモ Str
GraphQLとは? FacebookがAPIのインターフェースとして2012年くらいから開発しています。 2015年に公開され、2016年の9月に正式にproductionでの使用に耐えうるものとして公開されました。 FacebookのタイムラインやメッセージはGraphQLを使ってデータ取得をしているため、実は世の中のほとんどの人がすでにGraphQLのユーザーです 笑 何が次世代なの? APIといえばRESTfulなendpointを経由してリクエストを送ることが一般化していますがGraphQLはRESTとは違った方法でAPI提供者とデータのやりとりを行うことを可能とします。なので次世代です。 GraphQLとRESTの違い 別に次世代である事がだけが目的では無いのですがGraphQLを使うことでいろいろなメリットがあります。 必要なデータだけ取得可能 RESTfulなAPIでは返っ
このページを最初にブックマークしてみませんか?
『takeshiamano.medium.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く