Shopify でブログのタグを活用する方法を徹底解説！｜タグによるブログの絞り込みを行えるアプリまで紹介

Shopifyで限定販売を行う方法｜おすすめアプリ紹介

Shopifyで延長保証を実現できるアプリについて調べてみた

ShopifyでBtoB割引を行う方法｜卸売に役立つおすすめアプリを紹介

Shopifyでモバイルアプリのバナーを表示する方法を徹底解説

ShopifyでVIP会員限定販売を行う方法｜おすすめアプリの紹介

Shopifyで受注生産販売をする方法｜受注生産のメリットとおすすめアプリ3選

Shopifyで購入制限（個数制限）をする方法｜数量限定販売のメリットとおすすめアプリ3選

Shopifyでの追従カート機能（追従ボタン）について徹底解説｜設置するメリットとおすすめアプリ3選

Shopify で会員ランクを実現できるアプリを徹底解説｜メリット・デメリットまで解説

【2024】Shopifyにポイント機能を導入できるアプリについて調べてみた

Shopifyで在庫連携したセット販売ができるアプリについて調べてみた

Shopify でブログテンプレートのデザインをカスタマイズする方法を徹底解説｜初心者でも簡単にできる

ShopifyでFAQ（よくある質問）を実現する方法について調べてみた

Shopifyに熨斗（のし）を導入できるアプリについて調べてみた

Shopifyでスライドショーを活用するためのポイントと実装方法について調べてみた

Shopifyでの在庫数表示について調べてみた

【2024】Shopifyのセット販売アプリについて調べてみた

【2024】Shopifyでのノベルティ付与について調べてみた

Shopifyで期間限定セールを実施するまでの手順を詳しく解説！

【2024】Shopifyのお気に入り（wishlist）アプリについて調べてみた

Shopifyでチェックアウトをカスタマイズして配送方法を非表示にする方法を解説！

Shopify ストアでブログ記事一覧（お知らせ一覧）を表示する方法を詳しく解説！

Shopify でボリュームディスカウント（まとめ買い割引）を実現する方法を調べてみた

【新・Shopify マスターへの道】#19 ストアの所有権を移行しよう【2024 年最新版】

【新・Shopify マスターへの道】#18 決済テストを行おう【2024 年最新版】

【新・Shopify マスターへの道】#17 各種設定を編集しよう【2024 年最新版】

Shopifyで特定の決済方法を非表示にする方法を徹底解説！

【新・Shopify マスターへの道】#16 一般設定を編集しよう【2024 年最新版】

【専用アプリ】Shopifyでおひとり様一点限りの購入制限設定を行う専用アプリの使い方を徹底解説！

【新・Shopify マスターへの道】#15 送料を設定しよう 【2024 年最新版】

【新・Shopify マスターへの道】#14 メニューの編集をしよう【2024 年最新版】

Shopifyでランキング表示を行う方法を徹底解説！

Shopify にバナーを設置する方法を徹底解説！

Shopify で階層のあるパンくずリストを挿入するアプリについて徹底解説！

Shopifyで会員登録を促進するためのアプリを徹底解説

【新・Shopify マスターへの道】#13 規約を入力しよう【2024 年最新版】

【新・Shopify マスターへの道】#12 About ページを作成しよう【2024 年最新版】

【新・Shopify マスターへの道】#11 コンタクトフォームを作成しよう 【2024 年最新版】

【新・Shopify マスターへの道】#10 アカウントページを作成しよう【2024 年最新版】

【新・Shopify マスターへの道】#9 サイトのフォントを編集しよう【2024 年最新版】

Shopify でクラウドファンディング（自社クラファン）を行う方法について調査してみた

【新・Shopify マスターへの道】#8 トップページ以外を編集しよう【2024 年最新版】

【新・Shopify マスターへの道】#7 テーマを編集しよう（テーマ設定編）【2024 年最新版】

【新・Shopify マスターへの道】#6 テーマを編集しよう（セクション編）【2024 年最新版】

【新・Shopifyマスターへの道】#5 サイトのデザインを選ぼう【2024 年最新版】

【新・Shopify マスターへの道】#4 ブログ記事を作成しよう【2024 年最新版】

【新・Shopify マスターへの道】#3 コレクションを登録しよう【2024 年最新版】

【新・Shopifyマスターへの道】#2 商品登録をしよう【2024 年最新版】

【新・Shopifyマスターへの道】#1 ストア構築の準備をしよう【2024 年最新版】

【新・Shopifyマスターへの道】#0 ロードマップを始める前に【2024 年最新版】

Shopify ストアで配送料をカスタマイズする方法を徹底解説！

Shopify ストアでクラウドファンディングを実施する方法を徹底解説！

Shopify ストアに名入れオプションを追加する方法を徹底解説！

Shopify ストアでのしを実現する方法を徹底解説！

Shopify でギフトラッピングを実現する方法を徹底解説！

Shopify で予約販売を実現する方法を徹底解説！

Shopify でセット販売を実現する方法を徹底解説！

Shopify で顧客へのタグ付けを自動で行う方法を徹底解説！

Shopify でセット販売はできる？アプリの使い方を解説！

Shopify ストアでオークションを開催する方法を徹底解説！

Shopify にポイントシステムは導入できる？アプリの使い方も解説！

Shopify ストアに会員限定販売や期間限定セールを導入する方法について徹底解説！

Shopify で売り切れ（在庫切れ）商品を非表示にすることはできる？アプリの使い方を解説！

Shopify にレビュー機能は導入できる？アプリの使い方も解説！

Shopify でお気に入り機能は実現できる？アプリの使い方を解説！

Shopify で期間限定販売はできる？アプリの使い方を解説！

【Shopify】日本製のレビューアプリについて徹底解説

Shopifyにセット販売を取り入れるメリットとアプリの使い方を解説

Shopifyでスライドショーを簡単に設置できるアプリを解説

<h2 id="h11ccdcd9a5">本記事について</h2><p>どうも、齊藤です。<br>本記事では、「<strong>ShopifyストアにLINE誘導バーをつけたい、、</strong>」「<strong>送料無料などのキャンペーンをShopifyストアに表示いたい、、</strong>」という悩みを持っている方向けに、<br>LINE誘導バーや送料無料バーを導入する方法を解説していきます。<br>Shopify にまだ慣れていないかた、これからストア構築される方の参考になればと思います。<br>それでは、やっていきましょう！<br></p><h2 id="haae75e347e">使用するアプリについて</h2><p>今回使用するアプリは「送料無料キャンペーン｜リテリア 告知」です。<br>公式記事がありましたので、<a href="https://www.re-terior.com/shopify-apps/reterior-announcement/guide" target="_blank" rel="noopener noreferrer">こちら</a>を参考に本記事を書いております。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/b7385a5433e741d0bad2133bb62f825a/image.png" alt=""><br></p><h3 id="h57d5f36d69">送料無料キャンペーン｜リテリア 告知 とは？</h3><p>送料無料キャンペーン｜リテリア 告知 とは、送料無料バー・LINE誘導バー・お知らせバーなど、さまざまなバーを Shopify ストアに導入できるアプリです。<br>Online Store 2.0のテーマで動作し、カスタマイズ性が非常に高いことが特徴です。<br></p><h3 id="h61f41b6682">送料無料キャンペーン｜リテリア 告知 の料金は？</h3><p>送料無料キャンペーン｜リテリア 告知 は、有料で月額 4.90ドルになります。<br>料金は少し高めですが、汎用性、カスタマイズ性を考えると妥当な値段かと思います。<br>公開しているテーマでは、7日間の無料体験ができます。また、開発中のストアでは完全無料で使用できます。<br>アプリを導入する前に、送料無料バーを実際に作成して機能を確認できるのは非常にありがいたいですね。<br><br>使用するアプリについてある程度理解したと思いますので、<br>アプリをストアに導入して、送料無料バーを作成していきます。<br></p><h2 id="hd3307bf288">アプリの導入</h2><p>アプリの導入について説明していきます。<br>下記の流れでアプリを導入していきます。</p><ol><li>アプリのインストール</li><li>送料無料バーのカスタマイズ</li><li>LINE誘導バーのカスタマイズ</li></ol><p>それでは、導入していきます。</p><h3 id="h8baa83704e">アプリのインストール</h3><p>まずは、自分のストアの「アプリ管理」画面を開きます。<br>アプリ管理画面右上にある「ストアをカスタマイズ」という緑のボタンを押して、アプリストアに移動します。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/6026e670aa5941ed94a1a90d337786da/image.png" alt=""><br><br>アプリストア内で「送料無料キャンペーン｜リテリア 告知」と検索をして、<br>「アプリを追加する」という緑のボタンを押して、アプリをインストールします。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/9d94ff159f394d158cb4239f23ad94ea/image.png" alt=""><br><br>インストールが完了するとアプリ管理画面が表示されます。<br>アプリ管理画面が表示されたら、自動インストール項目にある、「有効化」という緑のボタンを押します。<br>このボタンを押すことで、自動でストアにアプリセクションをインストールできます。<br>（もし、これでインストールできない方は、手動インストールの方法がアプリ管理画面に記載されておりますので、とそちらからインストールをしてください。）<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/b8e13705f54b461b8efa7f143a8b84cc/image.png" alt=""><br><br>有効化ができたら、「プレビュー」ボタンを押してテーマカスタマイズ画面に移動します。<br></p><h3 id="h923959958a">送料無料バーのカスタマイズ</h3><p><br>「送料無料キャンペーン｜リテリア 告知」のセクションが追加されているのでデザインを修正していきます。<br>設定項目がありますので、お好きなデザインにカスタマイズしてください。<br><br>設定の詳細は<a style="background-color:#ffffff" href="https://www.re-terior.com/shopify-apps/reterior-announcement/guide" target="_blank" rel="noopener noreferrer">公式記事</a>を参考にしてください。<br><br>作成した送料無料バー ↓<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/7cebf0f93aca4de0833811545dbce723/image.png" alt=""><br><br>設定内容 ↓<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/115a35c5b353486caf55f65a3daac4a8/image.png" alt=""><br></p><h3 id="he2d33e2cf9">LINE誘導バーのカスタマイズ</h3><p><br>「送料無料キャンペーン｜リテリア 告知」のセクションが追加されているのでデザインを修正していきます。<br>設定項目がありますので、お好きなデザインにカスタマイズしてください。<br>ボタンにLINE友達を追加するページのリンクを設定することで、LINE友達登録を促すことができます。<br><br>作成したLINE誘導バー ↓<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/3239e0b3d8114d7e9cd7fd8ad870097a/image.png" alt=""><br><br>設定内容 ↓<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/ecf45a96e913489f93c2efcce270fcfb/image.png" alt=""><br></p><h2 id="ha214098e44">まとめ</h2><p>今回は、LINE誘導バーや送料無料バーを導入できるShopify アプリ「<a href="https://apps.shopify.com/reterior-announcement?locale=ja" target="_blank" rel="noopener noreferrer">送料無料キャンペーン｜リテリア 告知</a>」について解説しました。<br>興味がある方はぜひ導入してみてください。</p>

【Shopifyアプリ】LINE誘導バー・送料無料バーを作成してみた

<h2 id="h8d027c8ed3">はじめに</h2><p>こんちゃっす、信条です。<br>本日は、『神アプリ紹介シリーズ』です。<br>この企画では、筆者が実際に使用していて涙が出るほど感動したアプリを紹介する企画になります。<br>早速行ってみましょう。</p><h2 id="h4cb2da2985">本日の神アプリ</h2><p>本日のアプリはこちらです！！<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/0e6daaa824e747e5ae8d8719becb2b7e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2015.55.51.png" alt=""><br>『らくらく日本語フォント設定｜リテリア Font Picker』とは、Googleフォントだけでなく、日本語フォントをカンタンにShopifyストアに導入できるアプリです！<br>Shopifyのほとんどのテーマはデフォルトでは、英語のフォントしか対応していないんですよね。<br>そのため、日本語のフォントを使用したい場合にはコーディングする、もしくはフォントピッカーアプリを導入する必要があるんです。<br>今まで、他にもフォントピッカーアプリを使用してきましたが、日本語対応していてリーズナブルな点からこのアプリを使用しています。</p><h2 id="h3b0221e612">らくらく日本語フォント設定｜リテリア Font Picker</h2><h3 id="h70589a8995">機能</h3><p>こちらのアプリの機能ですが、以下の画像がわかりやすいと思います。<br>ノーコードで日本語フォントやGoogleフォントを使用することができます。ノーコード最強！<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/2487b1edc6684b159736f1609dd9077a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2016.04.13.png" alt=""></p><h3 id="h4d849f4362">使い方</h3><p>使い方もとてもカンタンです。<br>以下のように、ストアカスタマイズ画面から好きなフォントを選択するだけです<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/4da791472a904fb4963dbf376ba95819/image.png" alt=""><br>また、プロ向けの仕様としてGoogleフォントのようなカスタムウェブフォントも追加できます。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/dbeaadcff93147d7a295598145ff8c57/image.png" alt=""><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/3c8146c54547422fb437d0675579144c/image.png" alt=""><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/c3ace71f78114d7eb2d9047dea57262d/image.png" alt=""><br></p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br>今回紹介した神アプリに興味のある方は<a href="https://apps.shopify.com/font-picker-1?locale=ja&amp;from=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>からどうぞ。<br>お疲れ様でした。<br></p><h2 id="he45680f0bc">参考記事</h2><p>▼ Shopifyのフォントを簡単に変更する方法を調査 - zennスクラップ<br><a href="https://zenn.dev/kageyama/scraps/71f7df02a45428" target="_blank" rel="noopener noreferrer">https://zenn.dev/kageyama/scraps/71f7df02a45428</a><br>▼ 【Shopify マスターへの道】#9 サイトのフォントを編集しよう<br><a href="https://unreact.jp/blog/roadmap-customize-fonts" target="_blank" rel="noopener noreferrer">https://unreact.jp/blog/roadmap-customize-fonts</a><br>▼Shopifyで日本語フォントを使えるアプリ『リテリア Font Picker』について徹底解説<br><a href="https://www.re-terior.com/shopify-apps/reterior-font-picker/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reterior-font-picker/guide</a></p>

【Shopify 神アプリ紹介シリーズ】日本製フォントピッカーアプリを紹介していく

<h2 id="h8d027c8ed3">はじめに</h2><p>お久しぶりです、五条です。<br>本日は、日本製のYouTube埋め込みアプリをご紹介していきたいと思います。<br>Shopify のストア上にYouTubeの動画の埋め込みを検討されているマーチャントの皆様にはドストライクな記事だと思いますので、最後まで読んでいただけますと幸いです！</p><h2 id="hca69607712">YouTube動画埋め込みアプリとは</h2><h3 id="h1b30d7f76e">機能の説明</h3><p>Shopify のストアに動画を埋め込むことにより、ストアの見た目・雰囲気をおしゃれにしたり、ある程度の情報量を視覚的に伝えることができます。<br>ストアに動画を埋め込みたいというニーズはかなりあるわけです。<br>このニーズを満たしてくれるのが動画埋め込みアプリになります（特にYouTube動画を埋め込めるアプリのことをYouTube動画埋め込みアプリといいます）。</p><h3 id="h101d5733ba">デフォルトの機能でも実装できる？</h3><p>動画の埋め込み自体は、テーマのデフォルトの機能で実装することができます。<br>実装方法をご説明します。<br>① 『セクション追加』にて『動画』を選択します。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/31205fb0094b49f183599de03051c171/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2015.30.51.png" alt=""><br>② 好みのスタイルに変更します。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/9016e238ce484699a3184b162db511cf/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2015.31.12.png" alt=""><br>かなり簡単に実装できました。<br>ですが、デフォルトの機能を使用した実装ですと以下の実装ができません。</p><ul><li>YouTubeの自動再生</li><li>YouTube動画の表示数の調整（何カラムで表示するかという設定）</li></ul><p>自動再生は実装したいですよね。<br><br>上記の実装を可能にしてくれるのが『<a href="https://apps.shopify.com/youtube-video?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">どこでもYouTube動画埋め込みアプリ｜リテリア Video</a>』になります。</p><h2 id="h02d23fe3b5"><span style="color:#333333">どこでもYouTube動画埋め込み｜リテリア Video</span></h2><h3 id="h70589a8995">機能</h3><p>このアプリでできることは以下の通りです。</p><ul><li>ストアにYouTube動画を埋め込む（YouTube動画のURLを指定する）</li><li>動画の表示件数</li><li>動画間の余白</li><li>動画の縦横比を指定</li><li>YouTube動画の自動再生機能</li><li>YouTube動画の表示件数の設定（何カラム構成で表示するか設定できる）</li><li>上下左右の余白調整（細かい余白調整ができるのもデザインを気にされるマーチャントの方にはありがたいと思います。）</li></ul><p><br></p><h3 id="h4d849f4362">使い方</h3><p>実際に使用してみたので、使用方法についてご説明したいと思います。<br>アプリをインストールできたら、ストアのカスタマイズ画面に移動します。<br>① 『セクションを追加』より『YouTube動画ブロック』というセクションを選択します。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/a7d2421d575c424fa7653122366900f2/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2015.40.37.png" alt=""><br>② ストアにセクションを追加できたら、動画のURLやカラム数などといった各種設定を行います。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/2d074676567245ba94ad19fc49b47b16/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2015.42.28.png" alt=""><br>以上で設定完了です。<br></p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br>今回紹介したアプリに興味のある方は<a href="https://apps.shopify.com/youtube-video?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>からどうぞ。<br>お疲れ様でした。<br></p><h2 id="he45680f0bc">参考記事</h2><p>参考にした記事一覧です。<br>ご参考にしてください。</p><ul><li><a href="https://zenn.dev/kageyama/scraps/6ca88ab3221bcc" target="_blank" rel="noopener noreferrer">https://zenn.dev/kageyama/scraps/6ca88ab3221bcc</a> （zennのスクラップ）</li><li><a href="https://qiita.com/shitron/items/824502d990b0947baab9" target="_blank" rel="noopener noreferrer">https://qiita.com/shitron/items/824502d990b0947baab9</a> (Youtube動画埋め込みアプリの解説記事 - qiita)</li><li><a href="https://www.re-terior.com/shopify-apps/reterior-youtube/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reterior-youtube/guide</a> （株式会社リテリア公式解説記事）</li></ul>

【いい感じのShopifyアプリ見つけた日誌】YouTube動画をストアに埋め込めるアプリを見つけた

<h2 id="h8d027c8ed3">はじめに</h2><p>こんちゃっす、信条です。<br>本日から、新しいアプリ紹介シリーズを始めようかなと思います。<br>その名も『神アプリ紹介シリーズ』です。<br>この企画では、筆者が実際に使用していて涙が出るほど感動したアプリを紹介する企画になります。<br>どうぞ、お楽しみください。</p><h2 id="hd94813819c">本日の神アプリの紹介</h2><p>本日ご紹介する神アプリは、こちらです！！<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/21be566ff2754603bfbef2a7ecc4492b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2014.36.58.png" alt=""><br>『<a href="https://apps.shopify.com/margin-1?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">らくらく余白調整｜リテリア Margin</a>』とは、あるセクションとセクションの間の余白を調整するためのアプリになります。<br>このアプリを使用することで、ここの余白をもう少し開けたいみたいな悩みを解消できます。<br>テーマデフォルトのセクションって意外とセクション間の余白を調整できないことが多々あるんですよ。<br>そんな時にこのアプリを使用すると余白を自由自在に調整できます。<br>余白にもこだわりたいマーチャントの方には是非使用していただきたいアプリです！</p><h2 id="h9a6c7dabb6">らくらく余白調整 | リテリア Margin</h2><h3 id="h70589a8995">機能</h3><p>こちらのアプリの機能詳細についてご説明したいと思います。<br>このアプリを使用することにより、ストアカスタマイズ画面にて以下のセクションが使用可能になります。</p><ul><li>『余白調整（小）』：<span style="color:#333333">-50px ~ 50px の範囲で1pxごとの余白調整</span></li><li><span style="color:#333333">『余白調整（中）』：−400px ~ 400px の範囲で8pxごとの余白調整</span></li><li><span style="color:#333333">『余白調整（大）』：−800px ~ 800px の範囲で16pxごとの余白調整</span></li></ul><p><span style="color:#333333">私は、基本的には汎用的な『余白調整（小）』を使用して余白調整をします。</span><br><span style="color:#333333">がっつりスペースを空ける必要がある場合には、『余白調整（大）』を使用します。</span><br>かなり、細かい余白調整が必要な場合には『余白調整（小）』を使用します。<br>細かく使い分けができるのがありがたいですね。<br><br>また『余白調整（大or中or小）は、PC時とスマホ時の余白を設定できます。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/bfa4850db1ae4c31a4ba89c282989d59/image.png" alt=""></p><h3 id="h4d849f4362">使い方</h3><p>使い方について解説します。<br>以下の画像に示す部分にマージンを追加してみます。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/3df074c36aaa46c6b63269716bd349ee/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2014.48.19.png" alt=""><br>① 『セクションを追加』から『余白調整（大or中or小）セクションを追加します。<br>今回は、汎用的な『余白調整（中）』を使用してみましょう。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/23ca74107f7f45c080f585859506667a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2014.52.24.png" alt=""><br><span style="background-color:#ffffff">② 余白を入れたい位置にセクションを移動しましょう。</span><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/0cf572c12b8c4a04b39aa16fe478568f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2014.53.28.png" alt=""><br><br>③ 余白の大きさを設定します。<br>今回の例では、わかりやすくするため400pxに設定しました。<br>PC時とスマホ時どちらも適切な値に設定しましょう。<br><br>以上の設定が済んだら、以下のように余白が広がっていることを確認できると思います。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/973877461fcd45f7b4ef1fc1522109c1/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2014.55.14.png" alt=""></p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br>今後も神アプリシリーズを定期的に配信しようと思いますので興味のある方は是非ご覧ください。<br>今回紹介した神アプリに興味のある方は<a href="https://apps.shopify.com/margin-1?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>からどうぞ。<br>お疲れ様でした。<br></p><h2 id="he45680f0bc">参考記事</h2><p>▼ 【気まぐれShopifyアプリ調査】セクション間の余白を自由に調整できるアプリを見つけた - Qiita<br><a href="https://qiita.com/shinichi-gojo/items/ede27474732c7e367373" target="_blank" rel="noopener noreferrer">https://qiita.com/shinichi-gojo/items/ede27474732c7e367373</a><br>▼ 株式会社リテリア　リテリア Margin のLP<br><a href="https://www.re-terior.com/shopify-apps/reterior-margin/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reterior-margin/guide</a></p>

【Shopify 神アプリ紹介シリーズ】デザインにこだわりたい人必見のセクション間余白調整アプリを紹介していく

<h2 id="h8d027c8ed3">はじめに</h2><p>こんちゃ、信条です。<br>今日は、Shopifyストアにてクーポンコードを使用するフローをいい感じにできる方法をご紹介します。<br>最後まで読んでいただけると嬉しいです。<br>早速いってみましょう。<br></p><h2 id="hb665ae3972">クーポンコードとは何か？</h2><p>そもそも、Shopifyのクーポンコードという機能をご存知でしょうか？<br>ざっくりと説明しますと、Shopifyには特定の条件を満たした顧客が『クーポンコード』を使用することにより商品が割引される仕組みがあります。<br>この特定の条件というのは、Shopifyのストアのディスカウント管理画面のクーポン作成画面にて設定できます。<br>設定画面は以下の画像の通りです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/c1a53579bbab48a38cb72278fcabfb0c/image.png" alt=""><br>クーポン適用する顧客の条件は以下があります。</p><ul><li>管理画面から指定した顧客　＝　顧客一人ひとりを指定</li><li>顧客セグメント（購入していない顧客、メール購読している顧客）　＝　顧客のグループを指定</li><li>全ての顧客</li></ul><p>クーポンの適用範囲は以下の通りです。</p><ul><li>全ての商品</li><li>特定のコレクション</li><li>特定の商品</li></ul><p>クーポンの種類は以下があります。</p><ul><li>割引率（何％割引するかを決める）</li><li>定額（これだけ引きますという価格をあらかじめ決めておく）</li><li>無料配送（配送料を無料にしてくれる）</li><li>Xを購入するとYをゲット（何か特定の商品を購入したら、他の商品がついてくるよってやつ）</li></ul><p>クーポンの利用制限は以下の通りです。</p><ul><li>合計回数（何回使用したら、このクーポンは使えなくなるよってやつ）</li><li>お客様お一人一回前</li></ul><p>クーポンには有効期限も設定できるようです。<br><br>以上の内容を設定することによりクーポンコードを作成することができます。<br>クーポンコードを作成すると、チェックアウトページに自動的にクーポンコード（文字列）を入力するためのフィールドが出てくるようになります。<br>以下の画像がチェックアウトページのクーポンコード入力用フィールドになります。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/1eb05069a33845e1818a02a61ec1d72f/image.png" alt=""><br>顧客はクーポンコードをこちらのフィールドに入力して、クーポンを使用する形になります。<br>クーポンコードの配布方法には以下があります。</p><ul><li>メールで配布する</li><li>ストア上のどこかのページにクーポンコードを表示する</li></ul><p>後者の方法を使用する場合、クーポンコード（文字列）をストア上のどこかに表示することになるのですが、少しナンセンスな気がします。<br>顧客目線で考えると、文字列を選択・コピーしてチェックアウトページの入力欄にペーストするというフローはかなりめんどくさいしわかりにくいです。<br>やはり、視覚的にわかりやすくクーポンコピーできるような機能を提供したいものです。<br>そんな機能がないか調査をしてみたところ、『<a href="https://apps.shopify.com/1-coupon?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">クーポンコード１クリックコピー｜リテリア Coupon</a>』というアプリを発見しました。<br>(解説記事は<a href="https://www.re-terior.com/shopify-apps/reterior-coupon/guide" target="_blank" rel="noopener noreferrer">こちら</a>からどうぞ)</p><h2 id="hf40189571f"><span style="color:#333333">クーポンコード 1 クリック コピー｜リテリア Coupon</span></h2><p>このアプリを使用して、良かったと思うポイントは以下の通りです。</p><ul><li>顧客にとってわかりやすいUIを提供できる</li><li>マーチャントにとってもわかりやすい設定画面</li></ul><p><br>一つ目の良かったポイントについてご説明します。<br><br>以下の画像のような見た目のクーポンコピー機能を実装できます。<br>顧客からしたら、『これはクーポンだ』ってわかりやすいですよね。<br>このわかりやすいUIを提供できるという点はとてもポイントが高いです。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/2794feee32bc4ffcaccef55e98de9f49/image.png" alt=""><br><br>2つ目の良かったポイントについてご説明します。<br>以下の通り、マーチャント側では、画像クリック前に表示する画像と画像クリック後に表示する画像やクリック時にコピーされるクーポンコードなどを指定できます。<br>シンプルな設定画面なので、スラスラと設定できます。<br>嬉しいです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/7e687592db21416785b080b1f4959a41/image.png" alt=""></p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br>今回紹介したアプリに興味のある方は<a href="https://apps.shopify.com/1-coupon?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>からどうぞ。<br>お疲れ様でした。<br></p><h2 id="he45680f0bc">参考記事</h2><ul><li><a href="https://zenn.dev/kageyama/scraps/26cdca174771d3" target="_blank" rel="noopener noreferrer">https://zenn.dev/kageyama/scraps/26cdca174771d3</a></li><li><a href="unsafe:re-terior.com/shopify-apps/reterior-coupon/guide">re-terior.com/shopify-apps/reterior-coupon/guide</a></li></ul>

【いい感じのShopifyアプリ見つけた日誌】クーポンコードを使用するフローをいい感じにしたい

<h2 id="h8d027c8ed3">はじめに</h2><p>どうも、五条です。<br>本日は、Shopifyストアに商品レビュー機能を実装するための方法をご紹介します。<br>最後まで読んでいただけると幸いです。</p><h2 id="h63618e5e77">商品レビューとは</h2><p>そもそも、商品レビューって何かというところからお話ししたいと思います。<br>みなさんは、Amazon.comは使いますか？（使わない人は少ないと思いますが...）<br>Amazon.comで買い物をしようと思った時に、他の人の意見を聞きたいと思った時に他の購入者の意見を参考にしますよね。<br>こういった他の購入者による商品に対する意見のことを商品レビューと言います。<br>実は、Shopifyのストアにも商品レビュー機能は実装できるんです。<br>実装するためにはアプリを使用する必要がありますが、海外性のものばかりなので日本人の私からするとどうも使い勝手が少々悪い印象があります。<br>良さげなアプリがないか調査していましたところ、以下の記事を発見。<br>日本語対応した『<a style="background-color:#ffffff" href="https://apps.shopify.com/review-6?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">らくらく商品レビュー｜リテリア Review</a>』というアプリを紹介していました。<br><a href="https://zenn.dev/kageyama/scraps/66094dace162d4" target="_blank" rel="noopener noreferrer">https://zenn.dev/kageyama/scraps/66094dace162d4</a><br>以下のShopifyレビューアプリのランキング記事でも、<a style="background-color:#ffffff" href="https://apps.shopify.com/review-6?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">らくらく商品レビュー｜リテリア Review</a>が紹介されていました。<br><a href="https://qiita.com/shopify_master_yoshinori/items/ae9e583163efc28a73d2" target="_blank" rel="noopener noreferrer">https://qiita.com/shopify_master_yoshinori/items/ae9e583163efc28a73d2</a><br><br>以上のことから、日本のShopifyストアに導入するならこのアプリが最適解なんじゃないかなと思います。</p><h2 id="h1fef3a97be">らくらく商品レビュー | リテリア Review</h2><p>このアプリでできることは以下の通りです。</p><ul><li>レビュー書き込み機能</li><li>レビュー一覧機能</li><li>レビュー管理機能</li></ul><p>レビュー書き込み機能と、レビュー一覧機能については顧客側の機能になります。<br>レビュー管理機能がマーチャント側の機能になります。<br><br>もう少し詳細に説明していきたいと思います。<br></p><h3 id="h0434b0a458">レビュー書き込み機能</h3><p>レビュー書き込み機能は、顧客がオンラインストア側でレビューを書き込むための機能になります。<br>この機能では、レビュー内容を記入するためのモーダルとそのモーダルを開くためのボタンが提供されます。<br>以下の画像がUIをわかりやすく説明していると思います。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/1ddeae89323f4071b0f659b46b7ffcd0/image.png" alt=""><br>顧客はこのモーダルに、以下の内容を記入してレビューを送信するみたいです。<br>全ての項目を入力しないと送れないようになっているみたいです（一つでも記入漏れがあると送れなかったです...。ありがたい機能です。）。</p><ul><li>メールアドレス</li><li>名前</li><li>レビュータイトル</li><li>レビュー内容</li></ul><h3 id="h88c3342124">レビュー一覧機能</h3><p>レビュー一覧機能は、顧客が他の購入者が残していったレビューを見るための機能のようです。<br>これまでに商品購入者が残していったレビューの一覧をストア上に表示するためのセクションを提供してくれます。<br>まさにAmazon.comみたいな見た目のセクションなので、ストアがAmazonになったんじゃないかと思いますよ。<br>UIは以下の画像の通りです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/4106352fee1f4f8d8002a3e830e9596c/image.png" alt=""><br>初回は3件とか4件とか設定した初期値の分だけレビューが表示されますが、『もっとみる』を押すとその商品につけられたレビューが全て表示されます。<br></p><h3 id="h6e14e7d0c8">レビュー管理機能</h3><p>この機能はマーチャント側の機能ですね。<br>私も、一部の機能しか使っていませんが把握している限りですと『レビュー削除』と『レビュー返信』という機能があるようです。<br>レビュー削除機能では、レビューを選択して削除できます。ただ、一度削除しちゃうと復元できないみたいだから気をつけましょうね...。<br><br>レビュー返信機能は、レビューに対して返信する機能みたいです。<br>レビューに対して返信するとストア上では以下のように表示されるみたいです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/0e877307964b4627ba352123824ff429/image.png" alt=""><br></p><h3 id="h78cf759b2c">おすすめポイント</h3><p>私が日本のストアに商品レビューアプリを導入するなら『らくらく商品レビュー｜リテリア Review』だと考える理由を2つ紹介します。</p><ul><li>日本語に対応している（管理画面はもちろん、サポートも日本語で対応してくれる）</li><li>カスタマイズ性に優れる</li></ul><p>やはり、日本語に対応しているというのはかなりポイントが高いです。<br>正直海外性のアプリは、管理画面が複雑なところもあり機能を使い倒せている感覚があまりないのですが、このアプリはシンプルな機能を提供してくれているため全ての機能を満遍なく使い倒せているという実感があります。<br>また、ストア側の表示もかなりカスタマイズできるのでありがたいです。<br>以下のカスタマイズが可能です。</p><ul><li>ボタンの配色設定</li><li>レビュー書き込みモーダルを開くためのボタンの上に表示する文言の設定</li><li>レビュー一覧セクションの初期値（顧客が商品ページを訪れた際に最初に表示されているレビューの件数）</li><li>セクションの上下のマージン（正直これはあってくれて本当に助かっている）</li></ul><p>やはりカスタマイズ性は正義ですね。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>最後まで読んでいただきありがとうございます。<br>今回紹介したアプリに興味のある方は<a href="https://apps.shopify.com/review-6?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>からどうぞ。<br>お疲れ様でした。<br></p><h2 id="he45680f0bc">参考記事</h2><ul><li><a href="https://zenn.dev/kageyama/scraps/66094dace162d4" target="_blank" rel="noopener noreferrer">https://zenn.dev/kageyama/scraps/66094dace162d4</a></li><li><a href="https://qiita.com/shopify_master_yoshinori/items/ae9e583163efc28a73d2" target="_blank" rel="noopener noreferrer">https://qiita.com/shopify_m</a><a href="https://qiita.com/shopify_master_yoshinori/items/ae9e583163efc28a73d2" target="_blank" rel="noopener noreferrer"><em>master</em></a><a href="https://qiita.com/shopify_master_yoshinori/items/ae9e583163efc28a73d2" target="_blank" rel="noopener noreferrer">shinori/items/ae9e583163efc28a73d2</a></li><li><a href="https://www.re-terior.com/shopify-apps/reterior-review/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reterior-review/guide</a></li></ul>

【いい感じのShopifyアプリ見つけた日誌】日本語対応したレビューアプリを見つけたから共有したい

<h2 id="h8d027c8ed3">はじめに</h2><p>どうも。<br>本日は、Shopifyのテーマに高カスタマイズ性のスライドショーを簡単に導入する方法を紹介します。<br>最後まで読んでいただけると幸いです。</p><h2 id="h710e49cb9c">発売予告（Coming Soon）とは</h2><p>そもそも、発売予告ってなんだよって感じですよね。<br>発売予告とは、Shopify上の商品を購入はできない状態で発売前から公開しておく機能のことです。<br>発売予告することで、顧客は前もって発売予定の商品の情報に触れることができます。<br>商品情報に前もって触れられるようにすることで顧客の購買意欲を刺激することができ、結果売り上げ向上につながる可能性があります。<br>そんな発売予告の機能ですが、最近色々なストア上で見るようになりました。<br>人気沸騰中ですね。</p><h2 id="h342f467cf9">テーマデフォルトの課題</h2><p>発売予告機能は、テーマのデフォルトの機能を使用することで実装することが可能です（後ほど紹介しますが、問題点は多々あります...）。<br>一つ目の方法は、『売り切れ戦法』になります。<br>商品を売り切れ状態にすることで、商品は購入できなくなりますがストア上には公開された状態になります。<br>この特性を活かして発売予告を実装するのが売り切れ戦法になります。<br>ただ、問題点としてカート追加ボタンの文言や価格の横の文言が売り切れ時の表示になってしまいます。<br>顧客からしたら、ただの売り切れ商品やんって感じになります（発売予告だと考える人は少ないでしょう）。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/d2e775efa9e74aa481b03fdb301d07ad/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2015.09.19.png" alt=""><br><br>二つ目の方法が、『公開日設定戦法』になります。<br>商品の管理画面には、『公開日を設定する』という機能があることはご存知でしょうか？<br>こちらの機能を使用すると、商品を公開する日を指定できます。<br>この機能なら発売予告できそうってなるじゃないですか。<br>できないんですよね...。というのもこちらの設定をすると商品は公開日時になるまでストア上には表示されなくなります。<br>つまり、顧客は発売前の商品の情報に触れることができないのです。<br><br>上記の課題を解決して発売予告機能をストアに導入するアプリがないか調査してみたところ『商品ページ発売予告アプリ｜リテリア Coming Soon』というアプリを発見しました。<br>このアプリは、最近Shopifyスタッフの推しアプリらしくShopify app store のスポットライトというコーナーに掲載されています。<br>人気沸騰中らしいですね！<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/80c1b63dbdb940fd9d6fde406dca7e99/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2019.38.50.png" alt=""></p><h2 id="h79d5b20af6">商品ページ発売予告アプリ｜リテリア Coming Soon</h2><p>このアプリのすごいところは、商品を購入できない状態でストアに公開することができる（発売予告機能を実装できる）点だけでなく、ボタンの文言や残り時間の表示、公開日時の表示などのカスタマイズ性が非常に豊富な点にあります。<br>発売日時設定した際のストア側の表示は以下の通りです。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/8e56106dfdb04a07b8b0c1a6f3f7f38a/image.png" alt=""><br><br>主な機能は以下の通りです。<br>正直まだ使いこなせていない機能も何個かありまそうですが、設定操作自体はとても簡単でした。<br></p><ul><li>発売予定日時後のボタンのテキスト</li><li>発売予定日時後かつ在庫がない場合のボタンのテキスト</li><li>発売日時前のボタンのテキスト</li><li>ボタンテキストのサイズ設定</li><li>配色設定：ボタン背景色とボタンテキストの色</li><li>発売日時前のボタンに埋め込むURL（このURLにLINE公式アカウントの友達登録用リンクを埋め込んだりして集客に使用するみたいです）</li><li>発売日時の表示設定（以下に示した『画像_発売日時』の表示の設定が可能）</li><li>残り時間の表示設定（以下に示した『画像＿残り時間』の表示の設定が可能）</li></ul><p><br>（画像_発売日時）<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/7b4d22954f32415ab1bea604d7733bcf/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2019.52.26.png" alt=""><br>（画像_残り時間）：毎秒カウントダウンされるようです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/b34a889e73174cbd9541bfd035d52898/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2019.52.30.png" alt=""><br><br>最後に紹介した発売日時の表示と残り時間の表示については、色々なフォーマットがあるようですので、ストアによって柔軟に変更することができそうです１<br>多彩なカスタマイズができるのは嬉しいですね！<br><br>人気沸騰中の理由もわかる気がします。</p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br><a href="https://apps.shopify.com/shopify-application-314?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>より、アプリのストアに移動できます。<br>興味のある方は是非！</p><h2 id="he45680f0bc">参考記事</h2><p>▼ <strong>【Shopifyアプリ調査】Coming Soonアプリをストアに導入したら、案外よかった件 - zenn</strong><br><a href="https://zenn.dev/shopifyyoshi/articles/9f3aa6de5b40cd" target="_blank" rel="noopener noreferrer">https://zenn.dev/shopifyyoshi/articles/9f3aa6de5b40cd</a><br>▼Shopifyの商品詳細ページに発売予告機能を追加できるアプリ「リテリア Coming Soon」について解説<br><a href="https://www.re-terior.com/shopify-apps/reterior-coming-soon/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reterior-coming-soon/guide</a></p>

【いい感じのShopifyアプリ見つけた日誌】人気沸騰中の発売予告アプリを使ってみた

<h2 id="h8d027c8ed3">はじめに</h2><p>どうも。<br>本日は、ShopifyのテーマにLINE誘導ボタンを導入する方法を紹介します。<br>最後まで読んでいただけると幸いです。</p><h2 id="hd57582ef86">LINE誘導ボタンとは</h2><p>LINEに誘導するためのボタンのことを『LINE誘導ボタン』と言います。<br>よくECサイトなどで右下の方に見かけるやつです。<br>以下の画像がわかりやすいかもです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/12dc989247334569bcf193c190c8b872/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2014.15.52.png" alt=""><br><br>LINE誘導ボタンがあるだけでも、顧客のLINE誘導率はかなり変わって来ると思います。そのため、マーケティングにLINEの公式アカウントを使用したいマーチャントの方にはドストライクな機能になります。<br>ただ、LINE誘導ボタンはテーマにはデフォルトで備わっていません。<br>そのため、実装しようと思ったらLiquid,HTML,CSSの技術が必須になってきます。</p><h2 id="hc4b18b1e05">調査</h2><p>流石にコーディングとなるとハードルが少し高い気がします。<br>何かいいアプリがないか調査を進めていたところ、以下のスクラップを発見。<br><a href="https://zenn.dev/kageyama/scraps/1aa6c7d8871c8e" target="_blank" rel="noopener noreferrer">https://zenn.dev/kageyama/scraps/1aa6c7d8871c8e</a><br>どうやら、LINE誘導用のフローティングボタンを導入できる『LINE誘導ボタンらくらく設置｜リテリア LINE誘導』というアプリがあるようです。<br>以下に掲載した制作会社さんのLPも参考にしてみましたところ、機能やサポートについて細かくまとめられていました。<br><a href="https://www.re-terior.com/shopify-apps/reteriro-line-button/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reteriro-line-button/guide</a><br></p><h2 id="h7b0126b929">LINE誘導ボタンらくらく設置｜リテリア LINE誘導</h2><p>このアプリを導入すると、Shopifyストア上の全ページでLINE誘導ボタンが表示されます。しかも、カスタマイズ性も高いためストアのデザイン性を損ねることなくLINE誘導ボタンを導入することが可能でした。<br>カスタマイズ内容は以下の通りです。<br></p><ul><li>LINEアイコン画像の挿入</li><li>リンク（友だち追加ページに飛ばすためのリンク）の挿入</li><li>アイコン画像の位置（画面のどの辺りに表示するか）</li><li>アイコンサイズ</li><li>吹き出しのテキスト</li><li>吹き出しの背景色・テキストカラー</li><li>テキストサイズ</li><li>吹き出しパディング</li><li>アイコンと吹き出しの余白</li></ul><p><br>サイズ変更系はPCとモバイルの両方を設定できるようになっています。<br>そのため、『モバイル時にアイコンがちょっと大きく感じる...。』といったサイズに関する問題が発生しません。<br>ありがたいですね。<br><br>リテリア LINE誘導を使用して実装したLINE誘導ボタンは以下の通りです。<br>（デモストアより拝借）<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/132be824d86445c3b01ddad716cdf9f8/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2014.31.24.png" alt=""><br></p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br>興味のある方は、<a href="https://apps.shopify.com/reterior-line-icon-app?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>よりShopifyアプリストアページにアクセスできます。<br><br>そんじゃ、またね。</p>

【いい感じのShopifyアプリ見つけた日誌】LINE誘導ボタン編

<h2 id="h8d027c8ed3">はじめに</h2><p>どうも。<br>本日は、Shopifyのテーマに高カスタマイズ性のスライドショーを簡単に導入する方法を紹介します。<br>最後まで読んでいただけると幸いです。</p><h2 id="h7978d46dc0">テーマデフォルトスライドショーの課題</h2><p>Shopifyにてストア構築している際、デザインをいい感じにしようと思ったらスライドショーセクションは使いたいですよね。<br>ただ、テーマにデフォルトで備わっているスライドショーって意外とカスタマイズ性が限られてて、『思ったものと違う...。』ってなることもあります。<br>例えば、Dawnのスライドショーを見てみましょう。<br>自動スライドのアニメーションに注目してほしいです。<br>スライドショーが一周した際に左にスライド遷移します。（永遠に右側だけにスライド遷移するみたいな実装ができない）<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/84f295460c2d4eafb9c7c9dbafda7ddc/0c10757f3231a4d51489ae11380c3ff2.gif" alt=""><br><br>また、Impulseというテーマを例に挙げると、ユーザー<u>が</u>スライドを一度でもタップすると自動スライドが途切れてしまうという使用があるようです。<br><br>こんな感じで痒いところに手が届かないことがあります。</p><h2 id="hdc5a0d9d11">コーディングによる実装</h2><p>コーディングによる実装が可能かどうか調査してみたところ、以下の記事を見つけました。</p><ul><li><a href="https://zenn.dev/eijijii/scraps/35806bac66dc15" target="_blank" rel="noopener noreferrer">https://zenn.dev/eijijii/scraps/35806bac66dc15</a></li><li><a href="https://unreact.jp/blog/about-slideshow" target="_blank" rel="noopener noreferrer">https://unreact.jp/blog/about-slideshow</a></li></ul><p>上記の記事ではslick というスライドショー作成用のライブラリを使用する方法が紹介されていました。<br>その他にもswiper.jsというライブラリを使用することによりスライドショーを実装できることがわかりました。<br>ですが、コーディングによる実装となると技術的な壁があります。<br>できるだけ、Shopify既存に近い機能で実装したいですよね。<br>そんな場合には、Shopifyアプリを使用しましょう。</p><h2 id="h78dca961f9">スライドショー挿入アプリ｜リテリア スライドショー</h2><p>痒いところに手が届く、高カスタマイズ性のスライドショーを実装する方法がないか調査してみたところ、『<a href="https://apps.shopify.com/shopify-application-339?locale=ja?from=unblog" target="_blank" rel="noopener noreferrer">スライドショー挿入｜リテリア スライドショー</a>』というアプリを見つけました。<br><br>このアプリにより、挿入されるスライドショーはかなりカスタマイズ性が高いです。<br>以下のカスタマイズが可能です。<br></p><ul><li>画像（4枚まで挿入可能→４ページのスライドショーを作成）</li><li>画像に対応したURLの埋め込み</li><li>スライド遷移ボタンのスタイル変更（3種類のスタイルがある）</li><li>インジケーターのスタイル変更（3種類のスライドがある）</li><li>オートスライド（ループ再生が可能＝ずっと右にスライドし続ける実装が可能）</li><li>アニメーション設定（5種類のアニメーションがある）</li><li>配色設定</li></ul><h3 id="hcf83e1357e"><br></h3><h2 id="h3b85771699">スライドショー実装例</h2><p>『スライドショー挿入｜リテリア スライドショー』にて実装したスライドショーを以下に示します。<br><br>実装例１）<br>アプリのデモストアより拝借。<br>和の雰囲気にぴったりなスライドショーです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/de36300ea5414aa99da82c46ac4ef10d/a25c8eaba2bdda8d5167e395df829029.gif" alt=""><br><br>実装例２）<br>カジュアルな画像には、カジュアルなスライド遷移ボタンを使用するといい感じになります。<br>また、暗めの画像なので配色設定で白色を選択してコントラストをはっきりさせました。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/94bdbbcfe54945edbf6e58f12e3ee4b3/8ed2e087493d516ada82722021a39a02.gif" alt=""><br><br>実装例３）<br>清楚なイメージ。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/ddfd64d669334c76a08951ee691a476f/aeb12b09a5912f2f4db3070f5ca1efb9.gif" alt=""><br>かなり多彩な表現が可能なので、カスタマイズしていてとても楽しいです。<br></p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br><a href="https://apps.shopify.com/shopify-application-339?locale=ja" target="_blank" rel="noopener noreferrer">こちらのリンク</a>より、アプリストアに移動できます。<br>興味のある方は是非どうぞ。<br></p><h2 id="he45680f0bc">参考記事</h2><ul><li><a href="https://zenn.dev/eijijii/scraps/35806bac66dc15" target="_blank" rel="noopener noreferrer">https://zenn.dev/eijijii/scraps/35806bac66dc15</a></li><li><a href="https://unreact.jp/blog/about-slideshow" target="_blank" rel="noopener noreferrer">https://unreact.jp/blog/about-slideshow</a></li><li><a href="https://www.re-terior.com/shopify-apps/reterior-slideshow/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reterior-slideshow/guide</a></li></ul>

【いい感じのShopifyアプリ見つけた日誌】高カスタマイズ性 スライドショー編

<p>flutterとfirebaseに慣れるために以下の記事を参考にしてアプリの開発を行いました。<br><a href="https://rightcode.co.jp/blog/information-technology/flutter-firebase-bulletin-board-app-make" target="_blank" rel="noopener noreferrer">https://rightcode.co.jp/blog/information-technology/flutter-firebase-bulletin-board-app-make</a></p><h2 id="h26e220755e">firestoreにデータを送信</h2><p>参考にしていた記事の実装がラストとなります。<br>PostPageウィジェットのメソッド定義領域に以下のメソッドを追加してみます。<br>この関数は、TextFieldウィジェットにonSubmitイベントに仕込みます。<br>このウィジェットのonSubmitイベントは、文字列を入力してEnterを押すと発火するようです（デフォルトの挙動）。<br><br>①_onSubmit関数の定義</p><pre><code>// サブミットイベント時に発火する関数を解説
// 引数のcontentはTextFieldのデフォルトの挙動で渡ってくるっぽいな
_onSubmitted(String content){
// コレクションリファレンスを作成
&nbsp; &nbsp; CollectionReference posts = FirebaseFirestore.instance.collection('posts');
// リファレンスに対して、addを行う（ID自動採番）
// ドキュメントの"content"フィールドに引数で受け取ったcontentを入力する
&nbsp; &nbsp; posts.add({
&nbsp; &nbsp; &nbsp; "content": content
&nbsp; &nbsp; });
&nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; //　非同期処理を待たずにテキストフィールドをクリアする
&nbsp; &nbsp; _textEditingController.clear();
}</code></pre><p><br>②TextFieldウィジェットにonSubmitイベントに先程定義した関数を渡す</p><pre><code>child: TextField(
&nbsp; &nbsp; &nbsp; &nbsp;controller: _textEditingController,
&nbsp; &nbsp; &nbsp; &nbsp;onSubmitted: _onSubmitted, // この一文を追加します
&nbsp; &nbsp; &nbsp; &nbsp;enabled: true,</code></pre><p><br>ビルドを走らせてみましょう。<br>以下のように文字列を入力してみます。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/51a907df7ebb4671b516348cc4ba61b4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-02%2015.25.21.png" alt=""><br>入力が完了したらEnterを押します。<br><br><span style="background-color:#e795a0">※注意点</span><br>なぜかわかりませんが、firebase側への書き込みオペレーションを起動すると、flutterのビルドが一時停止されます。<br>なので、データが反映されているのか確認する際は、一度ビルドし直す必要があります。<br><br>ビルドを再度走らせると、トップページは以下のように表示されています。<br>データの書き込みがうまくいっていますね。（この画像を撮る前に、何回か書き込みを行なっていました...）<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/50bb82ec2e0a4cf285ae9bf58df18410/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-02%2015.25.29.png" alt=""><br><br>書いたコードは以下の通りです。</p><pre><code>import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';


// void main() {
//   runApp(const MyApp());
// }


// firebaseを導入した場合のmain関数
Future&lt;void&gt; main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase?.initializeApp();
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // 右上のdebugタグを外すためのやつ
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: const MyHomePage(title: '掲示板デモアプリ'),
    );
  }
}


class MyHomePage extends StatefulWidget {
  const MyHomePage({required this.title}) : super();


  final String title;


  @override
  State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();
}


// ここから書き換えてみました
// Stateを継承しているウィジェットが見た目の部分のビルドを行っています
class _MyHomePageState extends State&lt;MyHomePage&gt; {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            icon: Icon(Icons.edit),
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                return PostPage();
              }));
            },
          ),
        ],
      ),
      body: StreamBuilder&lt;QuerySnapshot&gt;(
      stream: FirebaseFirestore.instance.collection('posts').snapshots(),
      builder: (BuildContext context, AsyncSnapshot&lt;QuerySnapshot&gt; snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // 通信状況が悪いときにプログレスインジケーターの表示
          return Center(child: CircularProgressIndicator());
        }
        // 通信が正常にいっているのであれば
        return ListView(
          children: snapshot.data!.docs.map((DocumentSnapshot document) {
            final documentData = document.data()! as Map;
            print("---------------");
            print(documentData["content"]);
            print("---------------");
            return Card(
              child: ListTile(
                title: Text(document.exists? documentData['content'] : "データが存在していません" ),
                subtitle: const Text("サブタイトル"),
              ),
            );
          }).toList(),
        );
      },
    ),
    );
  }
}


// 投稿ページの実装
class PostPage extends StatefulWidget {


  @override
  _PostPagePageState createState() =&gt; _PostPagePageState();
}


class _PostPagePageState extends State&lt;PostPage&gt; {


  // 入力情報をハンドリングするためのコントローラを作成
  TextEditingController _textEditingController = TextEditingController();


  // データ送信用のプラベートメソッドを作成
  _onSubmitted(String content){
    CollectionReference posts = FirebaseFirestore.instance.collection('posts');
    // 自動採番でデータをfirestore側に作成する
    posts.add({
      "content": content
    });
    
    /// 入力欄をクリアにする
    _textEditingController.clear();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("投稿画面"),
      ),
      body: Center(
        child: TextField(
          controller: _textEditingController,
          onSubmitted: _onSubmitted, // データ送信
          enabled: true,
          maxLength: 50, // 入力数
          style: TextStyle(color: Colors.black),
          obscureText: false,
          maxLines:1 ,
          decoration: const InputDecoration(
            icon: Icon(Icons.speaker_notes),
            hintText: '投稿内容を記載します',
            labelText: '内容 * ',
          ),
        ),
      ),
    );
  }
}</code></pre><p><br>念のためにfirestoreの方も確認してみましょう。<br>ドキュメントが追加されていますね。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/f53c0c1612a24a809e9f05feeff5998d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-02%2015.30.53.png" alt=""><br><br>以上で投稿アプリの作成を終わります。<br></p><h2 id="h6517cb6336">締めの一言</h2><p>エラーへの対処大変！</p>

【Unスクラップ】flutterとfirebaseを用いてアプリを開発してみる3

<p>flutterとfirebaseに慣れるために以下の記事を参考にしてアプリの開発を行いました。<br><a href="https://rightcode.co.jp/blog/information-technology/flutter-firebase-bulletin-board-app-make" target="_blank" rel="noopener noreferrer">https://rightcode.co.jp/blog/information-technology/flutter-firebase-bulletin-board-app-make</a><br></p><h2 id="hc532db3e76">firebaseとの連携</h2><p>今回は、実際にfirestoreとflutterを連携していきますが、いくつかつまづいた点があったのでメモっておきます。<br>まず、cloud firestoreでデータベースを作成しました。<br>この辺は上の記事を見て適当にやりました。<br><br>firestore上に以下のようなドキュメントを作成。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/f0ba2d6adb7d44a9b319ad1a2bb176d0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-02%2015.36.42.png" alt=""><br><br>firebaseのコードを使用するために、pubspec.yaml（next.jsでいうところのpackage.json）に以下のコードを追記。</p><pre><code>dependencies:
  flutter:
    sdk: flutter



  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2


  # firestoreのプラグイン(---以下の2行を追記してください---)
  firebase_core: ^1.0.1
  cloud_firestore: ^2.5.4</code></pre><p><br>firebaseのデータベースと連携するためのコードを追加したmain関数を書きます。<br>一応、以下のコードの軽い解説をしてくれてる記事を載せときます。<br><a href="https://qiita.com/edasan/items/f32bc58a4afd0ca92432" target="_blank" rel="noopener noreferrer">https://qiita.com/edasan/items/f32bc58a4afd0ca92432</a><br></p><pre><code>// （変更前のコード）
// void main() {
//   runApp(const MyApp());
// }


// firebaseを導入した場合のmain関数（変更後のコード）
// 非同期関数になるので、戻り値の型もFuture型になる（待ってもあたいは返ってこないFuture型や）
Future&lt;void&gt; main() async {
// アプリの起動時にfirebaseと連携する（firebaseの機能をたくさん使う場合はこの記述がいいみたい）
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase?.initializeApp();
  runApp(MyApp());
}</code></pre><p><br>vscodeのデバッグモードを起動したら、以下のようなエラーが発生しました。</p><h3 id="hac7a0917c4">エラー①</h3><p>何が起きとるんや...</p><pre><code>Error running pod install Error launching application on iPhone 13.
Error output from CocoaPods:
↳
[!] Automatically assigning platform `iOS` with version `9.0` on target `Runner` because no platform was
specified. Please specify a platform for this target in your Podfile. See
`https://guides.cocoapods.org/syntax/podfile.html#platform`.</code></pre><p><br>調査を進めたところ、ios直下のPodfileに問題があるような感じ。<br>vimでPodfileの中身を確認したところ、以下のようになっていた。<br>Podfileを一回消して、もう一回作ったり、<code>platform: ios, '9.0</code><code> → platform: ios, '10.0</code>のように書き換えたりしたが動かん。。。<br> </p><pre><code># Uncomment this line to define a global platform for your project
# platform :ios, '12.0'


# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'

---省略---

post_install do |installer|
&nbsp; installer.pods_project.targets.each do |target|
&nbsp; &nbsp; flutter_additional_ios_build_settings(target)
&nbsp; end
end</code></pre><p><br>なんだかんだ試行錯誤をしているうちに以下の記事に遭遇<br><a href="https://zenn.dev/junki555/articles/8d0b962d2e6c1fa4d8ca" target="_blank" rel="noopener noreferrer">https://zenn.dev/junki555/articles/8d0b962d2e6c1fa4d8ca</a><br>ここで初歩的なミスに気づく。<br>なんと、<code>platform :ios, '12.0`</code>のところがデフォルトでコメントアウトされていた。<br>コメントアウトを外して、ビルドを走らせると上記のエラーは出ませんでした。<br>ですが、新しいエラーに遭遇！</p><h3 id="h224f3c0a46">エラー②</h3><p>google-services.plistとは、cloud firestoreとアプリを連携する際に生成されるファイルである。<br>参考記事通りに、ios/Runnerディレクトリに挿入したはずなのに、ないと言われている。</p><pre><code>Firebase has not been correctly initialized. Have you added the "google-services.plist" file to the project?</code></pre><p><br>おそらく、このファイルへのパスが通っていないことが原因だと考えた。<br>色々調べたら以下の記事を見つけた。<br><a href="https://fukatsu.tech/file-treatment-xcode" target="_blank" rel="noopener noreferrer">https://fukatsu.tech/file-treatment-xcode</a><br><br>この記事を参考に、Xcodeを開いてgoogle-services.plistをドラッグ＆ドロップでRunnerディレクトリの後ろに追加。<br><code>Copy items if needed</code>と<code>Create groups</code>にチェックを入れて設定画面を閉じる。<br>ビルドを走らせたら、エラーが消えていました。</p><h2 id="h11976fa767">flutterで見た目を作成</h2><p>次に状態を持つ見た目の描画を担う_MyHomePageStateウィジェットのbodyのフィールドを以下のように書き換えます。</p><pre><code>body: StreamBuilder&lt;QuerySnapshot&gt;(
      stream: FirebaseFirestore.instance.collection("posts").snapshots(),
      builder: (BuildContext context, AsyncSnapshot&lt;QuerySnapshot&gt; snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        }
        return ListView(
          children: snapshot.data!.docs.map((DocumentSnapshot document) {
            final documentData = document.data() as Map;
            return Card(
              child: ListTile(
                title: Text(documentData["content"]),
                subtitle: const Text("サブタイトル"),
              ),
            );
          }).toList(),
        );
      },
    ),</code></pre><p><br>ちなみにmapメソッドを実行した後で、toList()メソッドを呼び出すのは、mapメソッドによって生成されるのはあくまでMap型の変数だからです。<br>Map型とはjsのオブジェクトのようなものであるため、リストに直さないとリストのメソッドが使えなかったり、今回のようにフィールドにリストを持つキーで受け取れないといった問題が生じます。<br><br>詳しくは以下の記事を参考にしてください。</p><ul><li>Mapについて知りたいかた→　<a href="https://flutternyumon.com/how-to-use-map/" target="_blank" rel="noopener noreferrer">https://flutternyumon.com/how-to-use-map/</a></li><li>Map.toListについて知りたいかた→　<a href="https://qiita.com/7_asupara/items/01c29c006556e89f5b17" target="_blank" rel="noopener noreferrer">https://qiita.com/7_asupara/items/01c29c006556e89f5b17</a></li></ul><p><br>bodyのトップウィジェットであるStreamBuilderについても説明します。<br>こちらのウィジェットは、streamキーを持っており、このstreamでデータを受け取るたびに再描画を行うようです。<br>ちなみに、streamとは日本語で「小川」という意味で、何らかのデータが流れてくるイメージで覚えて貰えば結構です。<br>今回の場合ですと、postsコレクションのスナップショットを受け取っています（非同期的に受け取っている）。</p><pre><code>FirebaseFirestore.instance.collection("posts").snapshots()</code></pre><p><br>このデータの方は以下のようになっていました。Stream型ですね。<br>実際に受け取るのはQuerySnapshotになります。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/1099d8aaf6454bfe9778c09f4724894c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-02%2013.56.23.png" alt=""><br><br>builderのフィールドのコードですが、参考にしていた記事とは少し違うコードになっています。<br>変えた部分は以下になります。</p><pre><code> final documentData = document.data() as Map;
 return Card(
    child: ListTile(
    title: Text(documentData["content"]),
...</code></pre><p><br>元々のコードは以下になります。</p><pre><code> return Card(
    child: ListTile(
    title: Text(document.data()['content']),</code></pre><p><br>参考にしていた記事のコードをそのまま書くとdocument.data()['content']のところで以下のエラーが出ます。</p><pre><code>The method '[]' can't be unconditionally invoked because the receiver can be 'null'.
Try making the call conditional (using '?.') or adding a null check to the target </code></pre><p><br>対策をググっていたら、以下の記事に辿り着きました。<br>この記事によると、Objectを一回Mapにキャストすることでアクセスできるようになるとのことだったので実践してみた。<br><a href="https://qiita.com/qst_exe/items/79a444bbb13df0ce6a6d" target="_blank" rel="noopener noreferrer">https://qiita.com/qst_exe/items/79a444bbb13df0ce6a6d</a><br><br>一応ここまでやったら、以下のような画面が出力されるはず。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/4e645455a4b24680a960c56c26654262/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-02%2012.56.00.png" alt=""><br>キリがいいので今回の記事はここまで</p>

【Unスクラップ】flutterとfirebaseを用いてアプリを開発してみる2

<h2 id="h326a05967c"> Recoilの管理下にうつす</h2><p>recoilの使い方<br>_app.tsxのコンポーネントの記述を以下のように変更する</p><pre><code>&lt;RecoilRoot&gt;
  &lt;Component&gt;
&lt;/RecoilRoot&gt;</code></pre><p><br>Atomsの作成<br>Atomsとは、stateをぶち込む箱のことだよ。<br>この箱に、「stateをください」とか「setterをください」っていうと指定したstateやsetterを切り出してくれます。<br>そんなAtomsの作成方法ですが、以下の点を覚えておきましょう。</p><ul><li>一意なキーが必要</li><li>default値（初期値）の設定が必要</li><li>これは任意ですが、atomに型をつけておいたほうが良いでしょう</li></ul><p>以下のように記述します。</p><pre><code>// atom/user.ts(ファイル名は任意でいいが、監修的にatomというフォルダを作成するみたいだね）
import { atom } from "recoil";

type User = {
  name: string;
  age: number;
  isMan: boolean;
}

// グローバルなstateとして使用したいのでエクスポートしておきましょう
export const userState = atom&lt;User&gt;({
  key: "user",　// 一位な値でなければならない
  default: null,// 初期値null　もし値が打ち込まれたらそれはUser型だよって感じ
})</code></pre><p><br>私には、atom()というコンストラクタに対して、箱の情報が入ったオブジェクトを渡しているように見えます。<br>以下の関数を使用することでAtomから必要な機能を切り出すことが可能です。</p><ul><li>useRecoilState(): StateとSetterを切り出す</li><li><u>u</u>seRecoilValue(): Stateを切りだす</li><li>useSetRecoilState()：Setterを切り出す</li></ul>

【Unスクラップ】解読日記Recoil編

<p>flutterとfirebaseに慣れるために以下の記事を参考にしてアプリの開発を行いました。<br><a href="https://rightcode.co.jp/blog/information-technology/flutter-firebase-bulletin-board-app-make" target="_blank" rel="noopener noreferrer">https://rightcode.co.jp/blog/information-technology/flutter-firebase-bulletin-board-app-make</a></p><h2 id="h0ef859a5d4">環境構築</h2><p>以下の記事と公式ドキュメントを参考に環境を構築する。</p><ul><li>Kboyさんが描いてる記事→ <a href="https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc" target="_blank" rel="noopener noreferrer">https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc</a></li><li>日本語版のflutter公式ドキュメント→ <a href="https://flutter.ctrnost.com/install/" target="_blank" rel="noopener noreferrer">https://flutter.ctrnost.com/install/</a></li></ul><p><br></p><h2 id="he0eb640aed">アプリケーション開発を始める</h2><p>vscodeにてStudioProjects直下のあなたのプロジェクトディレクトリを開きます。<br>libフォルダの中にmain.dartというファイルがあるので開いてみる。<br>基本的にアプリケーションのコードはこのファイルに書くと思う。<br>main.dartを以下のように書き換えてみる。<br></p><pre><code>import 'package:flutter/material.dart';


void main() {
  runApp(const MyApp());
}


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // 右上のdebugタグを外すためのやつ
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: const MyHomePage(title: '掲示板デモアプリ'),
    );
  }
}


class MyHomePage extends StatefulWidget {
  const MyHomePage({required this.title}) : super();


  final String title;


  @override
  State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();
}


// ここから書き換えてみました
// Stateを継承しているウィジェットが見た目の部分のビルドを行っています
class _MyHomePageState extends State&lt;MyHomePage&gt; {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            icon: Icon(Icons.edit),
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                return PostPage();
              }));
            },
          ),
        ],
      ),
      body: Center(
        child: Text(
          "ここにみんなの投稿が流れる"
        ),
      ),
    );
  }
}



class PostPage extends StatefulWidget {


  @override
  _PostPagePageState createState() =&gt; _PostPagePageState();
}


class _PostPagePageState extends State&lt;PostPage&gt; {


  TextEditingController _textEditingController = TextEditingController();


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("投稿画面"),
      ),
      body: Center(
        child: TextField(
          controller: _textEditingController,
          enabled: true,
          maxLength: 50, // 入力数
          maxLengthEnforced: false, // 入力上限になったときに、文字入力を抑制するか
          style: TextStyle(color: Colors.black),
          obscureText: false,
          maxLines:1 ,
          decoration: const InputDecoration(
            icon: Icon(Icons.speaker_notes),
            hintText: '投稿内容を記載します',
            labelText: '内容 * ',
          ),
        ),
      ),
    );
  }
}</code></pre><p><br>command+sで保存したら、以下のような画面がエミュレーター上に表示されます。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/85f72232da3245e795b10ee1cd40f9f1/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-31%2023.14.52.png" alt=""><br>いい感じやな<br></p><h2 id="h47a6a63ca5">cloud firebaseの構築で行き詰まった点</h2><p>先程、紹介した記事の通りにfirebaseの構築とcloud firestoreの設定をしていく。<br>この辺の設定で1箇所だけつまづいた点があったのでメモっておく。<br>それが、iosバンドルIDと呼ばれるものの存在である。<br>IOSバンドルIDとは、<span style="background-color:#e795a0">アプリケーションを識別するために使用される一意な値</span>のようです。<br>このIDをcloud firestore側に登録しておくことによって、あなたのflutterプロジェクトとcloud firestoreを紐づけることができます。<br>今回作成したflutterアプリのプロジェクトのもバンドルIDが存在していますので、確認してみましょう。<br>確認する方法を以下に示します。</p><ol><li>Xcodeを立ち上げる</li><li>StudioProjects/your_project/ios/Runner.xcodeprojを開く（StudioProjectsフォルダは、Android Studioにてプロジェクトを作成した時に生成されるフォルダ）</li><li>General をクリックする</li><li>Bundle Identifierを参照（ここにバンドルIDが載っています）</li></ol><p><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/aec04445de4c45d48ecf1b1c543968d7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-31%2023.29.12.png" alt=""><br><br>確認したバンドルIDをcloud firestoreに保存します。<br><br>今回の記事はここまでとします。</p>

【Unスクラップ】flutterとfirebaseを用いてアプリを開発してみる

<h2 id="h618a17702c">Firebase</h2><p>この記事はFirebaseの内容をまとめたノートです。<br>一応、本も参考にしてますが、俺の頭の中のfirebaseをアウトプットするだけの回なので見たい人は勝手にどうぞって感じ。<br><br>参考文献は以下になります。</p><ul><li>『実践Firestore』　福田雄貴 インプレスR＆D 2020/2/28 </li><li><a href="https://firebase.google.cn/docs/firestore/manage-data/delete-data?hl=ja" target="_blank" rel="noopener noreferrer">https://firebase.google.cn/docs/firestore/manage-data/delete-data?hl=ja</a></li></ul><h2 id="h12f555e0af">俺の中のFirebase</h2><p>おれのなかのFirebaseのイメージを以下にまとめたいと思います。<br>赤いところをこの記事では紹介しようと思います。（気が向けば、また記事を書きます。特にコマンドクエリ責任分離や複合インデックスについては概念を抑えておきたいので記事を書くと思います。）</p><ul><li>フロントからの直接アクセス</li><li><span style="color:#cf3e51">データの操作はCRUD</span></li><li><span style="color:#cf3e51">コレクション（コレクションはドキュメントを束ねるもの。ドキュメントが作成されてたら生まれる。ドキュメントがひとつも無くなったら消える）</span></li><li><span style="color:#cf3e51">ドキュメント（ドキュメントはデータが書かれているもの、JSON形式で書かれている）</span></li><li>サブコレクション（ドキュメントの中に存在するコレクションのこと）</li><li>コレクショングループ（同じIDを持つコレクションを同一のコレクションとしてみなす。再帰ワイルドカードの登場でセキュリティルールも書きやすい）</li><li>クエリ：データベースに対する問い合わせのこと（この条件に合うデータをちょうだいってやつ）</li><li>直接アクセスが危険なのでセキュリティールールを適用<ul><li>誰が（ユーザー認証）：Authentication</li><li>どんなデータを操作するのか<ul><li>スキーマ検証（Firebaseはスキーマレスな構造ではあるが、同じコレクション内のドキュメントの構造が全く違っていたら管理しにくい）</li><li>データのバリデーション（バリューの文字数、正規表現による禁句の指定、年齢 etc ...)</li></ul></li></ul></li><li>リソースドリブン（操作するデータが主体となっている）</li><li>豊富なクラウドファンクション（バックグランド関数や呼び出し可能な関数）</li><li>アトミックオペレーション<ul><li>トランザクション（冪等な処理をadminを用いて行う、admin処理なのでセキュリティルールはないけど強い整合性を生み出すことが可能）</li><li>バッチ処理（一括書き込みの話、ルールがちょっと特殊）</li><li>フィールドバリュー（軽い数値計算くらいならこれで十分）</li></ul></li><li>カスタムクレーム（authenticationにデータを組み込める領域が存在する</li><li>コマンドクエリ責任分離（firestoreの読み取りと更新の操作を分離するやつ）</li><li>複合クエリ（クエリを発行する際に、複雑なフィルターを作成すると必要なやつ）</li></ul><p><br>今回は、この辺を思い出すのが精一杯でした。<br>それでは、上記の内容について説明していきます。<br></p><h2 id="h7d978a56f5">データの操作</h2><p>データの操作は以下の4つがあります。</p><ul><li>create</li><li>update</li><li>delete</li><li>read</li></ul><p><br></p><h3 id="ha278f9d5a2">create</h3><p>データの作成は、ドキュメントIDを指定する場合と指定せずに自動採番してもらう方法があります。<br>ID指定してドキュメントを作成する方法</p><pre><code>import { doc , setDoc , TimeStamp } from "firebase/firestore";

const userReference = doc(db,"users", "Kohiki")
// データの書き込み＝通信を挟む＝非同期処理
await setDoc(userReference, {
  name: "Kohiki Junki",
  age: 18
});</code></pre><p><br>IDを指定せずに作るパターン</p><pre><code>import { colection. addDoc } from "firebase/firestore";

const userReference = addDoc(collection(db, "users"), {
  name: "annonymous",
  age: null
});</code></pre><p><br>簡単やな<br></p><h3 id="hf4867d209f">update</h3><p>データの更新になります。</p><pre><code>import { doc. updateDoc } form "firebase/firestore";

const userRef = doc(db, "users" , "Kohiki")
await updateDoc(userRef, {
  age: 19
});</code></pre><p><br>ちょいとサーバータイムスタンプも学習しておきますか。<br>firebaseでは、サーバータイムスタンプなるものを使用するケースもあります。これはセキュリティルールなどで必要になることもあります。</p><pre><code>import { updateDoc , serverTimestamp } from "firebase/firestore";

const docRef = doc(db  . "objects" , "id")
const updateTimestamp = await updateDoc(userRef , {
 serverTimestamp: serverTimestamp()
});</code></pre><p><br>これまでは、FieldValueを使用していましたが、serverTimestampという関数をインポートすればいい感じに処理してくれるみたいですね。<br></p><h3 id="h6ffa98d953">read</h3><p>データの取得は以下のようになるらしい（公式ドキュメントより）</p><pre><code>import { doc , getDoc } from "firebase/firestore";

const docSnap = await getDoc(doc(db, "users" , "Kohiki"));

if (!docSnap.exist())return;
console.log(docSnap.data.name);

// Kohiki Juki</code></pre><p><br>ゲットオプションは以下のようになります。</p><ul><li>デフォルトでは、サーバーからの読み込み</li><li>getDocFromCacheにより、キャッシュ優先読み取りが可能っぽい</li></ul><p><br>以下にキャッシュ優先読み取りの例を示す</p><pre><code>imort { doc , getDoc , getDocFromCache } from "firebase/firestore";

const docRef = doc(db, "user" , "Kohiki");

// try chatch構文で書くみたいです
try{
  const userDoc = await getDocFromCache(docRef);
  if (!userDoc.exist()){
    const userDoc = await getDoc(docRef);
  }
}catch((error)=&gt;{
  console.log("this is error");
})</code></pre><p><br>みたいな感じかな。違うかも（自分の思考実験を書いただけです）<br><br>ちなみに、とってきたドキュメントスナップショットには以下のフラグも含まれています。</p><ul><li>fromCache：キャッシュされたデータを持つ場合は、trueとなります。</li><li>hasPendingWrite : スナップショットの中にバックエンドに書き込まれていないデータが含まれるのかどうかを示すフラグ（リスナーは、バックエンドへの書き込みが完了した時点でhasPendingWeite=falseを持つスナップショットを受け取ります。）</li></ul><p>キャッシュから読み込んだデータは無視するようなコードを書いてみましょう。キャッシュからのコードを無視することで、オフライン対応に弱くなりますが、強い整合性を担保することが可能になります。</p><pre><code>import { doc , getDoc } from "firebase/firestore";

const docSnapshot = await getDoc(doc(db, "users" , "Kohiki");
// 早期リターン
if (docSnapshot.metadata.fromCache)return;

console.log(`I'm ${docSnapshot.data().age} years old !");</code></pre><h3 id="hb22c116794">delete</h3><p>最後にドキュメントの削除について書いてこの記事は終わります。</p><pre><code>import { doc , deleteDoc } from "firebase/firestore";

// 匿名アカウントの情報を削除します
await deleteDoc(doc(db, "users" , "annonymous");</code></pre><p><br>以上や</p>

Firebaseの勉強

<h2 id="h5bfca15749">メイクマネー</h2><p>株式のことを深掘りしていくノートです。</p><h2 id="h335a87b5ef">参考サイト</h2><p><a href="https://news.mynavi.jp/kabu/it-determines-how-the-stock-price/" target="_blank" rel="noopener noreferrer">株価の決まり方と特別気配！売買方式を知らずに株は買えない | 俺たち株の初心者！</a></p><h2 id="hd0eb600424">用語</h2><ul><li>約定：今回の場合、株式の売買取引が成立することを約定と言います。</li></ul><h2 id="h0d6720784b">株式の値段の決まり方</h2><p>株式の値段が決まり方におけるポイントは、「早い者勝ち」らしい。<br>同じ値段の注文については、先に出された注文が優先されるようです。これは、買い手と売り手の両方に適用されます。<br></p><h2 id="h7905ecb8a9">注文の種類</h2><p>注文の仕方には以下があるようです。</p><ul><li>成り行き注文：値段とかどうでもいいからとりあえず注文</li><li>指し値注文：この値段になったら注文</li></ul><p><br></p><h2 id="h101e116a0a">注文の優先順位</h2><ul><li>売り：最も低い値段の注文が優先</li><li>買い：最も高い値段の注文が優先</li><li>指し値注文よりも成り行き注文が優先される</li></ul><p><br></p><h2 id="hcaf2b0431c">交差なき世界・成り行きが成り上がる世界（ザラバ寄せ方式）</h2><p>買い注文と売り注文が出るたびに取引が成立する方式のことをザラバよせ方式というそうです。<br>それでは実際に、株価が決定されるアルゴリズムを確認してみましょう。<br>以下のケースについて考えてみます。</p><ul><li>最も安い売り注文：501円</li><li>最も高額な買い注文：500円</li><li>成り行き注文あり</li></ul><p>この時に成り行き注文の価格は、最も安い株価で約定されます。<br></p><h2 id="h2d879e0061">交差を解消せよ（板寄せ方式）</h2><p>先程のザラバよせ方式は、売り注文と買い注文が交差していない場合でした。<br>ですが、今回は売り注文と買い注文が交差しているケースとを考えてみましょう。<br>このケースでは、以下のような法則が適用されるようです。</p><ul><li>成り行きの売買注文は全て約定します。(成り行きの話）</li><li>約定値段より高い買い注文と安い売り注文が全て約定されます。</li><li>その約定値段の売り注文または買い注文のいずれか一方が全て約定される</li></ul><p>成り行き注文が全て約定されたら、値段の高い方から買い注文が、値段の低い方から売り注文が約定されていきます。<br>あとはこの処理を、交差が解消されるまでループし続けます。<br>交差が解消された位置の価格が株価となります。<br></p><h2 id="hf7e4162dfe">市場に潜む気配を察知せよ（特別気配）</h2><p>市場には急激な変化を抑えるための力が働いています。<br>これは株価の値動きの上限と下限が決められているためです。<br>変化を抑える力がどのように働いているのかを、一番最初に考えていたケースを発展させて考えてみましょう。<br>今、540円の売り注文に2000株が入っているとします。<br>直近の約定は、500円で発生しており、買い注文が1000株残っているとします。<br>このとき、売りと買いには40円ほどのギャップがあります。<br>ここで成り行き注文が入ったらどうなるでしょうか？<br>ザラバ方式の基本に忠実に従えば、540円で約定されそうな気もします。<br>ですが、マーケットには急激な変化を抑えようとする力が働いています。今回の場合ですと直近の約定が500円であったことから、値動きの上限は510円（株価＋10円）となります。<br>そのため、成り行き注文は上限510円で待機することとなります。<br>この成り行き注文が約定されるタイミングは、新たに510円の売り注文が入った時です。<br></p><h2 id="h5cfaa1b481">1日スパンの値幅制限</h2><p>先程の特別気配というのは、数分のスパンの間の話ですが、1日スパンの値幅制限も存在します。<br>この制限のことをストップ高とストップ安と言います。<br>この価格は前日の終値と最終気配（翌日の取引の基準価格）によって決まるそうです。</p>

株式の勉強

<p>今回は色の基本的な知識を勉強していきたいと思います。<br>それではれっつらご！<br></p><h2 id="h7bf5c653b8">色の3属性</h2><p>色には「色相」、「明度」、「彩度」という3つの属性があります。<br>それぞれを簡単に説明します。<br></p><h3 id="hb6c9e73196">色相</h3><p>色相とは色の違いのことです。<br>それぞれが独立しているわけではなく、下の画像のようにお互いが繋がりあって輪を書くことができます。<br>これを「色相環」と呼びます。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/1ca339c905e74f2cbca04d0fce6b6dc2/%E8%89%B2%E7%9B%B8%E7%92%B0.jpeg" alt=""><br></p><h3 id="h960731743b">明度</h3><p>明度とは、色の明るさの度合いのことです。これが高くなるほど白に近づき、低くなるほど黒に近づきます。<br></p><h3 id="hbe2c3fae5f">彩度</h3><p>彩度とは、色の鮮やかさの度合いのことです。これが低くなると濁った色になり、高くなると澄んだ色になります。<br></p><h2 id="h482cf8ca3b">類似色、補色、反対色</h2><p>色の組み合わせ(配色)について簡単に説明します。<br></p><h3 id="h04be0b8aa0">類似色</h3><p>類似色とは色相環の隣り合った色同士のことを言います。<br>類似色を使うとまとまりやすく調和の取れた配色になります。<br></p><h3 id="h9283a49231">補色</h3><p>補色とは色相環の反対にある色の組み合わせのことを言います。<br>この2つを組み合わせるとインパクトのある配色になります。<br></p><h3 id="hf9b1b46929">反対色</h3><p>反対色とは補色色相の両隣の2色のことです。<br>補色よりも調和の取れた配色になります。<br></p><h2 id="h4a12175ce2">暖色、寒色、中声色</h2><p>赤、オレンジ、黄色などの暖かそうな色が「暖色」です。<br>青、水色など、涼しさや寒さを感じる色が「間色」です。<br>以上のどちらにも属さない黄緑、緑、紫、無彩色などが「中声色」です。<br><br>どの色を使うかでデザインの印象が大きく変わります。<br></p><h2 id="hb088f17c5a">進出色と後退色</h2><p>同じ面積でも、色が違うだけで近くに見えたり遠くに見えたりします。<br>近くに見える色が進出色で、主に暖色系です。<br>遠くに見える色が後退色で、主に寒色系です。<br><br>これを知っておけば色で奥行きをコントロールできます。<br></p><h2 id="h6740b27749">膨張色と収縮色</h2><p>色によって大きく見えたり、小さく見えたりします。<br>暖色や明度の高い色が「膨張色」です。(最も膨張して見えるのは白)<br>寒色や明度の低い色が「収縮色」です。(最も収縮して見えるのは黒)<br><br>デザインを広く見せたいときは膨張色。<br>しまったデザインにしたければ収縮色。<br>といったように使い分けると良さそうです。<br><br>----<br><br>今日は色の基本的な知識についてまとめてみました！<br>最後までごらんいただきありがとうございました！</p>

配色について学ぶ

<p>この記事ではReactで環境構築をする際に使用するCreate React Appについてまとめていこうと思います。一番下に用語説明を載せているのでわからない用語が出てきた場合は参考にしてください。<br></p><h2 id="h650abe65cd">Create React Appが生まれた経緯</h2><p>ReactとはFacebook社が2013年にリリースしたJavaScriptのライブラリです。このReactなんですがリリースされてから数年間、開発者は自力で開発環境を構築しなければなりませんでした。なぜならFacebook社内では最初からReactを使う環境が整備されていたため、環境を構築するためのコマンドは必要なかったからです。しかし、そうこうするうちに開発者の間でこの状況が問題として広く認識されるようになりました。さすがにそこで態度を改めたFacebookがリリースしたのがCreate React Appというわけです。それではさっそくCreate React Appについてみていきましょう！<br></p><h2 id="h2957fcbe47">Create React Appでインストールされる３つのパッケージ</h2><p><code>create-react-app</code>コマンドを実行すると、指定したテンプレート（TypeScriptなど）を用いてアプリケーションのベースが生成されると同時に、以下の３つパッケージの最新バージョンがインストールされます。</p><ul><li>react</li><li>react-dom</li><li>react-scripts</li></ul><p>reactはReact本体のパッケージで、rect-domはDOMを抽象化してReactから操作できるようにするレンダラーのパッケージ、最後のreact-scriptsはCreate React Appを使ううえでとても重要な役割を果たすパッケージです。次の章ではこのreact-scriptsについて詳しく見ていきます。<br></p><h2 id="h2cffd18fcb">最強のパッケージreact-scripts！</h2><p>react-scriptsには50個以上のパッケージが格納されていますが、これらの50個以上のパッケージによって複雑な設定を自分で行うこともなく以下のことが可能になります。</p><ul><li>新しい仕様の JavaScript や、JSX、TypeScript のコードを ECMAScript5 などのような古いブラウザでも実効可能なJavaScriptにコンパイルする（Babel）</li><li>コンパイラと連携しつつ大量のJSや、CSS、画像などのファイルを一つのJSファイルにまとめ、それぞれの最適化を施す（webpack）</li><li>ファイルの変更を自動検知して再ビルド、リロードしてくれる開発用のHTTPサーバーでのアプリの稼働（webpack-dev-server）</li><li>オールインワンのテスティングフレームワークによるユニットテストの記述（Jest）</li><li>テスト記述の存在および、ファイルの差分を検知して自動で必要最小限のテストを走らせる</li><li>.env(.*)ファイルによる環境ごとに異なった環境変数の設定（dotenv）</li></ul><p>Create React Appはただプロジェクトを作ってくれるだけではなく、以上のように環境構築をする上で欠かせないことも行ってくれるのです。このことをぜひ覚えていってください！<br></p><h2 id="hca8ae1e81a">Create React Appの使い方</h2><p>最後にCreate React Appの使い方について説明していきます。まずは以下のコマンドを実行してください。</p><pre><code>$ npx create-react-app &lt;プロジェクト名&gt; --template typescript</code></pre><p>上記のnpxとはnpmパッケージで提供されているコマンドを実行するためのもので、該当のパッケージがローカル環境（自分のパソコン）にインストールされていればそれを、なければ最新版をダウンロードしてきてそれを実行してくれます。今回のようなプロジェクト作成のコマンドは頻繁に使うものではないうえに、毎回アップデートしながら使うより、インターネットを経由して最新版を直接実行した方が効率がいいというわけです。<br><br>次にコマンドにある<code>--template typescript</code>とは何かについて説明していきます。これは作成プロジェクトの下敷きにするテンプレートを指定するためのもので、今回はTypeScriptのためのテンプレートをこれで指定しています。また<code>--template ~</code>の部分は省略することができます。その場合はデフォルトでバニラJS（素のJavaScript）が適用されます。<br><br>上記のコマンドを実行し終えましたら、以下のコマンドを実行してください。</p><pre><code>$ cd &lt;プロジェクト名&gt;
$ npm start</code></pre><p>ディレクトリを移動するのは<code>npx create-react-app &lt;プロジェクト名&gt;</code>のコマンドは現在のディレクトリ内でアプリケーションのディレクトリを作成するだけで作成して移動するわけではないからです。<code>npm start</code>はローカルサーバーを立ち上げアプリを稼働させるコマンドになります。デフォルトでは3000番のポートでHTTPサーバーが立ち上げられます。以上でReactの環境構築は完了となります。<br></p><h2 id="h9be0c3393d">おわりに</h2><p>最後まで読んでいただきありがとうございます。今回はReactの環境構築時に用いられるCreate React Appについてまとめていきましたが、改めてFacebookスゲーなと思いました笑<br>今後もReactに関する記事を復習がてらに書いていこうと思います！<br></p><h3 id="hb696e75b10">用語説明</h3><ul><li>DOM・・・<span style="color:#333333">Document Object Modelの略で、HTMLやXML文書を取り扱うためのAPI、またはHTMLやXMLのツリー構造自体のことを指します。ツリー構造を構成する各要素のことをノードと呼び、JavaScriptではノードの一つ一つに与えられた一意のIDを取得することでDOM操作を行うことができます。</span></li><li><span style="color:#333333">コンパイル・・・プログラミング言語で書かれたコードを解析し、コンピュータが直接実行可能な形式のプログラムに変換することで、そのためのソフトウェアをコンパイラといいます。また、よく混同されるトランスパイルとはあるプログラミング言語を別のプログラミング言語に変換することを言います。</span></li><li><span style="color:#333333">フレームワーク・・・アプリケーションなどを開発するためのテンプレートのようなもので、一部にコードを当てはめて使用します。似たものとしてライブラリがあげられますが、ライブラリとは開発の際によく使われるコードの集まりを意味します。フレームワークには一定のルールが存在するため自由度が制限されます。そのため主導権はフレームワーク側にあるといえます。一方でライブラリはルールが存在しないため自由度が高く開発の柔軟性が向上されます。つまりプログラマーが主導権を持っているといえます。例としては、ReactはJavaScriptのライブラリで、Next.jsはReactのフレームワークです。</span></li><li><span style="color:#333333">環境変数・・・OSが提供する変数のこと。普通の変数と同様に</span><strong style="color:#333333">変数名</strong><span style="color:#333333">と</span><strong style="color:#333333">値</strong><span style="color:#333333">というペアで存在し、</span><strong style="color:#333333">変数名</strong><span style="color:#333333">で参照すると</span><strong style="color:#333333">値</strong><span style="color:#333333">が引けます。環境変数には様々なものがありますが、PATHはそのうちの一つです。</span></li></ul>

Create React Appは何をしてくれているの？

<p>昨日に引き続き「なるほどデザイン」という本をよんで、おもしろーって思った考え方をメモっていきます。<br></p><h2 id="h0ce14f2098">擬人化力</h2><blockquote>"あの人らしいね"　という言葉は、人間だけではなくデザインに対しても言えること。<span style="color:#d75969">いいデザインには人格みたいなものがあり、だからこそ心に残るのだと思います</span>。世の中のデザインを人に喩えまくるという「勝手に擬人化遊び」はとてもおすすめ。生き生きしたデザインをするヒントが見つかりますよ。</blockquote><h3 id="h8020e65199">「書体」を「声色」に例えてみる</h3><blockquote>おなじ「おはよう」という挨拶でも、満面の笑顔と弾んだ声で言われるのと、にこりともせず低い声で言われるのとでは、含まれるメッセージはまるで変わってくる。書体と文字の大きさを変えただけで、同じ言葉でもそれぞれ違う声色で聞こえてきます。</blockquote><h3 id="h7e8ef40378">「組み」を「話し方」に例えてみる</h3><blockquote>「字間と行間」は"話すスピード"。空ければのんびりゆっくり、詰めれば早口な印象になりやすい。「行の長さ」は"話すリズム"。長いと重厚感ある落ち着いた感じ。短いと視線の折り返しが多くなるため、軽快&amp;テキパキした印象に。</blockquote><h3 id="h1244d11952">「配置」を「人々」に例えてみる</h3><blockquote>真っ白な紙の上に文字や写真を並べていくと、そこに「空間」や「奥行き」が生まれていきます。人が立つ姿からも人感が伝わるように、要素の置き方や並び方からキャラクターがわかる。同じ写真や文字であっても、配置によって受ける印象が変わります。</blockquote><h3 id="h48090ed0f7">「あしらい」を「女性」に例えてみる</h3><blockquote>人は見た目が9割と言いますが、初めて出会った女性でも、服装や持ち物、髪型やメイクで、その人のスタイルを感じ取れるもの。書体・色・ライン・アイコン・デクスチャなどを使って、服を選び化粧をするように、デザインもスタイリングしよう。</blockquote><h3 id="h4eb6c6043f">「色」を「年代」に例えてみる</h3><blockquote>淡い/明るい色からは若々しさを、渋い/暗い色には歳を重ねた風格を感じる。多少個人差はあっても、色には一定の共通イメージがあります。ここでの「年代」は「年齢」だけでなく、カルチャーから生まれた「その時代らしさ」でもあります。</blockquote><p><br></p><h2 id="h884d248534">連想力</h2><blockquote>デザインに必要なカタチ・書体・色・質感などのいろいろな要素は、デザイナーが自分で決めるよりも、伝えたい内容やテーマから、「自然に導かれていく」「勝手に決まっていく」のが理想。その方がより直感的で、内容に寄り添った、人に伝わりやすいデザインにすることができるからです。</blockquote><p><br><strong>1. 言葉の連想。</strong> <br>コンセプトから連想される言葉やモチーフ名をたくさん書き出してみる。<br><strong>2.イメージの連想。</strong> <br>写真を眺めたり、場所に行ったり、記憶を思い出したりして、イメージに浸る。<br><strong>3.ヒントを引き出す。</strong> <br>実際にデザインに取り入れられそうな色やテクスチャ、カタチなどを引き出す。<br></p><h2 id="ha940e7208d">翻訳機</h2><blockquote>コミュニケーションの方法には、大きく分けて2種類あると言われています。1つ目は、会話する・文章で伝えるなどの「言葉を使った」言語コミュニケーション。2つ目は顔の表情・視線・身振り・声のトーンなど、「言葉以外を使った」非言語コミュニケーションです。例えば、ある町の風景の美しさを伝えたい時。言葉を尽くして文章で語り下ろすのか、美しさがわかる写真1枚だけをポンと置いておくのか、同じ伝えたいことに対して、言語/非言語のどちらを選ぶかで大きく意味合いが変わってきます。それぞれ得意不得意があり、どちらか一方が優れているというわけではない。翻訳機を使いこなして、言語と非言語の行き来ができるようになりましょう。</blockquote><p><br><strong>1. 要素を並べてみる。</strong> <br>要素を全て並べてフカンしてみる。翻訳できそうなポイントを見つける。<br><strong>2.非言語に翻訳。</strong> <br>同じ内容でも表現を変えた方が良いところは非言語に翻訳をかける。<br><strong>3.バランスを調整。</strong> <br>言語と非言語の適切なバランスは、デザインの目次次第で調整していく。<br><br>---<br><br>いろんな使えそうな考え方が学べました〜！<br>最後までごらんいただきありがとうございました！</p>

デザインを作る時に使える考え方。(擬人化力, 連想力, 翻訳機)

<p>「なるほどデザイン」という本をよんで、おもしろーって思った考え方をメモっていきます。</p><h2 id="hac1fce1c81">ダイジ度天秤</h2><blockquote>デザインをすることは、時に「<span style="color:#d75969">伝えたい量</span>」と「<span style="color:#d75969">伝わる量</span>」との戦いになります。言いたいこと同士が喧嘩したり、多すぎたりすると、表現がどんどんぼやけてしまう。あれもこれもそれも、全部入れたい！と欲張った結果、要素が多くてごちゃごちゃになり、結局見る気を失わせてしますかもしれません。<strong>全てを伝えようとするデザインは、結局のところ、何も伝わらないデザインにしかなり得ない。</strong>「何がダイジなんだっけ？」を考えることを忘れずに、伝えたいことの取捨選択と強調をしましょう。</blockquote><h3 id="h38bb0ac1b6">1.伝えたいことを整理する</h3><p>天秤に乗り切らないくらいたくさんの「伝えたいこと」があったら、数を絞り込む。</p><h3 id="h6337ed9140">2.どっちがよりダイジ？</h3><p>両方同時に実現できないことは、天秤の左右に乗せてみて、優先順位をつける。</p><h3 id="hb4537850a8">3.ダイジな方を強調。</h3><p>よりダイジな方を強調するため、サイズや分量、強さや色を調整していく。</p><h2 id="h382713479b">スポットライト</h2><blockquote>ダイジな「主役」が他の脇役たちに埋もれてしまわないように、スポットライトを当てましょう。読み手の目線が迷わず重要な場所へ向かうように、デザインで舞台を整理整頓してあげる必要があります。その1の<span style="color:#d75969">「ダイジ度天秤」が意味の優先づけ</span>なら、こちらは<span style="color:#d75969">見た目の優先づけ</span>と言えます。<strong>デザインした本人が「主役」の要素がすぐにわかるとしても、それはすでに内容を理解しているからに過ぎません。予備知識のない人が初めて見た時、同じようにすぐ理解してもらえるとは限らない。</strong>そのチェックには、離れた場所からデザインを眺める方法が有効です。通常よりも大幅に離れた、文章が読めないくらいの距離からデザインを眺めてみて、それでもなお「主役」がちゃんと分かればOK。「机で見てたときは良さそうだったけど、離れてみたらわからなくなった」ならまだまだライトが弱い証拠。</blockquote><h3 id="heb9d6936b5">1.離れて見てみる。</h3><p>いつもの数倍離れた距離からデザインを見てみて、どう感じるかチェックする。</p><h3 id="hee98b5ed5a">2.ライトを当てる。</h3><p>主役にすぐ目が向かわなかったら、何らかの方法でライトを当てていく。</p><h4 id="hc10e1a7b2d">色のライト</h4><ul><li>色がないなら、足し算で目立たせる。</li><li>色がありすぎるなら、引き算で目立たせる。</li></ul><h4 id="hb9eea15017">地のライト</h4><ul><li>地を作ることで、図を弱める。</li><li>図を作ることで、地を弱める。</li></ul><blockquote>「地と図」という概念があります。図はカタチのあるもので、手前に出てきやすい。その背景に当たるのが地で、奥まって感じられやすい性質がありあます。この2つにはシーソーのような相関関係があり、図に意識が行くと地への認識は弱くなります。この性質を生かしたのが地のライト。たった一つ「地」があるだけで、他への意識が弱まり、主役がふっと浮かび上がります。</blockquote><h4 id="hb300dff13a">サイズのライト</h4><ul><li>画面に占める面積 ≒ 重要度。</li></ul><h4 id="hc0323bc931">余白のライト</h4><ul><li>大まかに眺めてもわかるくらいの余白の差を作る。</li></ul><h4 id="h7bceccda7e">揃えないライト</h4><ul><li>まっすぐにはナナメを。整列にはズレを。</li><li>秩序を作ってからあえて見出すという方法。</li></ul><h3 id="h578e0e66c6">3.もう一度離れて見てみる</h3><p>主役っぽくなったかな？と離れたところから確認してみる。<br><br>---<br></p><ul><li>重要度をしっかりと判断してそれに応じた表現を行う。</li><li>主役が何なのかをはっきりさせるためにいろんな方法を使って主役を目立たせる。</li></ul><p><br>デザインをする上での基本的な考え方をいい感じに学べました！<br>今後も引き続きデザインをする上で重要になってくる考え方について学んでいきたいと思います！<br>最後までごらんいただきありがとうございました!</p>

デザインを作る時に使える考え方。(ダイジ度天秤, スポットライト)

<p>This is memo.</p><h2 id="h335a87b5ef">参考サイト</h2><ul><li><a href="https://docs.microsoft.com/ja-jp/visualstudio/liveshare/use/vscode#start-and-stop-following-collaborators" target="_blank" rel="noopener noreferrer">Live Share コラボレーション セッションを使用した Visual Studio Code での共同編集 | Microsoft Docs</a></li><li><a href="https://qiita.com/taichi0514/items/95aca7428376a7b41f90" target="_blank" rel="noopener noreferrer">VSCode Live Shareすげぇ - Qiita</a></li><li><a href="https://qiita.com/oukayuka/items/fc5ea8878236a7fad50a" target="_blank" rel="noopener noreferrer">Visual Studio Live Share でリモートペアプロができるか試してみた - Qiita</a></li><li><a href="https://engineering.mercari.com/blog/entry/2018-06-27-100628/" target="_blank" rel="noopener noreferrer">Visual Studio Live Share を使ってペアプロをしています | メルカリエンジニアリング</a></li><li><a href="https://qiita.com/mh4gf/items/8f072b2faabba90937d3" target="_blank" rel="noopener noreferrer">Visual Studio Live Shareで始める快適なエンジニア間コミュニケーション - Qiita</a></li><li><a href="https://qiita.com/Shota_Fukuda/items/1358b8eb5e3e8354d1c7" target="_blank" rel="noopener noreferrer">Visual Studio Live Shareのススメ - Qiita</a></li></ul><p><br></p><h2 id="h884dc9f30a">Visual Studio Live Shareとは</h2><p>VSCodeの拡張機能のことです。<br>LiveShareでできることを以下に示してみました</p><ul><li>他ユーザーと共同でコード編集</li><li>他ユーザーと共同でコードのデバッグ作業</li><li>ターミナルインスタンスの共有</li><li>localhost上のウェブアプリケーションを転送</li><li>音声通話機能</li></ul><p>結構できること多いです。そして、何よりすごいのはこれらをリアルタイムにできることです。<br>Live Shareすげぇわ<br></p><h2 id="hf18955e964">Visual Studio Live Shareの使い方</h2><p>Live Shareのフローは以下のようになります。</p><ol><li>Visual Studio Live Share extensionをインストールする</li><li>MicrosoftもしくはGithubアカウントからログインする</li><li><code>Live Share</code>ボタンを押して、共有のプロジェクトディレクトリを選択</li><li>Copy again ボタンを押して、URLをコピーする</li><li>共同開発メンバーにURLを共有する</li><li>共同開発メンバーは、URL開くことで開発に加わることができます</li></ol><p><br>実際にペアプログラミングにおいては以下のような流れになるのではないでしょうか。</p><ol><li>ペアプログラミングのリーダーがプロジェクトを作成する</li><li>Live Shareを使ってURLを発行して、共同開発メンバーに共有</li><li>共同開発メンバーがURLから開発にjoinする</li><li>開発を進める</li></ol><p><br></p><h2 id="h479cee2196">Visual Studio Live Shareの導入</h2><p>実際にLive Shareを入れていきます。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/99fc56d237df4c82803d7fd1c59328e6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-26%2013.15.04.png" alt=""><br>以下のどちらかのアカウントでログインします。</p><ul><li>GitHubアカウント</li><li>Microsoftアカウント</li></ul><p>私はGitHubアカウントを使用しました。<br><br>プロジェクトを作成後、プロジェクトディレクトリをvscode上で開いきます。<br>vscodeの下部分に<code>Live Share</code>ボタンがあるのでそちらを押します。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/4d240885c81341728096b9750a3dfcde/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-26%2013.20.35.png" alt=""><br>Live Shareボタンを押すと、以下の表示がvscodeの左下に現れるので、<code>Copy again</code>を選択しましょう。<br>そうすることで、あなたのプロジェクトへの招待リンクがコピーされます。<br>リンクがコピーできたら、招待したい人に向けて招待リンクを送りましょう。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/b6d44c63696d40d99ca23b927a65e05d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-26%2013.25.06.png" alt=""><br><br></p><h2 id="hc5739c791a">Live Shareのコマンド（ホスト側）</h2><ul><li><span style="background-color:#d6e693">copy collaboration link</span>：招待リンクの再度コピーを行うコマンド</li><li><span style="background-color:#d6e693">share server</span>：ホストマシンで立ち上げているローカルサーバーのポーおを指定して、他の共同開発メンバーに共有するコマンド（ホストとゲスト間のサーバーの共有はSSHまたはSSLトンネルを介して行われる）</li></ul><p>例）ホストがlocalhost:3000で実行されているウェブサーバーをメンバーに共有した場合、メンバーは自身のPCのlocalhost:3000で同じウェブサーバーを共有することができる。<br>Reactの作者さんの記事によると、ホストによる<code>git push</code>がされなくても最新の状態をリアルタイムで見れることから、サーバーの共有機能はかなりDXが高いようです。</p><ul><li><span style="background-color:#d6e693">share terminal</span>：ターミナルを共有するコマンド</li><li><span style="background-color:#d6e693">start audio call</span>：通話を開始する</li><li><span style="background-color:#d6e693">stop collaboration session</span>：コラボレーションを停止するコマンド</li></ul><p><br>上記のコマンドの実行方法は至ってシンプル。<br>まず、<code>command</code>+<code>shift</code>+<code>p</code>を押します。<br>vscodeの上部にテキストフィールドが立ち上がるので、そこに<code>live share</code>と入力すると以下のような画面になります。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/d4d01ba86b72408a8c11e881de41f97d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-26%2015.19.54.png" alt=""><br></p><h2 id="h7699087bd5">共同開発者（メンバー）がやること</h2><h3 id="heeb56312b0">コラボレーションセッションへの参加</h3><p>参加方法には以下の二つがあります。</p><ol><li>ブラウザ経由での参加</li><li>手動で参加</li></ol><p>---</p><h3 id="h18e6e9213e">ブラウザ経由での参加</h3><p>前提として、vscodeにLive Shareをインストールして、サインインしておく必要があります。<br><br>ホストから招待リンクが届いたら、招待リンクをブラウザで開きます。<br>リンクを開くと、Live Shareの対応ツールを開くかどうかを尋ねる通知バーがブラウザの上部に表示されます。<br>ツールの開始を許可することでコラボレーションセッションが開始されます。<br>以上でペアプログラミングの環境に参加することができました。<br>---</p><h3 id="h88159f4d72">手動で参加する</h3><p>手動で参加する場合、参加コマンドを使用することによって参加することができます。<br>こちらも超簡単。<br>まず、vscodeの左側にあるメニューバーからlive shareのボタンをクリックします。<br>つぎに、<code>Join</code>というボタンをクリックします。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/93089922987d41a28313d1f6e1646ee7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-26%2015.42.32.png" alt=""><br>すると、vscodeの上部にテキストフィールドが現れるので、そちらに招待リンクを貼り付けて<code>Enter</code>をおもむろにクリックします。<br>これで、コラボレーションセッションに参加完了です。</p>

【メモ】Visual Studio Live Share

<p>今回は題の通り、非同期処理を制御してサイトのお問い合わせフォーム送信後の挙動を実装していきたいと思います。<br><br>実装を簡単に説明すると、microCMSに対してPOSTするapiをnext.jsのapiRoute機能を使って作って、それをフォーム送信時に叩いています。<br><br>現時点でのapiと、それをを叩く部分のコードはこのような感じです。<br><br>api部分(<code>pages/api/contact.ts</code> )</p><pre><code>import { NextApiResponse, NextApiRequest } from "next";

//contactの型定義
export type Contact = {
  text: string;
  email: string;
  number: string;
  body: string;
};

// /api/contactが叩かれた時に発火する関数
const contact = async (req: NextApiRequest, res: NextApiResponse): Promise&lt;void&gt; =&gt; {
  //POSTを行う際に使用するAPIキー
  const WRITE_API_KEY: string | undefined = process.env.WRITE_API_KEY;

  // APIキーがundefinedなら404ステータスコードを返却する。
  if (typeof WRITE_API_KEY === "undefined") {
    return res.status(404).end();
  }

  //フォームから送信されたデータをPOST
  await fetch(`https://[ここにはmicroCMSのドメインが入ります].microcms.io/api/v1/contact`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
      "X-WRITE-API-KEY": WRITE_API_KEY,
    },
    body: JSON.stringify(req.body),
  });
};

export default contact;</code></pre><p><br>apiを叩く部分(フォームのsubmitイベント時に走らせる)</p><pre><code>  //フォーム送信時に走る非同期関数
  const onSubmit = async (contact: Contact) =&gt; {//contactにフォームに入力された値がオブジェクト形式で入ってくる
    console.log(contact);

    // apiを叩く
    await fetch("/api/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
      //jsonデータを生成
      body: JSON.stringify(contact),
    });
  };</code></pre><p><br>現時点では、「送信ボタンを押すと問題なくmicroCMSにPOSTされるけど、POSTされた後の挙動がなにもないので本当にフォームが送信されているのかどうかがわかりづらい」みたいな感じです。<br><br>これから非同期処理の制御方法を学んでその辺をいい感じに実装していきたいと思います。<br><br>---<br></p><h2 id="hf031c5e696">実装方法</h2><p><br>いい感じに実装できたのでやり方まとめまーす<br><br>コードは以下のような感じになりました。<br></p><h3 id="h9c134bd945">api部分(<code>pages/api/contact.ts</code> )</h3><pre><code>import { NextApiResponse, NextApiRequest } from "next";

//contactの型定義
export type Contact = {
  text: string;
  email: string;
  number: string;
  category: string;
  body: string;
};

// /api/contactが叩かれた時に発火する関数
const contact = async (req: NextApiRequest, res: NextApiResponse) =&gt; {
  //POSTを行う際に使用するAPIキー
  const WRITE_API_KEY: string | undefined = process.env.WRITE_API_KEY;

  // APIキーがundefinedなら404ステータスコードを返却する。
  if (typeof WRITE_API_KEY === "undefined") {
    return res.status(404).end();
  }

  //フォームから送信されたデータをPOST
  await fetch(`https://masumi-ando.microcms.io/api/v1/contact`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
      "X-WRITE-API-KEY": WRITE_API_KEY,
    },
    //jsonデータを生成
    body: JSON.stringify(req.body),
  });
  res.end();
};

export default contact;</code></pre><p><br>お問い合わせフォームのsubmitイベント時に叩くapiですね。<br>async/awaitでfetchメソッドの完了を待って、正しく完了したら<code>res.end();</code>でPromiseを返しています。<br></p><h3 id="hdaad257e4c">apiを叩く部分(フォームのsubmitイベント時に走らせる)</h3><pre><code>  //フォーム送信時に走る非同期関数
  const onSubmit = async (contact: Contact) =&gt; {
    //送信ボタンにローディングアニメーションを表示して押せないようにする
    setIsLoading(true);
    //microCMSにPOSTするapiを叩く
    await fetch("/api/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
      //jsonデータを生成
      body: JSON.stringify(contact),
    })
      //成功時
      .then(() =&gt; {
        //フォームを非表示に
        setIsOpen(false);
        //送信成功のメッセージを表示
        setMessage(true);
      })
      //失敗時
      .catch(() =&gt; {
        setIsOpen(false);
        //送信失敗のメッセージを表示
        setMessage(false);
      });
  };</code></pre><p><br>お問い合わせフォームのsubmitイベント時に走る関数ですね。<br>awaitで叩いたapiがpromiseを返すのを待っています。<br><code>.then</code>と<code>.catch</code>で成功した場合と失敗した場合の挙動を実装しています。<br><br>---<br><br>今まではasync/awaitの使い所とかがあまりわからなくて難しいなーて感じだったんですけど、今回実際に非同期処理をいい感じに制御して機能を実装したことでいい感じに理解できたので良かったです。<br><br>最後までごらんいただきありがとうございました！</p>

非同期処理を制御してお問い合わせフォーム送信後の挙動をいい感じに作る。

<p>3Dアニメーションを実装したサイトをデプロイしてみて、iphoneで表示を確認してみるとchromeではz-indexが問題なくかかっていたところにz-indexがかかっていませんでした。<br><br>原因を色々調べてみた所、以下のような記事を見つけました。<br><br><a style="background-color:#ffffff" href="https://blog.webico.work/safari01" target="_blank" rel="noopener noreferrer">z-indexが効かない場合はtransformに気をつけよう！【Safari】</a><br><br>この記事によると、どうやらtransformで3dアニメーションを実装すると、safariではz-indexの値にバグが起きてしまうようです。<br><br>今回の記事では以下の三点をいい感じにまとめていきたいと思います。</p><ul><li>起きた事象</li><li>原因</li><li>解決策</li></ul><p><br>それではれっつらご！<br></p><h2 id="hd8035f47ef">起きた事象(z-indexが効かない)</h2><p><br>冒頭でも話した通り、chromeでは問題なくz-indexが効いていた部分がsafariでみると以下のようにz-indexが正しく効いていないという事象が起きました。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/35d782f2ca394d01a9bb82a3a9d78f6f/z-index%E3%81%8B%E3%82%99%E5%8A%B9%E3%81%84%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84.png" alt=""><br><br>前提として、この「送信する」というボタンですが、「hoverすると手前にくるっと回転する」という3Dアニメーションを実装しています。<br></p><h2 id="he3a697f298">原因(Safariのバグ)</h2><p><br>コードをいじりながらz-indexが効かない原因を調べてみたのですが、<code>transform: rotateX(0); </code> を削除した場合にのみz-indexが正常に効くようになることがわかりました。<br><br>ここで、transformがどうやら怪しそうだと思い調べてみた所、<br><br>「Safariでは3D要素や3Dアニメーションを行う際、元の2D(z-index)の表示順が失われてしまう」というバグがあることを知りました。<br><br>詳しく知りたい方は冒頭でリンクを貼ってある記事を見てみてください。<br></p><h2 id="hdd2272cfe5">解決策(transform: rotate3d()を指定する)</h2><p><br><code>transform: rotateX():</code> でX軸方向のrotateを指定していた所を、<code>transform: rotate3d(); </code>によってz軸方向の値も指定することによって解決することができるみたいです。<br></p><pre><code>z-index: 1;
transform: rotateX(0);
↓
z-index: 1;
transform: rotate3d(0, 0, 0, 0deg);</code></pre><p><br></p><h2 id="h7b56490cda">上記の方法でも解決しなかった</h2><p><br>自分の場合、以上の手順通りにやってもz-indexの値がSafariではうまくいきませんでした。<br>それから自分なりに色々実験してみたところ、3Dアニメーションを実装している要素の親要素に<code>overflow: hidden;</code>を設定すると表示が正しくなることがわかりました。<br><br>ただ理由はあんまわからないです。<br>Safari謎いです。<br>---<br><br>はい、ということで今回はSafariで3Dアニメーションを実装した時に起きるバグについてまとめてみました。<br>よくわからなかったですがとりあえず解決できて良かったです。<br>最後までごらんいただきありがとうございました！</p>

3Dアニメーション実装時にSafariでz-indexの値にバグが起きた。

<p>flutterのコンストラクタ種類多すぎるやろ...<br>そんなとき、めちゃくちゃわかりやすい記事に出会いました。<br>今回はその記事を参考に私の考えを整理していきたいと思います。<br></p><h2 id="h21cdc9f22b">Generative Constructors（生成的コンストラクタ）</h2><p>こちらは一般的なコンストラクタです。<br><code>new</code>演算子を使うことでコンストラクタを起動することができます。<br>実際にコードを見てみましょう！<br>以下のコードがクラスの実装のコードです。引数を指定しないタイプのコンストラクタを実装します。</p><pre><code>class Human {
  var name;
  Human(){
    this.name = "Anonymous";
  }
}</code></pre><p><br>クラスからインスタンスを作成してみましょう！</p><pre><code>// main関数の中でインスタンスを作成するコードを書いていく
main(){
  var human = new Human();
  print(human.name);
}</code></pre><p><br><strong>コンソール画面</strong></p><blockquote>Anonymous</blockquote><p><br>引数を指定するタイプのコンストラクタを持つクラスを作成してみましょう！</p><pre><code>void main() {
&nbsp; // Humanクラスのコンストラクタの実行(引数に"Junki"を渡す）
&nbsp; var human = new Human("Junki");
&nbsp; print(human.name);
}
class Human {
&nbsp; var name;
&nbsp; Human(name){
&nbsp; &nbsp; this.name = name;
&nbsp; }
}</code></pre><p><br><strong>コンソール画面</strong></p><blockquote>Junki</blockquote><p><br>以上が基本的なコンストラクタの実装になります。</p><h2 id="h836a434f84">Automatic field initialization（フィールドの自動初期化）</h2><p>先程説明した引数を受け取るタイプのコンストラクタについてですが、引数で受け取った値をわざわざ<code>this.name</code>に代入するようにコードを書く必要があります。これめんどくさいですよね...。<br>その問題を解決するのがAutomatic field initializationになります。<br><code>Constructor(this.fieldname)</code>のように書くことで自動的にメンバ変数のnameに引数のnameの値を渡してくれます。便利〜。<br><br>実際のコードをいかに示します</p><pre><code>void main() {
&nbsp; // Humanクラスのコンストラクタの実行
&nbsp; var human = new Human("Automatic man");
&nbsp; print(human.name);
}
class Human {
&nbsp; var name;
&nbsp; // Automatic field initializationコンストラクタの定義
&nbsp; Human(this.name);
}</code></pre><p><br><strong>コンソール画面</strong></p><blockquote>Automatic man</blockquote><p><br></p><h2 id="h50a9e353d5">Named Constructors(名前付きコンストラクタ）</h2><p>名前付きコンストラクタは、その名の通りコンストラクタに対して名前をつけることが可能です。<br><code>Constructors.name()</code>のように書くことで実装することができます。<br>イメージとしては、コンストラクタをオーバーロードする感じです。<br>実際にコードを見てみましょう。</p><pre><code>void main() {
&nbsp; // Humanクラスのコンストラクタの実行
&nbsp; var human = new Human();
&nbsp; var junki = new Human.name("Junki");
&nbsp; print(human.name);
&nbsp; print(junki.name);
}
class Human {
&nbsp; var name;
&nbsp; // 一般的なコンストラクタ
&nbsp; Human(){
&nbsp; &nbsp; this.name = "Anonymous";
&nbsp; }
&nbsp; // 名前付きコンストラクタ
&nbsp; Human.name(this.name);
}</code></pre><p><br><strong>コンソール画面</strong></p><blockquote>Anonymous<br>Junki</blockquote><p><br></p><h2 id="h0abad833db">Redirecting Constructors（リダイレクティングコンストラクタ）</h2><p>起動させるコンストラクタを指定することができる記述方法です。コンストラクタの後に<code>:</code>に続いて起動させたいコンストラクタを指定することができます。</p><pre><code>void main() {
&nbsp; // Humanクラスのコンストラクタの実行
&nbsp; var human = new Human();
&nbsp; var junki = new Human.name("Junki");
&nbsp; print(human.name);
&nbsp; print(junki.name);
}
class Human {
&nbsp; var name;
&nbsp; // リダイレクトする
&nbsp; Human():this.anonymous();
&nbsp; // 名前付きコンストラクタ（匿名版）
&nbsp; Human.anonymous(){
&nbsp; &nbsp; this.name = "Anonymous";
&nbsp; }
&nbsp; // 名前付きコンストラクタ
&nbsp; Human.name(this.name);
}</code></pre><p><br><strong>コンソール画面</strong></p><blockquote>Anonymous<br>Junki</blockquote><p><br>リダイレクト元のコンストラクタに処理を定義することが可能です（マージの挙動）。<br>この場合、リダイレクト先のコンストラクタが先に走って、その後リダイレクト元のコンストラクタが走るようです。<br>具体的なユースケースとして、クラス継承時に親クラスのコンストラクタをオーバーライドする際にリダイレクティングコンストラクタを使用すると思います。<br>実際にコードを見てみましょう。</p><pre><code>// main関数（ビルド時に走る関数）
void main(){
&nbsp; final junki = new Junki("junki",20);
&nbsp; print("My name is " + junki.name);
&nbsp; print(junki.age);
}

// 親クラスの定義
class Human {
&nbsp; // member variable
&nbsp; var name;
&nbsp; // constructor
&nbsp; Human(name) {
&nbsp; &nbsp; this.name = name;
&nbsp; }
}


// 継承クラスの定義
class Junki extends Human {
&nbsp; var name;
&nbsp; var age;
&nbsp; // 親クラスのコンストラクタをリダイレクト
&nbsp; Junki(name,age):super(name){
&nbsp; &nbsp; this.age = age;
&nbsp; }
}&nbsp;</code></pre><p><br><strong>コンソール画面</strong></p><blockquote>My name is junki<br>20</blockquote><p><br></p><h2 id="hd7cd4e5c72">Initializer Lists</h2><p>コンストラクタの後に<code>:</code>に続けてフィールドの初期化処理を記述していくようです。<br>これで書くぐらいなら、普通のコンストラクタで書いたほうがわかりやすいのではないかと思いました。<br><br>実際にコードを見てみまましょう。</p><pre><code>void main() {
&nbsp; final human1 = new Human.initializerList("name1",1);
&nbsp; print(human1.name);
&nbsp; print(human1.age);


&nbsp; print("---------------------------");
&nbsp; final human2 = new Human.normal("name2",2);
&nbsp; print(human2.name);
&nbsp; print(human2.age);
}


class Human {
&nbsp; // member variables
&nbsp; var name;
&nbsp; var age;
&nbsp;&nbsp;
&nbsp; // constructor(initializer lists)
&nbsp; Human.initializerList(name,age): this.name = name,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.age = age;
&nbsp;&nbsp;
&nbsp; // normal constructor
&nbsp; Human.normal(name,age) {
&nbsp; &nbsp; this.name = name;
&nbsp; &nbsp; this.age = age;
&nbsp; }
}</code></pre><p><br><strong>コンソール画面</strong></p><blockquote>name1<br>1<br>---------------------------<br>name2<br>2</blockquote><p><br>以下のように書くことでプロパティ初期化子のような機能を持たせることができます。</p><pre><code>void main() {
&nbsp; final human = new Human("banana");
&nbsp; print(human.name);
&nbsp; print(human.age);
&nbsp; print(human.food);
&nbsp;&nbsp;
}


class Human {
&nbsp; // member variables
&nbsp; var name;
&nbsp; var age;
&nbsp; var food;
&nbsp;&nbsp;
&nbsp; // constructor
&nbsp; Human(this.food) : this.name = "Anonymous",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.age = 0;
}</code></pre><p><br><strong>コンソール画面</strong></p><blockquote>Anonymous<br>0<br>banana	</blockquote><p><br></p><h2 id="h3bcda3e6b0">最後に</h2><p>おつです。<br>参考にした記事のリンクを以下に載せておきます。</p><blockquote>Dartのコンストラクタについて | DevelopersIO<br><a href="https://dev.classmethod.jp/articles/about_dart_constructors/" target="_blank" rel="noopener noreferrer">https://dev.classmethod.jp/articles/about_dart_constructors/</a></blockquote>

【flutter】コンストラクタについて説明回

<p><a href="https://ji23-dev.com/blogs/next-use-microcms-contact" target="_blank" rel="noopener noreferrer">【Next.js】 microCMSで問い合わせ機能を実装してみた</a><br><a href="https://blog.microcms.io/http_post_api" target="_blank" rel="noopener noreferrer">API経由でコンテンツを作成できるようになりました</a><br><br>今日はmicroCMSとreact-hook-formを使っていい感じのフォームを作成してみたいと思います。<br>↑↑の記事見ながら実装していきます。<br><br>それではれっつらご！<br></p><h2 id="h38c8766536">microCMSの設定</h2><h3 id="h2382863b26">コンテンツの追加</h3><p><br>まずはAPI名とエンドポイントを入力し、コンテンツ(API)を追加します。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/1db6a592f4e342d5a88c3fef666d07fa/microCMS_API%E8%A8%AD%E5%AE%9A.png" alt=""><br>続いて、POSTメソッドが使えるリスト形式を選択します。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/266caceec3964d7fb3238021dd1a967b/microCMS_API%E8%A8%AD%E5%AE%9A2.png" alt=""><br><br>必要なAPIスキーマを設定します。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/dc2e3306fec6455f96eeee7500f84818/%E3%82%B9%E3%82%AD%E3%83%BC%E3%83%9E.png" alt=""><br><br>なお、以下も忘れないように設定しましょう。<br></p><ul><li>POSTリクエストを有効にする（API設定 &gt; HTTPメソッド設定）</li><li>APIリファレンスからX-WRITE-API-KEYを作成して控えておく</li></ul><p><br></p><h2 id="h131d3691cd">Next.jsで問い合わせ機能を実装</h2><p><br>それではいよいよNext.jsで問い合わせを実装していきます。<br></p><h3 id="h2ce7c28a66">問い合わせ用の関数を作成</h3><p><br><span style="color:#24292e">Next.jsにはAPI Routesという機能があります。</span><br>これはNext.jsのプロジェクト内にapiを作成することができるという機能です。<br>pagesディレクトリ配下のapiディレクトリ内に作成することができ、ファイル構造はそのままエンドポイントになります。<br><br>例えば、pagesディレクトリ配下のapiディレクトリに<code>contact.ts</code>というファイルを作れば、/api/contactがそのままエンドポイントになるということです。<br><br>今回は<code>pages/api/contact.ts</code>に以下のように実装しました。</p><pre><code>import { NextApiResponse, NextApiRequest } from "next";

//contactの型定義
export type Contact = {
  text: string;
  email: string;
  number: string;
  body: string;
};

// /api/contactが叩かれた時に発火する関数
const contact = async (req: NextApiRequest, res: NextApiResponse): Promise&lt;void&gt; =&gt; {
  //POSTを行う際に使用するAPIキー
  const WRITE_API_KEY: string | undefined = process.env.WRITE_API_KEY;

  // APIキーがundefinedなら404ステータスコードを返却する。
  if (typeof WRITE_API_KEY === "undefined") {
    return res.status(404).end();
  }

  //フォームから送信されたデータをPOST
  await fetch(`https://[ここにはmicroCMSのドメインが入ります].microcms.io/api/v1/contact`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
      "X-WRITE-API-KEY": WRITE_API_KEY,
    },
    body: JSON.stringify(req.body),
  });
};

export default contact;</code></pre><p><br>そして次にフォームのonSubmitイベントで上のapiを呼び出す関数を実装しました。</p><pre><code>  //フォーム送信時に走る非同期関数
  const onSubmit = async (contact: Contact) =&gt; {//contactにフォームに入力された値がオブジェクト形式で入ってくる
    console.log(contact);

    // apiを叩く
    await fetch("/api/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
      //jsonデータを生成
      body: JSON.stringify(contact),
    });
  };</code></pre><p><br>フォーム自体の実装はreact-hook-formを用いて実装しました。<br>実装方法は前に記事を書いているので気になる方は見てみてください。<br><br><a href="https://unblog.unreact.jp/blog/a-9w6wgxj" target="_blank" rel="noopener noreferrer">React Hook Formでフォームを実装してみる。</a><br><br>バリデーションとかも簡単に実装できるので便利ですよ！<br><br>これでいい感じに問い合わせ機能を実装することができました。<br>microCMSマジで便利すぎでビビってます。<br>フォームの送信が完了した後の挙動がまだ実装できていないので、今後はその辺をいい感じに実装して行けたらなと思います。<br><br>最後までごらんいただきありがとうございました！</p>

Next.jsとmicro-cmsをapiで繋いでいい感じのフォームを作る。

<p>HTMLの要素を変形させる代表的なcssの指定方法をまとめたいと思います。<br>前回の記事で書いたkeyframesに要素の変形を組み合わせると、「パタッ」と要素が出現する、「くるっ」と要素が回転する、といったようなユニークな動きを実現することが可能になります。<br></p><h2 id="h056e0b85f6">transform: 〇〇;</h2><p>要素を2D, 3Dに変化させ、<strong>移動</strong>、<strong>回転</strong>、<strong>伸縮</strong>、<strong>傾斜</strong>の4つの変形を加えることができます。<br></p><h3 id="h807bd0e3fc">移動(translate)</h3><ul><li><code>translate(X軸方向の移動距離, Y軸方向の移動距離);</code></li><li><code>translateX(X軸方向の移動距離);</code></li><li><code>translateY(Y軸方向の移動距離);</code></li><li><code>translate(Z軸方向の移動距離);</code></li><li><code>translate3d(X軸方向の移動距離, Y軸方向の移動距離, Z軸方向の移動距離);</code></li></ul><p><br></p><pre><code>(例)
tarnsform: translate(50px, 50px);</code></pre><p><br></p><h3 id="h27566bf2d9">回転(rotate)</h3><ul><li><code>rotate(回転角度);</code></li><li><code>rotateX(X軸の回転角度);</code></li><li><code>rotateY(Y軸の回転角度);</code></li><li><code>rotateZ(Z軸の回転角度);</code></li><li><code>rotate 3d(X軸, Y軸, Z軸, 回転角度);</code></li></ul><h3 id="hcf83e1357e"><br></h3><pre><code>(例)
transform: rotate(40deg);</code></pre><p><br></p><h3 id="h3d06572d04">伸縮(scale)</h3><ul><li><code>scale(伸縮の数値);</code></li><li><code>scaleX(X軸の伸縮の数値);</code></li><li><code>scaleY(Y軸の伸縮の数値);</code></li><li><code>scaleZ(Z軸の伸縮の数値);</code></li><li><code>scaled3d(X軸の仲間の数値, Y軸の伸縮の数値, Z軸の伸縮の数値);</code></li></ul><p><br></p><pre><code>(例)
transform: scale(1.1);</code></pre><p><br></p><h3 id="hfb55217876">傾斜(skew)</h3><ul><li><code>skew(X軸の傾斜角度, Y軸の傾斜角度)</code></li><li><code>skew(X軸の傾斜角度)</code></li><li><code>skew(Y軸の傾斜角度)</code></li></ul><p><br></p><pre><code>(例)
transform: skew(50deg, 50deg);     ※　傾斜はZ軸なし、2Dのみ。</code></pre><p><br></p><h2 id="h4860c6de73">transform-origin: ( 〇〇 );</h2><p>要素の起点を指定します。<br><br>要素の中心の初期値は<br>2Dの場合 <code>50%, 50%</code><br>3Dの場合<code>50%, 50%, 0</code>です。<br></p><pre><code>(例)
transform-origin: (50px, 50px);
transform-origin: (center, center);
transform-origin: (left);</code></pre><p><br></p><h2 id="h543c50235e">perspective: ( 〇〇 );</h2><p>要素に対して遠近感を設定します。</p><ul><li><code>perspective: ( 値 );</code></li></ul><p><br>※ 指定した要素だけに効果を適応させたい場合は、transformの中に記述します。</p><ul><li><code>transform: perspective( 値 );</code></li></ul><p><br></p><pre><code>(例)
perspective: ( 50px );</code></pre><p><br></p><h2 id="h473aadf843">perspective-origin: ( 〇〇 );</h2><p>奥行きの起点となる位置を決めます。<br></p><ul><li><code>perspective-origin:(X軸の位置 Y軸の位置);</code></li></ul><p><br></p><pre><code>(例)
perspective-origin:(20px 40px);
perspective-origin:(50% 50%);
perspective-origin:(left center);</code></pre><p><br></p><h2 id="h67a5a44028">backface-visibility: 〇〇;</h2><p>三次元になった際に裏面を可視化するかどうかを指定します。<br></p><pre><code>(例)
backface-visibility: visible;  /可視化する/
backface-visibiliry: hidden;  /可視化しない/</code></pre><p><br>---<br><br>今回は要素を変形させるCSSについてまとめました。<br>今後は実際にアニメーションを実装していきたいと思います。<br>最後までごらんいただきありがとうございました！</p>

cssで要素を変形させる

<p>cssアニメーションの基本をまとめます。<br>目指せアニメーションマスター！<br></p><h1 id="hb50086b39e">cssアニメーションの基本</h1><p>cssアニメーションは基本的に、<code>animation-name</code> につけた名前に対し、<code>keyframes</code>で動きの変化を指定します。<br>アニメーションの繰り返しや、変化する時間の調整などの設定も追加できます。<br></p><h2 id="hf14f158e44">アニメーションの指定方法</h2><h3 id="hfe70886535">アニメーションの定義名(animation-name)</h3><p>アニメーションの定義名は半角英数字で自由に決めることが可能です。<br>例えば以下のように指定します。</p><pre><code>animation-name: fadeInAnime;</code></pre><p><br>animation-nameでつけた定義名に対し、keyframesでアニメーションの開始から終了までの変化を指定します。<br>例えば以下のように記述します。</p><pre><code>@keyframes fadeInAnime {
  from {
    /* ここに開始のcssを記述 */
  }
  to {
    /* ここに終了のcssを記述 */
  }
}</code></pre><p><br><code>from</code>と <code>to</code>ではなく<code>%</code>で指定しても大丈夫です。<br></p><h3 id="h49cc5b10fa">アニメーションの開始と終了時の状態を指定(animation-fill-mode)</h3><p><br></p><pre><code>animation-fill-mode: backwards;</code></pre><p><br></p><ul><li><code>none</code> → 指定なし、初期値</li><li><code>forwards</code> → 元の状態に戻らずアニメーション最後の状態を維持</li><li><code>backwards</code> → アニメーションの最初の状態に戻る</li><li><code>both</code> → backwards と forwards  の両方の状態を適用</li></ul><p><br></p><h3 id="h0b40a63eac">アニメーション1回分の時間の長さを指定(animation-duration)</h3><p><br></p><pre><code>animation-duration: 3s;</code></pre><p><br></p><ul><li>1.5秒なら → 1.5s (初期値は0)</li></ul><p><br></p><h3 id="h323ade6f18">動きをループさせる(animation-iteration-count)</h3><p><br></p><pre><code>animation-iteration-count: infinite;</code></pre><p><br></p><ul><li><code>infinite</code> → 無限に再生を繰り返す</li><li><code>数値</code> → 数値で再生回数を指定する(初期値は1)</li></ul><p><br></p><h3 id="hd76555ad8d">アニメーションの進行具合を操作(animation-timing-function)</h3><p><br></p><pre><code>animation-timing-function: ease;</code></pre><p><br></p><ul><li><code>ease</code> → 初期値：開始時と終了時が緩やかに変化</li><li><code>ease-in</code> → 開始時は緩やかに変化、終了に近づくと早く変化</li><li><code>ease-out</code> → 開始時は早く変化し、終了時は緩やかに変化</li><li><code>ease-in-out</code> → 開始時と終了時は、かなり緩やかに変化</li><li><code>linear</code>  → 開始から終了まで一定に変化</li><li><code>steps(数値, start または end)</code>  → パラパラ漫画のように数値をコマ数で変化</li><li><code>cubic-bezier(数値をカンマ区切りで4つ指定)</code>  → 変化の進行具合を3次ベジェ曲線で指定</li></ul><p><br></p><h3 id="ha15db7429b">アニメーションの開始を遅らせる(animation-delay)</h3><p><br></p><pre><code>animation-delay: 0.5s;</code></pre><p><br></p><ul><li>3秒なら → 3s (初期値は 0)</li></ul><p><br></p><h3 id="hc2289520e4">アニメーション再生の向きを順方向、逆方向、前後反転のいずれかにするかを決める(animation-direction)</h3><p><br></p><pre><code>animation-direction: normal;</code></pre><p><br></p><ul><li><code>normal</code> → 初期値：普通方向の再生で動きを繰り返す</li><li><code>reverse</code> → 逆方向の再生で絵動きを繰り返す</li><li><code>alternate</code> → 奇数回では普通方向、偶数回では逆方向の再生で動きを繰り返す</li><li><code>alternate-reverse</code> → 毎回逆方向の再生、奇数会では逆方向、偶数回では普通方向</li></ul><p><br></p><h3 id="h6d7c170457">省略記法</h3><p><br>こんな感じで書くこともできます。</p><pre><code>animtion: 定義名 変化時間 進行具合 ループ 何秒目から開始するか ループ　アニメーションの再生の向き;</code></pre><p><br>実際に書くとこんな感じになりますね。</p><pre><code>animation: bgchange 20s dase 0s infinite normal;</code></pre><p><br>2つ以上組み合わせるときは、カンマ指定で増やしていきます。</p><pre><code>animation: bgchange01 20s ease infinite, bgchange02 3s ease-in-out;</code></pre><p><br>---<br><br>今回はアニメーションの基本の中でも、アニメーションの指定方法についてまとめてみました。<br>次はtransformを使用した要素の変形についてまとめていきたいと思います！<br>最後までごらんいただきありがとうございました！</p>

cssアニメーションの基本を学ぶ

<p>useEffect内にstateを書き換えるsetIntervalを記述したところ想像と違う挙動になったのでメモ的な感じで記事書いていきたいと思います。<br><br>Next.jsで作成しているサイトの初回読み込み時に、0から100までのカウントアップを行いたい場面(ローディングアニメーション的なの)があったので、以下のようなstateを用意し、</p><pre><code>const [count, setCount] = useState(0);</code></pre><p><br>pagesディレクトリ配下の_app.tsx内のuseEffectに以下のようなコードを記述しました。</p><pre><code>  useEffect(() =&gt; {
    const loading = setInterval(() =&gt; {
      setCount((prevState) =&gt; prevState + 1);
      console.log(count);
      if (count &gt;= 100) {
        clearInterval(loading);
      }
    }, 1000);
  }, []);</code></pre><p><br>表示はjsx内で以下のようにしています。</p><pre><code>&lt;div&gt;{count}&lt;/div&gt;</code></pre><p><br>countが100になった時にclearIntervalを走らせてsetIntervalを止めたかったのですが、実際にはcountが100以上になってもclearIntervalが走らずに、無限ループが起こってしまう挙動になりました。<br><br>なぜそのようになるのかを調べたところ、以下のような記事を見つけました。<br><br><a href="https://front-end-diary.com/article/vadxij82/" target="_blank" rel="noopener noreferrer">useEffect内のsetIntervalでstateを更新できない問題</a><br><br>この記事には、「<strong>useEffect内の変数は実行時に切り出される為、内部で変数を変更しても、内部では反映されない</strong> 」と書いてありました。いまいちピンとこないですね。<br><br>実際に以下のようにuseEffect内にconsole.logを置いて</p><pre><code>  useEffect(() =&gt; {
    const loading = setInterval(() =&gt; {
      setCount((prevState) =&gt; prevState + 1);
      console.log(count);
      if (count &gt;= 100) {
        clearInterval(loading);
      }
    }, 23);
  }, []);</code></pre><p><br>コンソールを確認してみます</p><pre><code>&gt; 0
&gt; 0
&gt; 0
&gt; 0
&gt; 0
・
・
・</code></pre><p><br>タブを閉じない限り永遠に0が表示されてしまうという挙動になっています。<br>つまり「setIntervalが走っていない = <strong>setCount関数内部でのcountの更新がsetInterval関数内部には反映されていない</strong>」ということっぽいです。<br><br>これだと思い通りの挙動にはなりそうにないですね。<br><br>これをいい感じにするためには以下のように記述します。</p><pre><code>  useEffect(() =&gt; {
    //stateを書き換えるようの変数を用意
    let n = 0;
    //setInterval実行
    const loading = setInterval(() =&gt; {
      //実行されるごとに n+1 を行う
      n++;
      //更新されたnをもとにstateを更新する
      setCount(n);
      //nが100以上になったらsetIntervalを止める
      if (n &gt;= 100) {
        clearInterval(loading);
      }
    }, 23);
  }, []);</code></pre><p><br>変数の変更をsetCount内部で行うのではなく、setInterval内部で行うようにしています。<br>こうすることによって、変数の変更がsetInterval内部にも反映されるようになるので、いい感じになります。<br><br>---<br><br>これでいい感じにカウントアップしながらstateを書き換えるロジックを作ることができました！<br>最後までごらんいただきありがとうございました！</p>

useEffect内のsetIntervalでstateを更新できない

<p>VScodeで「構造は共通しているけど内容は微妙に違う」みたいなコードを変換するとき、一つ一つポチポチして直して行くのは面倒ですよね。<br>そんな時、「正規表現」を使うと便利だったので今回はそれをいい感じにまとめます。<br></p><h2 id="h31bb53b972">正規表現を用いた置換の具体例</h2><p>例えば以下のような記述を<br><code>- 何らかの文字列1 ([何らかの文字列2](何らかの文字列3))</code><br><br>以下のように変更したい時は、<br><code>- `何らかの文字列1` ([何らかの文字列2](何らかの文字列3))</code><br><br>VScodeのコード検索(command + F)で以下のように検索して</p><pre><code>- (.+) ($\[.+\]\(.+$\))</code></pre><p><br>置換の際は以下のように記述します。</p><pre><code>- `$1` $2</code></pre><p><br>こうすることで、<br><br>これが<br><code>- 何らかの文字列1 ([何らかの文字列2](何らかの文字列3))</code><br><br>こうなります。<br><code>- `何らかの文字列1` ([何らかの文字列2](何らかの文字列3))</code></p><h2 id="h82f8dcb836"><br>記述の意味</h2><p>詳しい記述方法についてみていきます。<br><br>コード検索の際に使用したこの正規表現について解説していきます。</p><pre><code>- (.+) ($\[.+\]\(.+$\))</code></pre><p><br>置換することを目的とするのではなく、ただただ正規表現を用いて以下のような文字列を検索したいだけの場合は<br><code>- 何らかの文字列1 ([何らかの文字列2](何らかの文字列3))</code><br><br>このように記述することで検索することができます。</p><pre><code>- .+ $\[.+\]\(.+$\)</code></pre><p><br></p><h3 id="h327946da10">「.+」の意味</h3><p><code>.+</code> の意味は「ここには何らかの文字列が入りますよ」です。<br></p><h3 id="he5cd981562">「\」の意味</h3><p><code>\</code> の意味は「この後の文字を特殊な意味を持たない普通の文字として扱いますよ」です。<br><br><code>()</code> や<code>[]</code>  は正規表現として特殊な意味を持つので今回はそれを普通の文字として扱うために<code>\</code> を使用しています。<br></p><h3 id="h39106cd776">正規表現を「()」で囲む</h3><p>今回は検索するだけではなく、「<code>何らかの文字列1</code>」を「<code>`何らかの文字列`</code> 」に置換したいので、正規表現自体を()で囲んで検索する手法を用います。<br> <br>これを行うことで置換の際に、<code>$1,$2...</code>  で正規表現によって検索した文字列を参照表示することができます。<br><br>実際に見た方が早いと思うのでまずは正規表現を()で囲んでみます。<br><br>これを</p><pre><code>- .+ $\[.+\]\(.+$\)</code></pre><p><br>こんな感じにします。</p><pre><code>- (.+) ($\[.+\]\(.+$\))</code></pre><p><br>コードを置換する際、()で囲んだ部分は左から順番に<code>$1,$2...</code>  のように表すことができます。<br><br>試しに以下のように置換してみます。</p><pre><code>- $1 $2</code></pre><p><br>すると出力としては以下のようになります。<br><code>- 何らかの文字列1 ([何らかの文字列2](何らかの文字列3))</code><br><br>つまり何も変化していないということです。<br><br>つまり以下のように記述すれば、</p><pre><code>- `$1` $2</code></pre><p><br>以下のように置換されます。<br><code>- `何らかの文字列1` ([何らかの文字列2](何らかの文字列3))</code><br><br>正規表現、便利ですね！自分もガンガン使いたいと思います！<br><br>他にもいろんな正規表現があるみたいなので興味ある方は是非！<br><a href="https://qiita.com/kgsi/items/a88662c6e43fa5311288" target="_blank" rel="noopener noreferrer">https://qiita.com/kgsi/items/a88662c6e43fa5311288</a></p>

VScodeで正規表現を使う

<p>最近デザインに興味が湧いてきたので、まずはどんなデザインがあるのかを知るために、<br><a href="https://www.youtube.com/watch?v=MNps5GMpQ7c" target="_blank" rel="noopener noreferrer">現役Webデザイナーが選ぶ、デザイン制作の参考になるWebサイトまとめ15選</a><br>↑の動画見て、いい感じのサイトがまとめられているサイトをこのブログにメモっていきたいと思います。<br><br>それではレッツラご！<br></p><h2 id="h67aacde470">日本語サイト系</h2><h3 id="ha97e3aba24">MUUUUU.ORG</h3><p><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/75b013cd00d645c7ad4b9ff343392596/muuuuu.org.jpeg" alt=""><br><a href="https://muuuuu.org/" target="_blank" rel="noopener noreferrer">http://muuuuu.org/</a><br>スタイリッシュ！<br></p><h3 id="hf7ffa171f7">SANKOU!</h3><p><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/b3deaca010ff408d9b2b4f21d298b54c/sankou.jpeg" alt=""><br><a href="https://sankoudesign.com/" target="_blank" rel="noopener noreferrer">https://sankoudesign.com/</a><br>このサイトは結構自分好みなのがまとめられてた。<br></p><h3 id="h81178d0e20">S5 Style</h3><p><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/048122efa6364e3b84fe8e52f38fed41/s5-style.jpeg" alt=""><br><a href="http://bm.s5-style.com/" target="_blank" rel="noopener noreferrer">http://bm.s5-style.com/</a><br>いい感じ<br></p><h2 id="h56797248f5">海外サイト系</h2><h3 id="hc183a4f6b9">FWA</h3><p><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/e4fb2b9bac714a699a4be886c855a206/fwa.jpeg" alt=""><br><a href="https://thefwa.com/" target="_blank" rel="noopener noreferrer">https://thefwa.com/</a><br>クール！<br></p><h3 id="h8e1a5b2ae9">awwwards</h3><p><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/10d0515a836b4cae82c12e23b2a239a9/awwwards.jpeg" alt=""><br><a href="https://www.awwwards.com/" target="_blank" rel="noopener noreferrer">https://www.awwwards.com/</a><br>カッケェ！<br></p><h2 id="h238005d785">SNS</h2><h3 id="hcee7deab87">dribbble</h3><p><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/9d4b2a8be5f545e68b84cc607d03612b/dribbble.jpeg" alt=""><br><a href="https://dribbble.com" target="_blank" rel="noopener noreferrer">https://dribbble.com</a><br>デザイナーの製作物が見れるSNS的なやつ。<br></p><h3 id="h6dfffe1e73">Behance</h3><p><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/a5475594dd4e427e994518da05cc489c/behance.jpeg" alt=""><br><a href="https://www.behance.net/" target="_blank" rel="noopener noreferrer">https://www.behance.net/</a><br>これも多分上と似たような感じ。<br></p><h2 id="ha739b3b8f6">その他</h2><h3 id="h62e72cf456">美術手帖</h3><p><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/25148a78a35c4173a20738860ad13093/%E7%BE%8E%E8%A1%93%E6%89%8B%E5%B8%96.jpeg" alt=""><br><a href="https://bijutsutecho.com/" target="_blank" rel="noopener noreferrer">https://bijutsutecho.com/</a><br>作家さんのインタービュー記事とか載ってるみたい。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>サイト参考にしたいときはこのブログみたいと思いまーす！<br>最後までごらんいただきありがとうございました！<br><br></p>

いい感じのサイトがまとめられているサイトまとめ。

<p>ハンバーガーメニューにCSSアニメーションを実装する際、なんだか動きがカクカクしていたので色々調べていると以下のような記事を見つけました。<br><br><a href="https://qiita.com/yuki153/items/9aac0e5c8d7230a7bbe2" target="_blank" rel="noopener noreferrer">CSSアニメーションについて深く知る</a><br><br>この記事を見ると、</p><blockquote>要素を縦横にアニメーションを伴って動かしたい場合、transitionを適用させた要素に対して、「top, right, bottom, left」などのプロパティよりも、「transform: translate(X, Y);」を使用した方が滑らかなアニメーションを実現できる</blockquote><p>みたいなことが書いてありました。<br><br>今回の記事ではその理由を簡単にまとめてみたいと思います。<br></p><h2 id="h7554344847">transform: translate(X, Y); による移動が優れている理由</h2><p>これは、「top, right, bottom, left」と「transform: translate(X, Y);」で要素の描画(レンダリング)方法が異なることに起因しています。<br></p><h3 id="hdafe09b380">CPUとは</h3><p><strong style="background-color:#ffffff">「top, right, bottom, left」での移動はCPUで処理されます。</strong><br><br>CPUとは、「Center Processing Unit」の略称で、「中央演算処理装置」と呼ばれます。<br><br>"中央"とあるように、パソコンの処理の中心を担う、いわば指揮官です。<br><br>キーボードやマウスといった周辺装置からのデータを受け取り、コンピュータに計算させたり、記憶したりします。<br></p><h3 id="he9c82ae693">GPUとは</h3><p><strong style="background-color:#ffffff">「transform: translate(X, Y);」での移動はGPUで処理されます。</strong><br><br>GPUとは、「Graphics Processing Unit」の略称で、「画像処理装置」と呼ばれます。<br><br>CPUの指令で画像処理を行います。<br><br>文字情報と違って画像は情報量が多く、膨大な計算が必要です。<br><br>なので、専用の処理装置GPUが登場します。<br></p><h2 id="ha214098e44">まとめ</h2><p>まとめると、グラフィック系の処理はCPUよりもGPU側が得意なため、画面描画がスムーズだということみたいです。<br><br>これから要素の移動にアニメーションをつけるときはtransform translateを使おうと思いました。<br><br>最後までごらんいただきありがとうございました！</p>