こんにちは田村です。 カスタムフィールド検索でチェックボックスが空の場合に絞り込みたい場合がありました。 「カスタムフィールドの検索とは？」という方はこの辺りを参考にするとよさそうです。 <a style="color:#3085ee;background-color:#ffffff" href="https://developer.a-blogcms.jp/document/customfield/entry-1707.html" target="_blank" rel="noopener noreferrer">カスタムフィールドの検索</a> <a style="color:#3085ee;background-color:#ffffff" href="https://developer.a-blogcms.jp/document/customfield/custom_field_5.html" target="_blank" rel="noopener noreferrer">カスタムフィールドの値で検索する</a> <a style="color:#3085ee;background-color:#ffffff" href="https://developer.a-blogcms.jp/document/customfield/entry-1749.html" target="_blank" rel="noopener noreferrer">カスタムフィールドを検索に入らないようにする</a> ざっくりと「カスタムフィールドの検索とは？」 Field_Searchモジュール + URLコンテキストを利用して表示したい要素を変えると言う感じですね。 では、カスタムフィールドが空の場合どのように検索すると良いでしょうか。 早速見てみましょう。 <h3 id="h922edff87b">実装</h3>カスタムフィールドが空の場合次のように演算子を利用します。<pre><code>&lt;option value="em"{カスタムフィールド名@operator:selected#em}&gt;未チェック&lt;/option&gt;</code></pre> 具体的には<code>my_checkbox_field</code>というカスタムフィールドだった場合、次のコードになります。<pre><code>&lt;option value="em"{my_checkbox_field@operator:selected#em}&gt;未チェック&lt;/option&gt;</code></pre> URLコンテキストは次のようになります。 https://blog.masizime.com/search/field/my_checkbox_field/em/ このように演算子を利用することで「空の場合」を検索することが出来ます。 演算子はだいたいIFブロックと同じイメージでいいと思います。 また、公式ドキュメントとしては<a style="color:#3085ee;background-color:#ffffff" href="https://developer.a-blogcms.jp/document/customfield/entry-1707.html" target="_blank" rel="noopener noreferrer">カスタムフィールドの検索</a>の「演算子部分の記述」のあたりを見ると良さそうです。 全体的なコードとしては次に形でしょうか。<pre><code>&lt;!-- BEGIN_MODULE Field_Search --&gt;
	 &lt;div&gt;
		&lt;select name="my_checkbox_field"&gt;
			&lt;option value=""&lt;!-- BEGIN_IF [{my_checkbox_field}/em] --&gt; selected="selected"&lt;!-- END_IF --&gt;&gt;選択なし&lt;/option&gt;
			&lt;option value="em"{my_checkbox_field@operator:selected#em}&gt;未チェック&lt;/option&gt;
			&lt;option value="true"{my_checkbox_field:selected#true}&gt;チェック済み&lt;/option&gt;
		&lt;/select&gt;
		&lt;input type="hidden" name="field[]" value="my_checkbox_field"&gt;
		&lt;/div&gt;
	&lt;!-- END_MODULE Field_Search --&gt;
							</code></pre> <h3 id="h8d6b513b27">もうすこし説明</h3>カスタムフィールド検索で表示する場合次の3パターンが考えれられます。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/2beb7a89d1e14dc2b8f0a46ff8673889/%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-06-06%2017.18.29.png" alt=""> 1.「選択なし」 = 全てが表示されてる状態 2.「チェック済み」 = <code>my_checkbox_field　</code>にチェックが入っている状態 3.「チェックなし」 = <code>my_checkbox_field</code>が空の場合 この場合、カスタムフィールド検索のURLコンテキストとしては次が想定できそうです。 1.「選択なし」 = https://blog.masizime.com/search/ 2.「チェック済み」 = https://blog.masizime.com/search/field/my_checkbox_field/true/ 3.「チェックなし」 = https://blog.masizime.com/search/field/my_checkbox_field// カスタムフィールドは次のようにしてみましょう。<pre><code>&lt;option value=""{my_checkbox_field#}&gt;未チェック&lt;/option&gt;</code></pre>しかし、「チェックなし」のURLは正しく表示することが出来ません。 https://blog.masizime.com/search/field/my_checkbox_field// ここで空を意味する演算子<code>em</code>を利用してみましょう。valueに入れることで利用出来ます。<pre><code>&lt;option value="em"&gt;未チェック&lt;/option&gt;これでカスタムフィールドが空のものが絞り込めました。</code></pre>https://blog.masizime.com/search/field/my_checkbox_field/em/ ですが、まだ少し足りません。この状態だと画面がリロードしたらselectの値が「選択なし」に戻ってしまいます。<pre><code>&lt;option value="em"{my_checkbox_field@operator#em}&gt;未チェック&lt;/option&gt;</code></pre><code>@operator</code>を利用します。これでリロードしても現在URLコンテキストが指定されているという状態を維持できます。 と言った形で空の場合も検索することがきました。 最後にもう一度全体的なコードですが次になります。<pre><code>	&lt;!-- BEGIN_MODULE Field_Search --&gt;
	 &lt;div&gt;
		&lt;select name="my_checkbox_field"&gt;
			&lt;option value=""&lt;!-- BEGIN_IF [{my_checkbox_field}/em] --&gt; selected="selected"&lt;!-- END_IF --&gt;&gt;選択なし&lt;/option&gt;
			&lt;option value="em"{my_checkbox_field@operator:selected#em}&gt;未チェック&lt;/option&gt;
			&lt;option value="true"{my_checkbox_field:selected#true}&gt;チェック済み&lt;/option&gt;
		&lt;/select&gt;
		&lt;input type="hidden" name="field[]" value="my_checkbox_field"&gt;
		&lt;/div&gt;
	&lt;!-- END_MODULE Field_Search --&gt;
							</code></pre> 以上 a-blog cms カスタムフィールド検索でチェックボックスが空の場合に絞り込むでした。

カスタムフィールド検索でチェックボックスが空の場合に絞り込みたい場合がありました。カスタムフィールドの値がある場合は特に問題ないですが、空の場合はどのように検索すると良いでしょうか。

a-blog cms カスタムフィールド検索でチェックボックスが空の場合に絞り込む

田村 章吾（タムショー）

ましじめ株式会社代表 北九州市在住。
『現場のプロから学ぶ CSSコーディングバイブル』の著者。
CMSを中心としたWeb制作をしています。

こんにちは田村です。 microCMSとNext.jsを利用して小規模サイトを作成し、設置先は一般的なレンタルサーバーを利用したいというケースがありました。 VercelやNetlifyを利用する場合は問題ありませんが、一般的なレンタルサーバーはNode.jsに対応していないのでNext.jsは動作しません。そこでNext.jsは静的にエクスポートして設置する必要があります。 構成としては次の形を考えています。 <pre><code>記事を更新したい
↓ microCMSで記事を更新する
↓ Webhookで通知
↓ GitHub Actionsでデプロイ
↓ GitHub ActionsでレンタルサーバーにFTP
サイトが更新される</code></pre>記事が更新されるとホームページに反映されると嬉しいですね。 <h2 id="h31d727ccda">準備</h2><h3 id="h9a71a77d2a">GitHub Actionsを確認する</h3>今回はGitHub Actionsを利用する必要があります。 フリープランは「ストレージ500 MB,利用時間2,000分」の制限があるようです。 用途に合わせてプランを検討してみてください。 GitHub Actionsの支払いについて <a href="https://docs.github.com/ja/billing/managing-billing-for-github-actions/about-billing-for-github-actions" target="_blank" rel="noopener noreferrer">https://docs.github.com/ja/billing/managing-billing-for-github-actions/about-billing-for-github-actions</a> <h3 id="h91cece8a29">microCMSのWebHookを確認する</h3>microCMSでできることも確認しておきましょう。 フリープランはAPI3つまで利用できるようです。 用途に合わせてプランを検討してみてください。 料金プラン <a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">https://microcms.io/pricing</a> 今回はWebHookを利用する必要があります。 WebHook <a href="https://blog.microcms.io/webhook-multiple-settings/" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/webhook-multiple-settings/</a> <a href="https://document.microcms.io/manual/webhook-setting#hf0d425ae06" target="_blank" rel="noopener noreferrer">https://document.microcms.io/manual/webhook-setting#hf0d425ae06</a> <h3 id="h788c57030e">Next.jsの静的書き出しを確認する</h3>静的書き出しに <code>Images</code> は対応していないため HTMLの<code>img</code>タグを使用する必要があります。 また、 <code>img</code> タグを使用すると ellintに引っかかるので <code>.eslintrc.json</code> に次を追加します。<pre><code>"rules": {
 "@next/next/no-img-element": "off"
}</code></pre> <a href="https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/static-html-export" target="_blank" rel="noopener noreferrer">https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/static-html-export</a> <h2 id="he843e3454b">作業内容</h2><h3 id="h6597303f12">ワークフローを作成する</h3>次にGitHub Actionsでワークフローを作成します。 ワークフローは.ymlファイルで作成します。 .github/workflows/deploy-ftp.ymlファイルを作成<pre><code>```
name: Deploy FTP CI

on:
 push:
 branches: [ main ]
 repository_dispatch:
 branches: [ main ]
 workflow_dispatch:
 branches: [ main ]

jobs:
 build:

 runs-on: ubuntu-latest

 strategy:
 matrix:
 node-version: [16.x]

 steps:
 - uses: actions/checkout@v3
 - name: Use Node.js ${{ matrix.node-version }}
 uses: actions/setup-node@v3
 with:
 node-version: ${{ matrix.node-version }}
 cache: 'npm'
 - run: npm ci
 - run: npm run build --if-present
 - run: npm run export
 - name: Deploy FTP
 uses: SamKirkland/FTP-Deploy-Action@4.2.0
 with:
 server: ${{ secrets.FTP_SERVER }}
 username: ${{ secrets.FTP_USERNAME }}
 password: ${{ secrets.FTP_PASSWORD }}
 protocol: ${{ secrets.FTP_PROTOCOL }}
 port: ${{ secrets.FTP_PORT}}
 server-dir: ${{ secrets.FTP_REMOTE_ROOT }}
 local-dir: ./out/
 dangerous-clean-slate: true

```</code></pre>こうなりました。 <code>workflow_dispatch</code>でmicroCMSからの変更を受け取ります。 <code>repository_dispatch</code>はGitHub管理画からデプロイすることが出来るようになります。<pre><code>on:
 push:
 branches: [ main ]
 repository_dispatch:
 branches: [ main ]
 workflow_dispatch:
 branches: [ main ]</code></pre> ここでNext.jsの静的書き出しを実行します。<pre><code> - run: npm run build --if-present
 - run: npm run export</code></pre> その後、FTP-Deploy-Actionを利用してサーバーにFTPします。 サーバー情報はリポジトリには保存ぜず環境変数に登録します。<pre><code> server: ${{ secrets.FTP_SERVER }}
 username: ${{ secrets.FTP_USERNAME }}
 password: ${{ secrets.FTP_PASSWORD }}
 protocol: ${{ secrets.FTP_PROTOCOL }}
 port: ${{ secrets.FTP_PORT}}</code></pre> サーバーのディレクトリを登録します。 ディレクトリは「/html/」など/を含めたものになります。 サーバー側のディレクト設定は間違えないように注意が必要です。<pre><code> server-dir: ${{ secrets.FTP_REMOTE_ROOT }}</code></pre> 移動させたいディレクトリを登録、ここは静的書き出しされる <code>/out/</code> になります。<pre><code>local-dir: ./out/</code></pre> しかし、この <code>./out/</code> は<code>.gitignore</code> で除外されていますのでこのままでは利用することができません。 リポジトリには含まれないディレクトリを利用する場合は、<code>git-ftp-include</code>をプロジェクトルートに作成する必要があります。 git-ftp-includeファイルを作成<pre><code>!out/</code></pre> また、FTP時に前回のファイルが残りエラーになることがあったので、アップロード前に対象ディレクトリのファイルを消す設定を入れました。<pre><code>dangerous-clean-slate: true</code></pre> その他FTP-Deploy-Actionの設定はこちらを確認してください。 <a href="https://github.com/SamKirkland/FTP-Deploy-Action" target="_blank" rel="noopener noreferrer">https://github.com/SamKirkland/FTP-Deploy-Action</a> ここでは .github/workflows/deploy-ftp.ymlファイルとgit-ftp-includeを作成しています。 作成してPushするとActrionsに次のような画面が表示されます。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/84122e09de8648ae86ddb450bb0e176a/image.png" alt=""> また、GitHub管理画面 「Actrions」 → 「New workflow」 → 「 set up a workflow yourself」からも作成することが出来ます。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/88b0e9454dee485ca4ed6d0d8c906c33/image.png" alt=""> <h3 id="he787463895">環境変数の登録</h3>次にサーバー情報を定義します。 GitHub管理画面 「Settings」→「Secrets」→「Actions」→「New repository secret」へ移動し作成します。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/ca2d5255da2d455b8e17707ba0b5f7a8/image.png" alt=""> <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/cf07636f9be04cf384d88fa0414cdf2c/image.png" alt=""> これで設定は完了です。 もう一度サーバー側のディレクト設定が間違っていないか確認しておきます。 間違っていなければ管理画面からデプロイしましょう。 「Actrions」から「Deploy FTP CI」に移動します。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/84122e09de8648ae86ddb450bb0e176a/image.png" alt=""> <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/cc2342e5813445ffb6858edc6c8ef017/image.png" alt=""> 無事デプロイすることができました。 <h3 id="h2f8c679ef3">GitHubのトークン作成、microCMSへ設定</h3> 次にmicroCMSの記事更新でデプロイが走るようにWebHookを設定します。 先にGitHubトークンを作成します。 <a href="https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token" target="_blank" rel="noopener noreferrer">https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token</a> 次にmicroCMSにGitHbuの情報を設定します。 <a href="https://document.microcms.io/manual/webhook-setting#hf0d425ae06" target="_blank" rel="noopener noreferrer">https://document.microcms.io/manual/webhook-setting#hf0d425ae06</a><pre><code>GitHubトークン
対象のユーザー名
対象のリポジトリ名
トリガーイベント名</code></pre> 設定が完了したら、記事を更新してエラーなくデプロイされている&amp;ホームページが更新されていることを確認します。 うまくいかない場合はWebHookの設定を見直してください。 <h3 id="ha739b3b8f6">その他</h3><h4 id="h8b2db6e6b3">お問い合わせフォームを設置したい</h4>お問合せフォームが欲しい場合はGoogleフォームを利用するのも良いですが、マーケティングツールのフォームやフォームのサービスを使用するとよさそうです。 <a href="https://bow-now.jp/" target="_blank" rel="noopener noreferrer">https://bow-now.jp/</a> <a href="https://movabletype.net/form/" target="_blank" rel="noopener noreferrer">https://movabletype.net/form/</a><h3 id="hcf83e1357e"> </h3><h4 id="hd617d9d366">リダイレクトを設定したい</h4>Next.jsで静的書き出しをした場合、Next.jsで設定したリダイレクトは使用できませんので .htaccessにリダイレクトを書いて <code>/public/</code> フォルダに設置して対応しました。 <a href="https://nextjs.org/docs/api-reference/next.config.js/redirects" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/api-reference/next.config.js/redirects</a> <h2 id="ha214098e44">まとめ</h2>すこし落ち着いたらビルド時間を確認してみるのがよさそうです。 あまり時間がかかりすぎる&amp;頻繁に更新があるようでしたら状況に合わせて手動デプロイボタンを押すなど切り替えても良いかもしれません。 注意点として、FTPでファイルを消してアップしますので一時的に表示されない場合や、途中で止まってファイルアップロード漏れなど起こることがあるかもしれません。このあたり理解しつつ利用してみてください。 <h3 id="hcf83e1357e"> </h3> 以上「microCMS+Next.jsをレンタルサーバーに静的デプロイする方法」でした。

microCMSとNext.jsを利用して小規模サイトを作成し、設置先は一般的なレンタルサーバーを利用したいというケースがありました。

microCMS+Next.jsをレンタルサーバーに静的デプロイする方法

こんにちは田村です。 Basic認証を使用している環境でmanifest.jsonが読み込めないケースがありました。 <pre><code>Failed to load resource: the server responded with a status of 401 (Unauthorized)</code></pre> この場合次のように指定するとよさそうです。 <pre><code>&lt;link rel="manifest" href="/manifest.json"&gt;
↓
&lt;link rel="manifest" href="/manifest.json" crossorigin="use-credentials"&gt;</code></pre> 以上「Basic認証環境でmanifest.jsonのリンク切れを防ぐ」でした。

 Basic認証を使用している環境でmanifest.jsonが読み込めないケースがありました。この場合crossorigin="use-credentials"を指定するとよさそうです。

Basic認証環境でmanifest.jsonのリンク切れを防ぐ

こんにちは。田村です。 Gmailで古いメールを一括で削除したい場合がありました。 このような場合は、検索演算子を使うと良さそうです。 検索演算子をどのように使うか早速試してみたいと思います。 ここでは、「 2020年12月31日以前」のメールに絞り込んでみたいと思います。 Gmailをブラウザで開き左ナビゲーションの「すべてのメール」をクリックしてメールをすべて表示後、Gmailの検索窓に次のように入力します。<pre><code>before: 2020/12/31&nbsp;</code></pre> その後、検索結果にチェックを入れ「この検索条件に一致するすべてのスレッドを選択」を選択し、ゴミ箱アイコンをクリックすることで一括削除可能です。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/28eb3413eb53428e8ab3848f62ba2bf5/gmail-deletion.png" alt=""> 検索演算子を使うとこのようにフィルタリングすることができます。 他にもたくさんありますので詳しくは公式サイトをご確認ください。 <a href="https://support.google.com/mail/answer/7190?hl=ja" target="_blank" rel="noopener noreferrer">Gmail で使用できる検索演算子</a> 以上 「Gmail の古いメッセージを一括削除する」でした。

Gmailで古いメールを一括で削除したい場合がありました。このような場合は、検索演算子を使うと良さそうです。

Gmail の古いメッセージを一括削除する

こんにちは。田村です。 このたびマイナビ出版さんから出版された『現場のプロから学ぶ CSSコーディングバイブル』を執筆いたしました。 このブログでは出版に合わせて、5回にわたりCSSとSassについて簡単に解説していきたいと思っています。 5回にわたってお話してきたCSSとSassの連載も最終回となりました。 第1回から第3回まではcssについて、第4回は、Sassの基本についての解説でした。 これまでの記事はこちら<ul><li><a style="background-color:#ffffff" href="https://blog.masizime.com/css-book1/" target="_blank" rel="noopener noreferrer">第1回 CSSとはなにか</a></li><li><a style="background-color:#ffffff" href="https://blog.masizime.com/css-book2/" target="_blank" rel="noopener noreferrer">第2回 </a><a href="https://blog.masizime.com/css-book2/" target="_blank" rel="noopener noreferrer">CSSの書き方</a></li><li><a href="https://blog.masizime.com/css-book3/" target="_blank" rel="noopener noreferrer">第3回 CSSを記述する場所</a></li><li><a href="https://blog.masizime.com/css-book4" target="_blank" rel="noopener noreferrer">第4回 Sassの基本</a></li></ul> 最終回は、Sassのコンパイル方法についてです。 では、一緒に見ていきましょう。

Sassのコンパイル方法はnpm-script やwebpack などさまざまですがその中でも、今回は簡単に導入できるコンパイルツールを紹介します。

【書籍連載】第5回 Sassのコンパイル方法

<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/2e0bc7430d404e10984e14b17cc78927/css-book1-0-1.png" alt=""> 絶賛発売中です！ ただいま、ご購入いただいた方に、特典PDFをプレゼントするキャンペーンを実施しますのでぜひともチェックしてみてください。 <ul><li><a href="https://amzn.to/3AJCaOR" target="_blank" rel="noopener noreferrer">Amazonのリンク</a></li><li><a href="https://book.mynavi.jp/pcbook/blog/detail/id=124081" target="_blank" rel="noopener noreferrer">【キャンペーン情報】『現場のプロから学ぶ CSSコーディングバイブル』購入キャンペーン実施！</a></li></ul><h3 id="hcf83e1357e"> </h3>

<h3 id="h0669eefa7c">目次</h3>● 基本的なコンパイル方法 ● コンパイルツールを利用する 　Prepros 　CodeKit ● おわりに

<h2 id="h44cd448ba0">基本的なコンパイル方法</h2> Sass を使用するにはSCSS ファイルをCSS ファイルへコンパイルする環境が必要です。 コンパイル方法は、GUI のコンパイルツールを利用したり、コードエディタの機能を使用したり、コマンドを入力する方法などさまざまありますが、npm-script やwebpack などのCLI（コマンドラインインターフェース）が主流です。 その中でも、今回は簡単に導入できるコンパイルツールを紹介します。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/9fdc5d088a5b4f54b6d74fd5d0fd3bab/1-03-01.png" alt="">

Sass ファイルはコンパイルして使用します。

<h2 id="ha734632941">コンパイルツールを利用する</h2><h3 id="h0bf5287612">Prepros</h3><a href="https://prepros.io/" target="_blank" rel="noopener noreferrer">Prepros</a>はWindows、Mac で使えるコンパイルツールになります。 無料で使用することは可能ですが定期的にライセンスの購入に関する表示が出現します。 有料版にすることで非表示になりますので、業務で使用する場合は有料版を検討するといいで しょう。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/5934ba05a6304217ac5aa0bc166adaae/1-03-02.png" alt=""><h4 id="h48613fbf9c">Prepros をインストールする</h4>早速公式サイトからダウンロードページしてみましょう。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/791786d6c8654346aac253b78d4e22ac/1-03-04.png" alt="">該当するソフトウェアをダウンロードしてソフトウェアをインストールします。 起動すると次のような画面が表示されます。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/81c18cb19fcf4b3b991440ea49443127/1-03-05.png" alt=""><h4 id="h2f557230ce">プロジェクトを設定する</h4>インストールが終わったらPrepros を起動します。 早速プロジェクトを設定してみましょう。 ここでは次のファイル構成を利用します。 手を動かしながら記事の内容を進めていきたい場合は、ファイルの内容は空で構いませんので次のようなディレクトリとファイルを作成してみてください。<pre><code>sample
├ index.html
└ assetes
　 ├ scss
　 │ └ style.scss
　　 └ css
&nbsp;&nbsp;&nbsp;&nbsp;</code></pre> <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/41a6d2a9a2ab4edfb75547c804dd1dcb/1-03-06.png" alt=""> プロジェクトの設定は簡単で作業フォルダをPrepros にドラッグ&amp; ドロップするだけです。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/494b9b7cc3e7414e9daeab3a9bb55ec1/1-03-07.png" alt="">

ドラッグ& ドロップ後、prepros.config という設定ファイルが作成されました。これで準備は完了です。

<h4 id="h804cbd109a"> SCSS ファイルをコンパイルしてみる</h4>先ほど設定したプロジェクトのディレクトリは現在次のような構成となっています。<pre><code>sample
├ index.html
├ assetes
　│ ├ scss
　│ │ └ style.scss
　│ └ css
└ prepros.config
&nbsp;&nbsp;&nbsp;&nbsp;</code></pre> では、assets/scss/style.scss を編集してみましょう。 次のように記述します。 <pre><code>.test {
 p {
 color: #000;
 }
}</code></pre> するとassets/css/style.css ファイルが自動で作成されました。 これでコンパイルは完了です。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/25d885d5cb584a8dbd9738aa251fd10e/1-03-10.png" alt="">

わあ！簡単にコンパイルすることができましたね。

さらに修正してみます。<pre><code>.test {
 background: #fff;
 p {
 color: #000;
 }
}</code></pre> <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/9a159d812144429aacb224452783663f/1-03-11.png" alt=""> 保存後、修正箇所が自動でコンパイルされました。 このようにプロジェクトを設定するだけでSass の監視がはじまり、保存するたびに自動的にCSS ファイルへコンパイルしてくれます。 さらにPrepros では、書き出し先や、出力方法など設定を変更することができます。 ファイル単体であれば、該当ファイルから選択して右側の設定から変更可能です。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/f34587d88c294c66b3bbea409f204ec6/1-03-12.png" alt="">プロジェクト全体であれば、プロジェクトを右クリック＞ Project Settings から変更可能です。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/fd494ab45066459da175c78b9f4c412b/1-03-16.png" alt="">

Sass のコンパイルだけではなくJavaScript や画像の圧縮など様々な最適化やローカルサーバーを立ち上げることもでき大変便利です。気になった方は公式ページを確認してみてください。




<h3 id="h8d7a9426db"> CodeKit</h3><img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/63d8cba56e8b4e019cb75bd6e4b90f90/1-03-17.png" alt=""><a href="https://codekitapp.com/" target="_blank" rel="noopener noreferrer">CodeKit</a>はMac 専用のコンパイルツールになります。 有料のツールですがトライアル利用が可能です。 試用期間後、読み取り専用モードとなりコンパイルのみは引き続き無料で使用可能です。 基本的にはPreprosと同じことができますが、CodeKitは独自のHTMLテンプレートがあったりします。 使いやすい方を選ぶとよいでしょう。 <a href="https://codekitapp.com/help/kit/" target="_blank" rel="noopener noreferrer">Languages: Kit</a>

「Languages: Kit」はシンプルで使いやすいのでちょっとしたファイルの分割など便利ですよ！

<h2 id="h9be0c3393d">おわりに</h2>第5回はここまでになります。 コンパイル環境はさまざまです。 最初はよくわからないまま設定をして、時間がかかってしまうということもあるかもしれません。 しかし、コンパイル環境を整えること自体がプロジェクトの目的ではありませんのであまりこだわりすぎず、まずは簡単にコンパイルする方法を身につけておきましょう。 書籍の発売に伴った連載は今回で終了ですが、今後も皆さんの知りたいことをブログで解説していけたらいいなーと思っています。 例えば「セレクタのネストについて知りたい！」とか「○○について解説してほしい！」とかありましたら リクエストも受け付けていますので、こちらのフォームよりメッセージください！ <a href="https://masizime.com/contact" target="_blank" rel="noopener noreferrer">https://masizime.com/contact</a>

この記事は『現場のプロから学ぶ CSSコーディングバイブル』の内容を引用し加筆しています。 今回の内容は、『現場のプロから学ぶ CSSコーディングバイブル』にてより詳しく解説しています。 ぜひ、お手にとってご覧ください！よろしくお願いいたします。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/fa6ceea2c9064694b1a91449f3ccbbe2/css-book1-0.png" alt=""> 絶賛発売中です！ ただいま、ご購入いただいた方に、特典PDFをプレゼントするキャンペーンを実施しますのでぜひともチェックしてみてください。 <ul><li><a href="https://amzn.to/3AJCaOR" target="_blank" rel="noopener noreferrer">Amazonのリンク</a></li><li><a href="https://book.mynavi.jp/pcbook/blog/detail/id=124081" target="_blank" rel="noopener noreferrer">【キャンペーン情報】『現場のプロから学ぶ CSSコーディングバイブル』購入キャンペーン実施！</a></li></ul>

こんにちは。田村です。 このたびマイナビ出版さんから出版された『現場のプロから学ぶ CSSコーディングバイブル』を執筆いたしました。 このブログでは出版に合わせて、5回にわたりCSSとSassについて簡単に解説していきたいと思っています。 第1回から第3回までは、cssについて解説していきました。 今回からは2回に渡り、Sassについてを解説していこうと思っています。 4回目は、Sassの基本について解説していきます。 これまでの記事はこちら<ul><li><a style="background-color:#ffffff" href="https://blog.masizime.com/css-book1/" target="_blank" rel="noopener noreferrer">第1回 CSSとはなにか</a></li><li><a style="background-color:#ffffff" href="https://blog.masizime.com/css-book2/" target="_blank" rel="noopener noreferrer">第2回 </a><a href="https://blog.masizime.com/css-book2/" target="_blank" rel="noopener noreferrer">CSSの書き方</a></li><li><a href="https://blog.masizime.com/css-book3/" target="_blank" rel="noopener noreferrer">第3回 CSSを記述する場所</a></li></ul>

現在のWeb制作では純粋なCSSのみで制作をして管理されるということは少ないかもしれません。  Sassを使うことでプログラミングに近い要素を取り入れてCSSを拡張することができます。

【書籍連載】第4回 Sassの基本

<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/3d0112420e51467882bd22cc190a1fb7/css-book1-0-2.png" alt=""> 絶賛発売中です！ ただいま、ご購入いただいた方に、特典PDFをプレゼントするキャンペーンを実施しますのでぜひともチェックしてみてください。 <ul><li><a href="https://amzn.to/3AJCaOR" target="_blank" rel="noopener noreferrer">Amazonのリンク</a></li><li><a href="https://book.mynavi.jp/pcbook/blog/detail/id=124081" target="_blank" rel="noopener noreferrer">【キャンペーン情報】『現場のプロから学ぶ CSSコーディングバイブル』購入キャンペーン実施！</a></li></ul><h3 id="hcf83e1357e"> </h3>

<h3 id="h0669eefa7c">目次</h3>● Sassとはなにか ● 2種類の記法 　記法の種類について 　SASS記法 　SCSS記法 ● おわりに

<h2 id="ha10e6f8060">Sassとはなにか</h2>SassとはSyntactically Awesome StyleSheetの略であり、CSSプリプロセッサと呼ばれるものの一つでCSSを拡張して、書きやすく・見やすくしたスタイルシートのことです。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/f1e80fab530f48e1bca86f741f4c725c/1-00-01.png" alt=""><a href="https://sass-lang.com/" target="_blank" rel="noopener noreferrer">https://sass-lang.com/</a> CSSは基本的にシンプルで扱いやすいですが、プログラムのような演算やコードの再利用などの機能はありません。 しかし、現在のWeb制作ではレスポンシブウェブデザインへの対応やCSS設計を取り入れるなどCSSが複雑化しており純粋な CSSだけでは管理が難しくなっています。 例えば、同じ装飾を使い回したい場合は元のコードを重複して記述するしかなく、後で変更するにはすべて修正する必要があり、大変なうえ記述ミスや修正漏れが発生するかもしれません。 さらに、CSS に新しく便利な機能が追加されるとしても、CSSで扱えるようになるということはW3Cから勧告される必要があり、簡単に機能拡張することはできません。 さらに各ブラウザへの実装が普及を待たなければいけませんので実際に使用できるのはかなり先の話になってしまいます。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/b2da6cf23eac4d1f96bb8724013809e2/1-00-02.png" alt="">さまざまな環境に対応しなければならない そこで、CSSにはまだ存在しない機能の仕様追加やブラウザの実装を待つのではなく、Sassのような便利な機能でCSSを拡張して管理し、Webサイトで使用する前に通常のCSSファイルに変換(コンパイル)することで複雑化したCSSを管理しやすくしています。 具体的には、.cssの拡張子であるCSSファイルではなく.sass、.scssなどの拡張子を使用したファイルにコードを記述します。 その後HTMLに読み込ませる前に、開発環境などで事前にCSSファイルにコンパイルして、読み込めるようになったファイルをサーバーにアップロードして使用します。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/f9c79c5c711645f1a92acfd2bf776117/1-00-03.png" alt="">Sass ファイルだとブラウザで使用できないので CSS ファイルに変換して使用する

このように、Sassを使うとコンパイルする手間は増えますがその代わりCSSにない便利な機能を使えるようになります。

<h2 id="h9a1935a12c">2種類の記法</h2><h3 id="h3619d0d9fb">記法の種類について</h3>Sassには、SASS記法とSCSS記法の次の2種類の記法が存在します。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/55e62f33ab6e419a9424c25fa200f9d8/1-02-01.png" alt=""> また、Sassの記述は、CSSファイルに書いても使用することはできず .sass、.scss などの拡張子を使用して記述する必要があります。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/6473e20b26944eed9764f6d227ede966/1-02-02.png" alt=""> 一般的に普及している記法はSCSS記法で、CSSと互換性があります。 互換性とはそのまま使えるか?ということで、SCSS記法は拡張子を .css から .scss へ変更することでSassファイルとして使用することができます。

ではなぜ2種類の記法が存在するのでしょうか。違いを見てみましょう。

<h3 id="h8104096326">SASS記法</h3>まずSASS記法ですが、Sassと同じ名前をしていますね。 その名の通りSASS記法はSassの最初に作られた記法となります。 SASS記法の特徴として従来のCSSを簡素化して非常にシンプルにしたものでした。 <ul><li>波括弧を使わずインデントで処理する</li><li>セミコロンの省略など記述を簡素化</li><li>拡張子は .sass</li></ul> &nbsp;SASS<pre><code>$color: #ccc
.title
 background-color: $color
 p
 font-size: 20px</code></pre> コンパイルされるCSS<pre><code>.title { 
 background-color: #ccc;
}
.title p {
 font-size: 20px; 
}</code></pre>

SASS記法では、従来のCSSと書き方が大きく変わっているため、互換性はなく既存のCSSファイルをそのままSass化することはできません。
さらに、インデントや改行など細かく書式が決まっており、慣れるまでに時間がかかってしまうということもあり広く普及しませんでした。

<h3 id="hcaca18e021">SCSS記法</h3>その後、CSSと互換性のあるSCSS(Sassy CSS)記法が登場しました。 特徴としては SassをCSSと同じ感覚で記述することができます。 <ul><li>CSSと互換性があるので拡張子を変えるだけで使用できる</li><li>CSSを書くように書ける</li><li>拡張子は .scss</li></ul> SCSS<pre><code>$color: #ccc;
.title {
 background-color: $color;
 p {
 color: $color;
 font-size: 20px; 
 }
}</code></pre> コンパイルされるCSS<pre><code>.title { 
 background-color: #ccc;
}
.title p {
 font-size: 20px;
}</code></pre> SCSS記法はCSSと互換性があるため既存のCSSの拡張子を.scssとするだけでSassファイルになり、既存のプロジェクトにも簡単に使用することができます。

これにより既存のCSSファイルをSassファイル化してSassの機能を使いたい箇所のみ使用するなど、簡単に導入することが可能となり広く普及しました。
一般的にはSassといえば.scssを使用するSCSS記法を指します。

<h2 id="h9be0c3393d">おわりに</h2>第4回はここまでになります。 現在のWeb制作では純粋なCSSのみで制作をして管理されるということは少ないかもしれません。 Sassを使うことでプログラミングに近い要素を取り入れてCSSを拡張することができます。 しかし、プログラミングに近い要素といっても難しく考える必要はなく、あくまでCSSの補助と捉えて最初は少しずつ取り入れていく形でも良いでしょう。 次回は、Sassのコンパイル方法について触れていきたいと思います。

この記事は『現場のプロから学ぶ CSSコーディングバイブル』の内容を引用し加筆しています。 今回の内容は、『現場のプロから学ぶ CSSコーディングバイブル』にてより詳しく解説しています。 ぜひ、お手にとってご覧ください！よろしくお願いいたします。 絶賛発売中です！ ただいま、ご購入いただいた方に、特典PDFをプレゼントするキャンペーンを実施しますのでぜひともチェックしてみてください。 <ul><li><a href="https://amzn.to/3AJCaOR" target="_blank" rel="noopener noreferrer">Amazonのリンク</a></li><li><a href="https://book.mynavi.jp/pcbook/blog/detail/id=124081" target="_blank" rel="noopener noreferrer">【キャンペーン情報】『現場のプロから学ぶ CSSコーディングバイブル』購入キャンペーン実施！</a></li></ul> <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/02419d714a394e35ba30a478a3fab0ee/css-book1-0.png" alt="">

こんにちは田村です。 今回はa-blog cmsの拡張アプリ「Form2Entry」を使用した構築の例をご紹介します。 カスタマイズの要望に対してどのような経緯で「Form2Entry」を選択することになったかを解説します。 この記事では細かな実装の話は省きますが、こういった使い方ができるんだなというのをご紹介できればと思います。 「Form2Entry」とは何か？という方はこちらをご覧ください。 <a href="https://blog.masizime.com/ablogcms-form2entry/" target="_blank" rel="noopener noreferrer">a-blog cms 拡張アプリのForm2Entryをインストールする</a> <h2 id="ha8546922f6">1.カスタマイズの要望</h2>では早速、次のような要望があったとします。 <ol><li>無料ユーザー登録機能がほしい</li><li>記事に対して個別にダウンロードファイルを設定したい</li><li>ダウンロードファイルはログイン中のユーザーに表示したい</li><li>管理者はユーザーのダウンロード履歴をダウンロードしたい</li></ol> これをa-blog cmsで実装する場合どのようにすると良いでしょうか。 次のように考えることが出来そうです。 <h3 id="hcdaed2c910">1-1.無料ユーザー登録機能がほしい</h3>読者ユーザーを発行すると良さそうですね。 標準の機能で大丈夫そうです。 <h3 id="h8457524b26">1-2.記事に対して個別にダウンロードファイルを設定したい</h3>エントリーのカスタムフィールドを使用するとよいですね。 これも標準の機能で大丈夫でしょう。 <h3 id="h39363fed5c">1-3.ダウンロードファイルはログイン中のユーザーに表示したい</h3>読者ユーザーのみ表示したい場合はタッチモジュールを使用すると実現できそうです。 これも標準の機能で大丈夫です。 ここまでは標準機能で実装できそうだなと予想できます。 きになるのは次です。 <h3 id="ha85546a3e8">1-4.管理者はユーザーのダウンロード履歴をダウンロードしたい</h3>パッとみたところ標準機能では難しそうに見えます。 ダウンロードした情報を計測はどのようにするか考えてみましょう。 カスタマイズ案1：Googleアナリティクスを利用する<ul><li>ダウンロードファイルのリンクにGoogleアナリティクスのイベントとして計測する。</li><li>ログはどうしようかな。。</li></ul> 計測するのであればシンプルに出来そうです。 しかし、「履歴をダウンロードしたい」という箇所がカバーできていませんね。 Googleアナリティクスの使い方が詳しくないため、もしかしたら計測した特定のイベントをダウンロードできる方法があるのかもしれません。計測データを個別にダウンロードできるならこの方法も良さそうです。 カスタマイズ案2：フォームを利用する<ul><li>フォームを利用してチェックボックスなどでダウンロードする資料を選んで送信する。</li><li>返信メールまたはthanksページにダウンロードのリンクを記載しておく。</li><li>ログはGooglesプレットシートになどに書き込みダウンロードできるようにする。</li></ul> ダウンロードする部分はフォームを利用することが出来そうです。 「履歴をダウンロードしたい」という箇所は、a-blog cms公式のGooglesプレットシートに書き込んでくれる「拡張アプリ」があるのでこの辺りを組み合わせると良さそうです。 拡張アプリは他にもslack、ChatWork、Zohoにも飛ばせることができるのでフォームで送信した後、Zohoで管理というのも可能だと思います。 このようになa-blog cmsで実現するには基本的にはフォームを使うのが良さそうです。 カスタマイズ案3：拡張アプリ「Form2Entry」を利用する<ul><li>フォームを利用してチェックボックスなどでダウンロードする資料を選んで送信する。</li><li>返信メールまたはthanksページにダウンロードのリンクを記載しておく。</li><li>フォームから送信された内容をエントリーに登録する。</li><li>管理画面からForm2Entryで作成されたエントリーの一覧を表示・ダウンロードできるようにする。</li></ul> 上記フォームで送信まで同じですが、送信すると「Form2Entry」で操作したユーザーの情報でエントリーを作成するようにします。 例えばシークレットブログを作成してそこに作成していくことで管理者はシークレットブログ確認すると履歴がわかるという仕組みです。 エントリーとして登録するので絞り込みや出力するテンプレート形式など自由に作成することが出来ます。 あとからの要望など変更にも強そうですね。また、a-blog cmsのみで完結する形が作れそうです。 <h2 id="h4a74780591">2.カスタマイズの例</h2>こちらの記事同様にbeginner2020をインストールし、Form2Entryもインストールしているとします。 <a style="background-color:#ffffff" href="https://blog.masizime.com/ablogcms-form2entry/" target="_blank" rel="noopener noreferrer">a-blog cms 拡張アプリのForm2Entryをインストールする</a> なお、コードなど細かい説明は省いています。 <h3 id="h2dab6b4402">2-1.無料ユーザー登録機能がほしい</h3>読者ユーザーの作成です。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/07a45d74f996473d8625391ce69a42c8/01.png" alt=""> 読者ユーザーを使えるように設定<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/0b4b32216fc34ad8b6ed3f8f7b6a4892/19.png" alt="">ユーザー作成時のメールなど <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/09121ef2026f40aa927dc473db08fcb8/04.png" alt="">新規登録画面 この辺りを参考にしてもらうと良さそうです。 読者登録の項目を増やす、認証を行わないようにする <a href="https://developer.a-blogcms.jp/document/customfield/subscribe_customize.html" target="_blank" rel="noopener noreferrer">https://developer.a-blogcms.jp/document/customfield/subscribe_customize.html</a> 管理画面パス<pre><code>コンフィグ管理/ログイン設定
/bid/1/admin/config_login/

コンフィグ管理/メール設定
/bid/1/admin/config_mail/</code></pre> <h3 id="hc2d93d6971">2-2.記事に対して個別にダウンロードファイルを設定したい</h3>エントリーのカスタムフィールドを使用するとよいでしょう。 ここではファイルのフィールドを利用しました。 カスタムフィールド メーカーで作るのがオススメです。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/6c8ebb898e3f4e68bd4266d6d4071d39/02.png" alt="">エントリーのカスタムフィールド管理側 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/784a3270f5b14e98a50d047f3646f93a/05.png" alt="">カスタムフィールド表示側 注意点としては「アップロード許可ファイル拡張子を確認 しておきましょう。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/25972296f21c4979956c5a64bd164834/03.png" alt=""> カスタムフィールド&nbsp; <a href="https://developer.a-blogcms.jp/document/customfield/" target="_blank" rel="noopener noreferrer">https://developer.a-blogcms.jp/document/customfield/</a> カスタムフィールド メーカー <a href="https://developer.a-blogcms.jp/tools/" target="_blank" rel="noopener noreferrer">https://developer.a-blogcms.jp/tools/</a> 管理画面パス<pre><code>コンフィグ管理/編集設定
/bid/1/admin/config_edit/</code></pre> <h3 id="hbaf7f17f2e">2-3.ダウンロードファイルはログイン中のユーザーに表示したい</h3>先ほど資料ダウンロードの箇所をタッチモジュールもしくはIFブロックで分岐します。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/2de5b1c727bc442d90db34c0fb2ed68a/06.png" alt="">ログイン前 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/78ce42a93b9746c5b02fca86bea6015f/05-1.png" alt="">ログイン後 タッチモジュール <a href="https://developer.a-blogcms.jp/document/reference/touch.html" target="_blank" rel="noopener noreferrer">https://developer.a-blogcms.jp/document/reference/touch.html</a> <h3 id="hac799a8dd4">2-4.管理者はユーザーのダウンロード履歴をダウンロードしたい</h3>ここで「Form2Entry」を使います。 <h4 id="hc77ce6bcba">フォームを送信するとエントリーが作成できるようする</h4>まずはフォームを送信するとエントリーが作成できるようにします。 「拡張アプリのインストール」と「フックをon」「ダウンロードのフォームID」の作成など作業を進めます。 エントリーを作成までの手順はこちらで説明していますのでご覧ください。 <a href="https://blog.masizime.com/ablogcms-form2entry/" target="_blank" rel="noopener noreferrer">a-blog cms 拡張アプリのForm2Entryをインストールする</a> フォームの場所は先ほどログイン時のみ表示できるようになった「資料ダウンロード」の項目でフォームを作成します。 このときファイル以外でもエントリー登録しておきたいユーザーの情報などあればhiddenで隠し一緒に送信するとよいでしょう。 <h3 id="hcf83e1357e"> </h3><img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/d2946cab4bbc42abbebf2ff423022216/07.png" alt="">ダウンロード前<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/06590d35f5e949fcaf0f030429f8ad56/12.png" alt="">ダウンロード後 ある程度ダウンロードしたら管理画面一覧画面をみてみましょう。 Form2Entryから作成されているのがわかります。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/549003064d71424085db9c28359be3cb/18.png" alt="">記事が作成されている <h4 id="hd593424b5e">履歴をダウンロードできるようにする</h4>次に履歴をダウンロードできるようにします。 管理画面にダウンロード一覧を参考にカスタマイズしました。 エントリーの絞り込みにダウンロードボタンをつけるカスタマイズをします。 すると添付画像のように選択、ダウンロードが可能になりました。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/f433e7f84321484db6c94be345486418/13.png" alt="">ダウンロードログ一覧<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/31022493aa344db183e577d5fed5fcc3/14.png" alt="">絞り込み検索<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/8f4eccd00af04344b3db0a1de1db056d/15.png" alt="">ダウンロード機能<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/beba60f708bd4916b385c7ed45f75feb/16.png" alt=""> ダウンロードされたファイル これで「ダウンロードのログを絞り込みダウンロード」することができました。 <h2 id="ha214098e44">まとめ</h2>Form2Entryの使用例はここまでになります。 紹介した例は以外にもさまざまな使い方ができると思います。 Form2Entryを使うとa-blog cmsでのサイト制作、または制作の提案の幅がぐっと広がりそうですね。 Form2Entryの使い所の参考になれば幸いです。

a-blog cmsの拡張アプリ「Form2Entry」を使用した構築の例をご紹介します。カスタマイズの要望に対してどのような経緯で「Form2Entry」を選択することになったかを解説します。こういった使い方ができるんだなというのをご紹介できればと思います。

a-blog cms 拡張アプリのForm2Entryの使用例

こんにちは田村です。 今回はa-blog cmsの拡張アプリ「Form2Entry」をインストールして使用するまでを解説します。 「Form2Entry」とはフォームで送信した内容を元にエントリーを作成することができる拡張アプリです。 これにより掲示板のような投稿型サイトが簡単に実装することができます。 どんなものか試して見たい方はこちらのハンズオンを参考にしてみてください。 <a href="https://developer.a-blogcms.jp/hands-on/camp2019autumn/form2entry.html" target="_blank" rel="noopener noreferrer">https://developer.a-blogcms.jp/hands-on/camp2019autumn/form2entry.html</a> <h2 id="hc6e0536950">拡張アプリとは</h2> まず「拡張アプリ」とは何なのかですが、WordPressであれば「プラグイン」、Drupalであれば「モジュール」と同じと考えて良いと思います。WordPressなどと同様にPHPを使って記述していきます。 a-blog cmsでPHP？と思われる方もいるかもしれません。 通常a-blog cmsではPHPを触ることなくカスタマイズ可能ですが、フックという形で特定タイミングで独自の処理を実行できるようにすることができます。このフック処理を追加するときにPHPを書く必要があります。 <a href="https://developer.a-blogcms.jp/document/user_hook/" target="_blank" rel="noopener noreferrer">https://developer.a-blogcms.jp/document/user_hook/</a> 馴染みのあるところでは「グローバル変数」と「校正オプション」の追加というあたりですね。 このように拡張したい処理を都度フックに書いてカスタマイズすることも出来ますが、 必要なフック処理を1つのパッケージとしてブログ単位で呼び出せるようにまとめたものが「拡張アプリ」というわけです。 <h3 id="hd632e2aaee">拡張アプリを独自で作成する</h3>「拡張アプリ」はこの辺りの処理を拡張することが可能なようです。詳しくはドキュメントを確認するのが良いでしょう。 <ul><li>校正オプションの拡張</li><li>フック処理の拡張</li><li>Validatorの拡張</li><li>独自GETモジュールの追加</li><li>独自POSTモジュールの追加</li><li>テンプレートの挿入（テンプレートの拡張）</li></ul> https://developer.a-blogcms.jp/document/develop_apps/ <h3 id="hcfad8d2b96">無料の拡張アプリ</h3>a-blog cms公式から無料の拡張アプリも公開されていますので参考にしてみてください。 <a href="https://developer.a-blogcms.jp/app/" target="_blank" rel="noopener noreferrer">https://developer.a-blogcms.jp/app/</a><img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/d8b6570f2cc94b718851e822fa55d849/10.png" alt=""> <h3 id="h37c166269b">ビジネスパートナー用の拡張アプリ</h3> ビジネスパートナーのみ購入できる拡張アプリがあります。 今回登場する「Form2Entry」もビジネスパートナー用の拡張アプリの一つです。 a-blog cmsにはビジネスパートナーという制度があります。ビジネスパートナーになると事業者向の特典が充実しますので定期的にa-blog cms を利用する場合はパートナー契約をすることをオススメします。 <a href="https://developer.a-blogcms.jp/partner/detail.html" target="_blank" rel="noopener noreferrer">https://developer.a-blogcms.jp/partner/detail.html</a> <h2 id="h3c7222fefe">動作確認</h2><h3 id="ha7e6d5245b">Form2Entryをインストールしてみる</h3>まずはa-blog cmsをインストールしましょう。 インストールの手順は省略しここではbeginner2020をインストールすることにします。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/f84ca4ceeb224180b2faf7aa225a0199/01.png" alt=""> 設定は見やすいように変更してください。ここではタイトルだけ変更しておきます。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/50f5edbb0c91470da82518a53e17cecd/02.png" alt=""><img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/a0e823cdeea24735a093b81128a9ab2b/03.png" alt=""> 次に拡張アプリをインストールします。 記事が少し古いですが、動くと信じてこちらからダウンロードして使用します。 <a href="https://developer.a-blogcms.jp/hands-on/camp2019autumn/form2entry.html#entry-3" target="_blank" rel="noopener noreferrer">https://developer.a-blogcms.jp/hands-on/camp2019autumn/form2entry.html#entry-3</a> ダウンロードしたファイルを解凍し次へ配置します。<pre><code>extension/plugins/Form2Entry</code></pre> さらにconfig.server.phpの Hookを1にします。<pre><code>define("HOOK_ENABLE", 0);
↓
define("HOOK_ENABLE", 1);</code></pre> <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/af82870ad1e446c38cc1e7100061959e/04.png" alt=""> 次に管理画面の設定変更します。「Form2Entry」を使用するブログでインストールする必要があります。 今回は、親ブログで使用することにします。 左ナビゲーションから拡張アプリ管理のページへいくと「Form2Entry」が見えるのでインストールします。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/1d5c9a4c344a45d4b3e840c1cd6c12ae/06.png" alt=""><img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/872ee55f96824b9b89054a990791c32e/07.png" alt=""> <h3 id="h44d6ba437e">Form2Entryを使ってエントリーを投稿してみる</h3>次に、左ナビゲーションからフォーム管理のページへ移動します。 ここでは標準で入っている「お問い合わせフォーム：contactForm」を利用してエントリーを作成してみましょう。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/a06dbd14f5f44ad2a0022eb9e27c63e3/11.png" alt=""> フォームIDの編集画面を見てみると「Form2Entry 設定」という項目が増えています。 ここで「Form2Entry 」を設定します。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/bb4ba9db1d6c49049b7fb9ef85063689/12.png" alt=""> <pre><code>エントリー設定：「有効にする」
タイトル指定：「{name}様からのご質問：{description}」</code></pre> ここの{name}、{description}というのはお問い合わせフォームで使用されているフィールドの値になります。 一度お問い合わせページとテンプレートをみてみましょう。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/09b69c80c2a6409094523e8baca0f098/15.png" alt=""><img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/3181f453daf94f758caed4df3995702d/14.png" alt=""> 仮に郵便番号であれば{postal-code}といった形で使用できます。 フォームを作る時と同じイメージで良いと思います。 使用したい値を入力します。 さらにはカスタムフィールド に割り当てたり、ユニットに入れることも可能です。 ここでは見出しのみで進むこととし、フォームの内容を入力します。 外見に変化はありませんがそのまま「送信」まで進めます。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/3e1d8ac111314e6ea6b8c5956e88b087/18.png" alt=""> 送信が完了しました。特に変化はありません。 次に管理画面を見てみましょう。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/3a4439ecc86f41a4bcc29939478f255e/19.png" alt=""><img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/06fbc0d1feaf437bae9679cf5e14c291/20.png" alt=""> 無事にエントリーがされているのがわかります。 見出しのみしか入れていないためコンテンツの内容は空ですが、正しく表示されているようです。 フォームからの内容をエントリーとして登録することが可能になりました。 この記事ではここまでとしますが、あとはサイトに合わせてカスタムフィールド やユニットに値をいれると良いでしょう。 以上、ここまでが「Form2Entry」の基本的なインストールと使用方法です。 細かい値の設定などはハンズオンのページを確認してもらうと良いですが 基本的にはカスタムフィールドと、CSVインポートあたりの感覚でカスタムできると思います。 https://developer.a-blogcms.jp/hands-on/camp2019autumn/form2entry.html <a href="https://developer.a-blogcms.jp/document/customfield/" target="_blank" rel="noopener noreferrer">https://developer.a-blogcms.jp/document/customfield/</a> <a href="https://developer.a-blogcms.jp/document/datamanagement/csv_convert.html" target="_blank" rel="noopener noreferrer">https://developer.a-blogcms.jp/document/datamanagement/csv_convert.html</a> ビジネスパートナー専用の拡張アプリとなりますが、「Form2Entry」色々と面白いカスタマイズが出来そうですね。 また、ハンズオンの記事は古くなっていますのでzipファイルも古いかもしれません。 実際に導入を考えている場合は、一度アップルップルさんへ相談してみるが良いでしょう。 もしくは「ましじめ」にカスタマイズをご依頼いただければ、良いご提案をさせていただきます^^ ではでは。

a-blog cmsの拡張アプリ「Form2Entry」をインストールして使用するまでを解説します。    「Form2Entry」とはフォームで送信した内容を元にエントリーを作成することができる拡張アプリです。  これにより掲示板のような投稿型サイトが簡単に実装することができます。

a-blog cms 拡張アプリのForm2Entryをインストールする

こんにちは。田村です。 このたびマイナビ出版さんから出版された『現場のプロから学ぶ CSSコーディングバイブル』を執筆いたしました。 このブログでは出版に合わせて、5回にわたりCSSとSassについて簡単に解説していきたいと思っています。 1回目の記事では「<a style="background-color:#ffffff" href="https://blog.masizime.com/css-book1/" target="_blank" rel="noopener noreferrer">第1回 CSSとはなにか</a>」Webページに含まれる要素を中心にCSSとはなにかを見ていきました。 2回目の記事では「<a style="background-color:#ffffff" href="https://blog.masizime.com/css-book2/" target="_blank" rel="noopener noreferrer">第2回 </a><a href="https://blog.masizime.com/css-book2/" target="_blank" rel="noopener noreferrer">CSSの書き方</a>」CSSの書き方を中心に解説しました。 今回の3回目は、CSSを記述する場所について解説していこうと思います。 CSSを記述する場所は「HTMLのタグに直接CSSを記述する、styleタグの中に記述する、別ファイルにリンクしてCSSを記述する」といった3つの方法があります。

CSSを記述する場所は「HTMLのタグに直接CSSを記述する、styleタグの中に記述する、別ファイルにリンクしてCSSを記述する」といった3つの方法があります。今回はCSSを記述する場所に解説していこうと思います。

【書籍連載】第3回 CSSを記述する場所

<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/42f11b9c6ff74693847917a184d702df/css-book1-0.png" alt=""> 絶賛発売中です！ ただいま、ご購入いただいた方に、特典PDFをプレゼントするキャンペーンを実施しますのでぜひともチェックしてみてください。 <ul><li><a href="https://amzn.to/3AJCaOR" target="_blank" rel="noopener noreferrer">Amazonのリンク</a></li><li><a href="https://book.mynavi.jp/pcbook/blog/detail/id=124081" target="_blank" rel="noopener noreferrer">【キャンペーン情報】『現場のプロから学ぶ CSSコーディングバイブル』購入キャンペーン実施！</a></li></ul><h3 id="hcf83e1357e"> </h3>

<h3 id="h0669eefa7c">目次</h3>● HTMLのタグに直接CSSを記述する ● styleタグの中に記述する ● 別ファイルにリンクしてCSSを記述する ● おわりに

<h2 id="h5cecfec377">HTMLのタグに直接CSSを記述する</h2>1つめはHTMLタグに直接記述します。 style 属性を使用してプロパティ : 値という形式で指示を追加していくとスタイルが適用されます。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/c48ab42680f5412786719661cb9d131f/2-07.png" alt=""> 例として次のHTMLにスタイルを追加してみます。<pre><code>&lt;p style="background-color: #ccc;border: 1px solid #000;"&gt;木曾路はすべて山の中である。あるところは岨づたいに行く崖の道 であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。 一筋の街道はこの深い森林地帯 を貫いていた。&lt;/p&gt;

&lt;p&gt;木曾路はすべて山の中である。あるところは岨づたいに行く崖の道 であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。 一筋の街道はこの深い森林地帯 を貫いていた。&lt;/p&gt;</code></pre><img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/9ff429703a0d4199a215a7d1d90d6fa5/css-book3-1.png" alt="">HTML のタグに直接 CSS を記述する例 スタイルが適用されました。 ここで複数のタグにスタイルを適用したい場合は次のように記述します。<pre><code>&lt;p style="background-color: #ccc;border: 1px solid #000;"&gt;本文1&lt;/p&gt; &lt;p style="background-color: #ccc;border: 1px solid #000;"&gt;本文2&lt;/p&gt; 

&lt;p style="background-color: #ccc;border: 1px solid #000;"&gt;本文3&lt;/p&gt; &lt;p style="background-color: #ccc;border: 1px solid #000;"&gt;
本文 4&lt;/p&gt;</code></pre><img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/d2e2611ebfe94f4ead192d1279b3f3e8/css-book3-2.png" alt="">HTML の複数のタグに直接 CSS を記述する例 しかしこの場合、スタイルをHTMLタグに直接指定するので、複数pタグがあった場合、同じスタイルを適用するには毎回記述が必要になります。

確実に1つしか使わないスタイルということであれば良いですが、そういったケースは少なそうです。
また、HTMLタグに直接書いているため少しみづらく感じますね。

<h2 id="he595e1afbc">styleタグの中に記述する</h2>2つめはHTMLファイル内の&lt;head&gt; 〜 &lt;/head&gt;内にstyleタグを記述して &lt;style&gt; 〜 &lt;/style&gt;の間にスタイルを定義し、class属性で指定します。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/15ebbc664d1642a397943842ff0b1056/1-2-1_4.png" alt=""> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;styleタグの中に記述する&lt;/title&gt;
 &lt;style&gt;
 .text { 
 background-color: #ccc; 
 border: 1px solid #000;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p class="text"&gt;木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾 川の岸であり、あるところは山の尾をめぐる谷の入り口である。 一筋の街道はこの深い森林地帯を貫いていた。 &lt;/p&gt;
 &lt;p&gt;木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾 川の岸であり、あるところは山の尾をめぐる谷の入り口である。 一筋の街道はこの深い森林地帯を貫いていた。 &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre><img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/f38de3eba09d463799e6fd3aaf349c0a/css-book3-1-1.png" alt="">styleタグにCSSを指定する例 こちらの方法は先ほどのHTMLのタグに直接記述する場合と違い複数の.textというclassを使用することでpタグに同じスタイルを適用できるようになりました。 <pre><code>&lt;p class="text"&gt;本文1&lt;/p&gt;
&lt;p class="text"&gt;本文2&lt;/p&gt; 
&lt;p class="text"&gt;本文3&lt;/p&gt; 
&lt;p class="text"&gt;本文4&lt;/p&gt;</code></pre> <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/e7fbe116ce6e4808ab0a3729362cafde/css-book3-2-1.png" alt="">Classを使用して複数のタグに直接 CSS を指定する例 しかし、CSSをHTMLに直接書いているので別のHTMLに同じスタイルを適用したい場合は、同じCSSを複数書く必要があります。<img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/ea4bcb79f43c4d72ab87b4290d542ed8/2-10.png" alt="">別のHTMLに反映できない例

１つのHTMLで完結する場合は良いですが、複数のHTMLがある場合修正が大変ですね。


<h2 id="h5ecd0b4313">別ファイルにリンクしてCSSを記述する</h2>3つめは別ファイルにしてCSSを記述します。 CSSだけ記述したファイルを用意してHTMLのlink要素を使用してCSSを参照します。 index.html<pre><code>&lt;!DOCTYPE html&gt; 
&lt;html&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt; 
 &lt;title&gt;別ファイルにしてCSSを記述する&lt;/title&gt; 
 &lt;link rel="stylesheet" href="style.css"&gt;
 &lt;/head&gt; 
 &lt;body&gt;
 &lt;p class="text"&gt;木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾 川の岸であり、あるところは山の尾をめぐる谷の入り口である。 一筋の街道はこの深い森林地帯を貫いていた。 &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre> style.css<pre><code>.text { 
 background-color: #ccc; 
 border: 1px solid #000;
}</code></pre>このようにCSSを別ファイルにする方法ですと、1つのCSSファイルを編集することで複数のHTMLに同じスタイルを適用することができます。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/ef37e00eefb5435da0b12e775a91e481/2-11.png" alt="">1枚のCSSファイルで複数ページに適用できる

実際の制作ではこの別ファイルにリンクしてCSSを記述する方法が一般的です。

<h2 id="h9be0c3393d">おわりに</h2>第3回はここまでになります。 CSSの基本は記述の場所は違えど、プロパティ : 値という指示を繰り返し記述していくシンプルな構文になっています。 そして、構造がシンプルなため、自由な表現ができ、学べば多くの方が容易に書けるようになるというメリットがあります。 次回は、Sassとはなにか、について触れていきたいと思います。

この記事は『現場のプロから学ぶ CSSコーディングバイブル』の内容を引用し加筆しています。 今回の内容は、『現場のプロから学ぶ CSSコーディングバイブル』にてより詳しく解説しています。 ぜひ、お手にとってご覧ください！よろしくお願いいたします。 <img src="https://images.microcms-assets.io/assets/10d52a3beca042d7b3f4d76e3f7d99b1/78e3f36806f14b7596d8b49d3d131f57/css-book1-0-1.png" alt=""> 絶賛発売中です！ ただいま、ご購入いただいた方に、特典PDFをプレゼントするキャンペーンを実施しますのでぜひともチェックしてみてください。 <ul><li><a href="https://amzn.to/3AJCaOR" target="_blank" rel="noopener noreferrer">Amazonのリンク</a></li><li><a href="https://book.mynavi.jp/pcbook/blog/detail/id=124081" target="_blank" rel="noopener noreferrer">【キャンペーン情報】『現場のプロから学ぶ CSSコーディングバイブル』購入キャンペーン実施！</a></li></ul>

記事一覧