はてなブックマーク

なにこれ 自分のブログの目次を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

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公式サイトのプラグインの章のまとめ。 プラグイン概要 Gatsbyプラグインは、Gatsbyの全処理を拡張および修正可能です。 例えば下記のようなことができます。 外部コンテンツ（CMS、ファイル、REST APIなど）を追加してGraphQLで扱えるようにする ファイル（Markdown、YAML、CSVなど）データをJSON形式にフォーマットする サードパーティーの機能（Google Analytics, Instagram）をGatsbyで作ったWebサイトに追加する またnpmパッケージでモジュール化されているため、巨大で複雑なWebサイトでも簡潔に機能追加･管理が可能です。 公開プラグインを検索する プラグイン一覧と個別仕様は GatsbyのPluginsで確認できます。 公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるようです。（2