Shopifyで会員価格を実装できるアプリ8 選を徹底解説

Shopifyでポップアップバナーを実現できるアプリ8選を徹底解説！

Shopify で代引き手数料の自動計算を実現できるアプリ 8 選！

ShopifyでLINE誘導アイコンを実現するアプリ4選を徹底解説！

Shopifyで生年月日に応じた年齢確認アプリ8選を徹底解説！

Shopifyで年齢確認のチェックボックスを実現できるアプリ8選を徹底解説！

Shopify でYouTube動画埋め込みを実現できるアプリ8 選を徹底解説

Shopifyでカウントダウンタイマーを実現できるアプリ8選を徹底解説！

ShopifyでSNSアイコンを実装できるアプリ8選を徹底解説！

Shopifyで利用規約のチェックボックスを実現できるアプリ4選！

Shopifyで注文にタグを自動付与できるアプリ4選を徹底解説

Shopify でコレクションをCSV 形式で一括編集できるアプリ4選を徹底解説！

Shopifyで顧客タグを自動付与できるアプリ4選を徹底解説

Shopify アプリ「シンプル会員初回商品割引｜お手軽初回ログイン商品セール設定」について解説

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>

配色について学ぶ