サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
takumon.com
なにこれ 自分のブログ(Gatsby製)のビルドが遅すぎてNetlifyでタイムアウトしてしまうので、ビルドチューニングをしました。 15分以上かかっていたビルドが7分以下になり50%短縮できたので、その時の知見をまとめます。 割と地味な作業が多いですが、Gatsbyのビルド時間短縮に関するTipsを効果がある順にご紹介します。 🚀1. 画像生成処理を並列化する 🚅2. 必要な画像だけクエリで取得する 🚂3. 生成画像の種類を減らす 🚗4. 画像の縦横サイズを最適化する 🚴🏻5. 画像のファイルサイズを圧縮する 🏃🏻6. 生成する画像をシンプル&低クオリティにする 🏊🏻7. netlify-plugin-gatsby-cacheを使う 💎番外編1: Circle CIでビルドしてNetlifyにデプロイする なぜビルドが遅いのか → 画像生成に時間がかかっている ビル
なにこれ 自分のブログの目次をQiitaっぽくしたい...現在表示中の章をハイライトする目次を作りたい...ということで作りました。 マークダウンをHTMLに変換するのにunifiedという構文解析ライブラリを使っています。 メモ用にReactサンプルアプリも作りました ⇒ ソースとデモ ポイント マークダウンのHTML化と目次抽出にはunifiedを使いました。 スクロールの度に現在表示中の章をチェックして目次ハイライトを更新します。 スクロール処理は高負荷なので負荷軽減のためにLodashのthrottleを使いました。 表示中の章が切り替わるごとに再描画するためにReactのstateを使いました。 以下で詳細を説明していきます。 unified アプリの実装を説明する前にマークダウンの構文解析に使っているunifiedについて説明します。 unified自体はただのインターフェース
なにこれ クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。 📝私はWeb開発の経験はありますが、Ionicの経験があるわけではなく、これからやってみようという段階です。 そのため本記事はあくまでも調査結果をまとめたもので、実際の開発の経験に基づくものではありません。 Ionic概要 クロスプラットフォームアプリをWebの技術(HTML/CSS/JS)を使って作るためのフレームワークです。 iOS・Android・Electron・Web(PWA)などの複数の環境で動作させ、ネイティブ機能にアクセスするためのCapacitorと、 WebComponentベースのネイティブ風なUI Componentから構成されます。 U
なにこれ AppSyncはCognitoと連携して認可制御ができます。 今回はそのやり方についてご紹介します。 ざっくりいうと以下のようなことが実現可能です。 ✨スキーマ定義におけるQueryやMutationごとの認可制御(ユーザーグループ) 💎リゾルバーにおける項目ごとの認可制御(ユーザーグループ) 🎊リゾルバーにおける細かな認可制御(ユーザーグループ、ユーザー名) スキーマ定義におけるQueryやMutationごとの認可制御(ユーザーグループ) @aws_authアノテーションをQueryやMutationに付与します。 以下の例ではCognitoのユーザーグループごとに 管理者は登録、参照、更新、削除 営業は登録、参照、更新 一般メンバーは参照 のように認可制御しています。 type Mutation { createTask(input: CreateTaskInput):
const filename = 'filepath/to/myimage.png' return <Image filename={filename} /> gatsby-imageをちょっと知っている人ならわかると思うのですが、gatsby-imageで画像を表示するには、いちいちStaticQueryタグとGraphQLのクエリを定義する必要があって結構面倒です。そして公式ドキュメントには画像のファイルパスをGraphQLのクエリにハードコードする方法しか載っておらず、Reactコンポーネントで画像ファイルパスを変数として扱う方法については記載がありません。 そこで今回は、画像ファイルパスを渡せばgatsby-imageで画像を最適化して表示してくれるコンポーネントを作りました。 きっかけは、最近自分のブログの記事一覧のデザインを変えて、サムネイル画像を表示するようにしました。今まで
なにこれ 最近Vue.jsのマテリアルデザインのUIフレームワーク「Vuetify」を使っています。 とても便利で、管理アプリのようにデザインにこだわる必要がなければ、CSSをほとんど書かずに済むくらいコンポーネントが充実しています。 ただSelectタグでlabelとvalueを出しわける際に初期値を設定する場合は少しだけ注意点があるので、この記事ではそちらを紹介します。 return-objectを使いましょう Selectタグでlabelとvalueを出しわけるときに初期値を設定する場合、v-modelで設定します。 以下のような実装です。 <template> <div> {{ selectedPlan }} <v-select v-model="selectedPlan" item-text="label" item-value="value" :items="plans" la
なにこれ AWSのGraphQLフルマネージドサービス「AppSync」で複数のデータリソースを扱う場合は**「Pipeline Resolver」**という機能を使います。 これは、1つのデータリソースを扱うファンクションを定義し、それらを組み合わせるという仕組みです。 ファンクションではデータリソースのCRUD操作や操作結果の加工などをVTL(Apatch Verocity Template Language)で記述します。 今回は、Pipeline Resolverを使って複数のデータリソース(DynamoDBの複数テーブル)から情報を取得する場合のVTLの書き方について以下2パターンをご紹介します。 🔰 1対1で紐づく2つのDynamoDBのテーブルから1件情報を取得する場合 💪 1対Nで紐づく2つのDynamoDBのテーブルから複数件情報を取得する場合 ※この記事ではあくまで
# サービス名 service: appsync-sample-with-serverless provider: name: aws # ステージ、デプロイ先を開発、運用などで分けたい場合はココを切り替えます stage: production # デプロイ先のリージョンです region: ap-northeast-1 # AppSyncのプラグインを指定します plugins: - serverless-appsync-plugin # プラグイン関連の設定はcustomで行います custom: # ここでAppSyncの設定を行います appSync: # エンドポイントの名前を指定します name: appsync-serverless-sample # AppSyncの認証方法を指定します # ここではCognitoによる認証方法を指定しています authentication
なにこれ 以前の記事設定いらずのNode製GraphQLサーバー「Graphpack」の使い方でGraphQLのサーバー側を実装を紹介しました。 Graphpackは備え付けのGraphQL Playground IDEで動作確認できますが、せっかくなので今回はクライアント側も作成してみました。 本記事では**Nuxt.jsとApollo Clientを使って簡単なユーザー管理画面を作成する方法をチュートリアル形式でご紹介します。** 最終的にはQuery, Mutation, Subscription全てを実装しますが、 以下のようにステップを分けて、少しずつ実装していきましょう✨ 🔰 プロジェクトのひな型を作成する 💪 Queryを実装する → ユーザー情報が一覧で表示できる 💖 Mutationを実装する → ユーザーの登録・更新・削除ができる 💎 Subscriptionを
なにこれ 2019/2/1(金)、WEBエンジニア勉強会 #11でLTしてきました。 本記事では自分のLTスライドと、10分の枠では伝えきれなかった補足情報を紹介します。 また他の方のLTの様子や、勉強会の雰囲気なども参加レポートとして書いています。 LTの反響 Twitterを見るとMDX-Deckに少しでも興味をもっていただけたようでうれしいです。 よく考えたらスライド作成ツールの紹介をするスライド作るのってハードル高くてしんどいよな・・・ こんな表現・アニメーションできるんだぜって見せつけなきゃいけないんだから、たくもんさんすごい #webエンジニア勉強会11 — ngmt (@ngmt83) February 1, 2019 隣に座っている、みずりゅさんが手に持ったものを落としそうになるぐらいスゴイ、それが MDX-DECK!w #WEBエンジニア勉強会11 — いわしまん (@
設定いらずのNode製GraphQLサーバー「Graphpack」の使い方 / Query, Mutation, Subscriptionを試す なにこれ 「とりあえずクライアント側と同じJavaScriptで手っ取り早くGraphQLサーバー立てたい!」 このようなユースケースにGraphpackはピッタリです。 設定いらずのNode製GraphQLサーバーで 「GraphQLのスキーマとリゾルバーを定義するだけでOK」、さらに **「GraphQL Playground IDEが標準搭載」**なのでクライアント側を自前で実装せずとも動作確認できます。 今回は、このGraphpackの使い方について以下の5ステップでご紹介します。 ※ここで紹介するソースコードはGitHub(Takumon/nuxt-graphpack-sample)にもあるので参考にしてみてください。 🔰 Graph
なにこれ SNSのコンテンツ、動画といった外部コンテンツを自分のブログに載せる場合、 単純にリンクを張り付けるよりも、以下のようにHTMLの埋め込みコードを張り付けたほうがビジュアル面で効果的です。 ただTwitterやYouTubeなどの埋め込み対応サイトでも、サイトごとに埋め込みコードを取得する方法が異なるため結構めんどくさかったりします。 また埋め込みコードに対応していないサイトも多いのが現状です。 「Iframely」は、そのような問題を一挙に解決してくれるWebサービスです。 実際このブログでもIframelyを使って外部コンテンツを埋め込んでいますが、かなり便利です。 今回は、「Iframelyでどんなことができるか」、**「実際使ってみた感想」などについてご紹介したいと思います。 最後のほうに「GatsbyでIframelyを使う方法」**も紹介しています。 Iframely
なにこれ Nuxt.js+GraphQLの知識がこれから必要になるので**「Hello, GraphQL for client-side!」を読んだところ、非常にサクっと学ぶことができたので感想を書きます。 GraphQLでサーバーと通信するには「Apollo Client」**というライブラリを使用します。 Nuxt.jsではApollo Clientを使いやすくしたライブラリである **「apollo-module」が用意されており、本書は主に「apollo-moduleの設定方法・実装方法についてチュートリアル形式で学べる一冊」になっていました。ボリュームも46ページとそんなに多くないので、「1日~2日で読める」内容です。 ただNuxt.jsの説明は端折っていたり、VuexのStoreのdispatchも知っている前提なので「Nuxt.js触ったことある人向け」**かなと感じました。
なにこれ Gatsbyのプラグインは、公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあります。(2018/10/21現在) 今回はその中でもおすすめプラグイン45個をユースケース別にご紹介します。 ユースケース別目次 ※クリックすると説明セクションにとべます。 マークダウン系 コードブロックでシンタックスハイライトする コードブロックにタイトルを追加する 見出しにGitHub風ホバーリンクをつける 絵文字を使う Graphvizでグラフを描画する 数式を使う コードブロックにJavaSriptファイルなどを埋め込む リンクされているPDFや動画などをビルド時にpublicフォルダにコピーする 画像をスマートに表示する iframeタグを縦横比固定でレスポンシブ化する Youtubeを埋め込む Twitterの埋め込む SEO系 React Helmetを使う オフライ
ブログ開設手順 Gatsbyってなにって状態から30分程度でブログを開設できました。 下記にそのときの手順をメモしておきます。 0. 前提条件 Git、Node、npmは事前にインストールしておいてください。 1. ブログのスターターキットを起動 Gatsbyはブログをすぐ始められるようにスターターキット(スキャフォールド)を用意しています。 まずはそれを使ってローカルでブログを起動してみます。 1-1. Gatsbyインストール
なにこれ Gatsby公式サイトのプラグインの章のまとめ。 プラグイン概要 Gatsbyプラグインは、Gatsbyの全処理を拡張および修正可能です。 例えば下記のようなことができます。 外部コンテンツ(CMS、ファイル、REST APIなど)を追加してGraphQLで扱えるようにする ファイル(Markdown、YAML、CSVなど)データをJSON形式にフォーマットする サードパーティーの機能(Google Analytics, Instagram)をGatsbyで作ったWebサイトに追加する またnpmパッケージでモジュール化されているため、巨大で複雑なWebサイトでも簡潔に機能追加・管理が可能です。 公開プラグインを検索する プラグイン一覧と個別仕様は GatsbyのPluginsで確認できます。 公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるようです。(2
このページを最初にブックマークしてみませんか?
『Takumon Blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く