<p>なんだか「イレヴンティーワイ」と発音してしまいますが、正しくは「イレヴンティー」です。</p>
<h2>11tyとは</h2>
<p><a href="https://www.11ty.dev/">11ty</a>は、static site generator（静的サイトジェネレーター）のひとつです。<br>
テンプレートの言語として、.mdや.pug、.njkなどをサポートしています。</p>
<p>11tyに触って初めて.njkを知ったのですが、<a href="https://mozilla.github.io/nunjucks/">nunjucks（ナンジャックス）</a>はMozilla製のテンプレートエンジンです。<br>
MozillaというとブラウザのFirefoxがまっ先に浮かびますが、そのMozillaです。</p>
<h2>さっそく触ってみる</h2>
<p>今回はスターターとして<a href="https://github.com/11ty/eleventy-base-blog">eleventy-base-blog</a>を使います。<br>
スターターを使うのであれば、実はリポジトリをクローンした方が早いです。<br>
それで適宜設定変えてくかんじですね。</p>
<p>先にできあがったブログを載せておきます。<br>
<a href="https://murder-of-crows.now.sh/">https://murder-of-crows.now.sh/</a><br>
<a href="https://vercel.com/home">ZEIT Now</a>を使ってデプロイしました。<br>
スターターをあまりカスタマイズしてないです。</p>
<p>簡単に使い方を。<br>
11tyをインストールしたフォルダに移動して、</p>
<pre><code class="language-shell">$ npx @11ty/eleventy --serve
</code></pre>
<p>を実行します。<br>
これでファイルが適宜作成されて、http://localhost:8080/ でローカル環境が立ち上がります。<br>
監視対象のファイルが保存されるとlocalhostに反映されます。<br>
ちなみに止め方は Ctrl + C です（地味に止め方分からなくてエラー吐かれました……）。</p>
<h2>もう少し詳しく</h2>
<p>まだ環境整えただけくらいなので、またあらためてじっくり取り組んだ記事を書きたいと思います。</p>
<p>じっくり書いたその2が<a href="/2020/07/03">こちら</a>です。</p>


static site generatorのひとつである11tyでブログを作ってみました。

11tyで作る簡易ブログ

<p>ブログ記事の大移動が終わらない……。</p>
<h2>塔2020年5月号より</h2>
<p>乾びたるパンの姿に解のなき三角関数だらうか落ちてゐる<br>
（出奈津子）</p>
<p>この冬の胸の奥処に金いろの蜜をやしなふ　ふつりふつりと<br>
（山尾春美）</p>
<p>まだ少し話があつた　わが友はホームに入りぬ入り江近くの<br>
（俵田ミツル）</p>
<p>親友とぜんざいを食むこそ楽しけれ「ぞぞつ」とすすり「ふふつ」と笑ふ<br>
（木原樹庵）</p>
<p>「日本中の青空集めたような空」アナウンサーの声弾みいき<br>
（小澤京子）</p>
<p>花を摘む（きみが生まれた頃はもう恋をしていた）花を摘む、旅<br>
（中森舞）</p>
<p>さむいな、とわたしが思いヒーターのボタンを押したわたしのために<br>
（田宮智美）</p>
<p>どう出ても抗う決意　先端に黒曜石の瞳を据えて<br>
（白水裕子）</p>
<h3>1年経ちました</h3>
<p>去年の7月に6月号の引き写しをしたのが最初でした。<br>
意外と続くものです。これからも続ける予定です。</p>


塔2020年5月号から気になる歌を引きました。

塔2020年5月号を読む

<p>暑かったり寒かったり、適温の日が少ない気がします。<br>
勤続きっかり2年です。明日から3年目になります。</p>
<h2>マスキングテープを導入しました</h2>
<p>マステ沼に嵌ってしまった気がします。<br>
画像のように、どこに出すか特に決めてない短歌メモのページに貼りました。<br>
付箋より見栄えは良いかんじ。</p>
<p><img src="/assets/img_1340.jpg" alt="マステを貼ってみたノート郡" loading="lazy"></p>
<p>こうやって見ると、コンスタントに作ってるというより、まとめて作ってる感じがしますね……。</p>
<h2>8冊目が終了</h2>
<p>5月、短歌関係のメモが多かったので（新人賞用です）、月間使用ページは50ページを超えました。<br>
残りページが40ページをきってるので、6月から9冊目突入です。</p>
<h2>プロットも書いていきたい</h2>
<p>小説をまた書いているので、プロットきっちり書く前に、軽いメモをロイヒトトゥルム1917に書いておきたいと思う次第です。<br>
プロット書かないで見切り発車してしまうのはいい加減になんとかしたいところ。</p>
<p>そのために、メモを残すことくらいはしておいた方が良いと思うのです。<br>
メモも思い立ったら始められることが、バレットジャーナルのメリットのひとつだと思っていますので。</p>


2020年5月のわたしのバレットジャーナルを振り返ります。

2020年5月のバレットジャーナルを振り返る

<p>アルデバラン歌会でお会いしたことのある歌人さんの歌集です。</p>
<blockquote>
<p>硝煙のにおうことなき長雨に火を噴くように柘榴花咲く<br>
フロントガラス露にびっしょり濡れていてはがしたる桜紅葉一枚<br>
曼珠沙華は咲くのではなく爆ぜるのだ延々と土の湿る墓所まで</p>
<p><em>齋藤芳生『花の渦』</em></p>
</blockquote>
<p>綺麗に映像の見える歌が多い印象でした。<br>
来福ということばがありますが、また福島に行きたいものだなぁと思います。</p>
<p>（Amazonで歌集が発見できず……）</p>


齋藤芳生の第三歌集、『花の渦』を読みました。

『花の渦』を読む

<p>ここのところ月が変わってから読んでるので、もう少し余裕をもちたいですね……。</p>
<h2>塔2020年4月号より</h2>
<p>さざ波に光の粒子が跳ねてゐる海にあらたな楽生まれをり<br>
（入部英明）</p>
<p>わたくしは母の黒板日々よぎる遠く近くの痛みの記さる<br>
（佐原亜子）</p>
<p>自らの鼓動の音が全身に響きわたれり怒鳴られしとき<br>
（矢澤麻子）</p>
<p>声どろぼう　心どろぼう　きらきらと紫苑のいろに技術は光る<br>
（大森静佳）</p>
<p>電線にからまる白きレジ袋晴ればれとして今朝もはためく<br>
（髙野岬）</p>
<p>この水も深いのだろう冬空を映す明るい水面見ている<br>
（芦田美香）</p>
<p>いつもどこかで誰かが傷ついている世界　あの星もほらだれかの傷だよ<br>
（上澄眠）</p>
<p>「角部屋で日当たりが良く静かです」空芯菜を歯で潰す午後<br>
（森山緋紗）</p>
<p>ひとのものかわたしのものか分からない記憶を誰もが抱えて歩く<br>
（紫野春）</p>
<h3>そろそろ新人賞の締め切り第1波ですね</h3>
<p>5月になぜふたつもあるのか……。<br>
以前は6月だったじゃないか……と思う今日この頃です。</p>
<p>角川短歌賞が以前2月末締め切りだったと聞いたことがあるので、締め切りは不変ではないのだと思います。</p>


塔2020年4月号から気になる歌を引きました。

塔2020年4月号を読む

<p>在宅勤務n日目です。<br>
そろそろ腰が痛いので、わたしのYogibo早よ、ってかんじですね。</p>
<h2>あまりページを使わなかった月</h2>
<p>今月きっかり40ページです。<br>
使わなかった方と言えるでしょう。<br>
世の中激動の月でしたけどね。</p>
<p>また、別記事で書きたいと思っているのですが、これを導入しました。</p>
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="https://rcm-fe.amazon-adsystem.com/e/cm?ref=qf_sp_asin_til&t=ibitsuki01-22&m=amazon&o=9&p=8&l=as1&IS1=1&detail=1&asins=B07G1QFF9T&linkId=c9b5d285038bce5e9fbbccbf96d5bae2&bc1=000000&lt1=_blank&fc1=333333&lc1=0066c0&bg1=ffffff&f=ifr"></iframe>
<p>シールになっていて薄いので、ノートに貼り付けてもあまり違和感がないです。<br>
変なふうにページが分厚くなってしまうことはありません（多少は厚くなりますけど）。</p>
<h2>Python開発日記</h2>
<p>PythonでTwitterのbotを作りました。<br>
その時の記録をロディアNo.8に取り、ロディアのメモをロイヒトトゥルム1917に貼りました。<br>
見映えが派手にはなりませんが、こういうメモを貼りつけるのもいいかんじです。</p>
<p>肝心のTwitterのbotはこちら。<br>
<a href="https://twitter.com/ibitsuki_bot">https://twitter.com/ibitsuki_bot</a><br>
是非是非フォローよろしくお願いします。</p>
<h2>再来月まで記録できるかも？</h2>
<p>8冊目ですが、どうやら5月どころか6月まで記録できそうな気配が漂ってまいりました。<br>
ノートはきっちり使いたいので、このペースでいけるかどうか。</p>


2020年4月のバレットジャーナルの振り返り。

2020年4月のバレットジャーナルを振り返る

<p>まだ我が家に4月号は塔着してないので、ぎりぎりセーフです。<br>
言い訳が苦しいですね……。</p>
<h2>塔2020年3月号より</h2>
<p>羽根枕に耳をうづめて聴きてをり転調多き霜月の雨<br>
（栗木京子）</p>
<p>ふいに指冷たくなりて名を呼んだ声が届いていない予感に<br>
（江戸雪）</p>
<p>人魚にはなれないだろうかきらきらと夜のプールに泳ぐペディキュア<br>
（大森千里）</p>
<p>写されし二十歳のわれの瞳にはカメラ構へし父の影あり<br>
（入部英明）</p>
<p>まばたきはいくつかあってその度に黒い睫毛が一緒にうごく<br>
（宇梶晶子）</p>
<p>ふた親のともに死に目に会へざるを思ひて夜の爪を切りをり<br>
（潔ゆみこ）</p>
<p>正しくて真っ直ぐなみちのようにミシンの跡もこうでありたい<br>
（安倍光恵）</p>
<p>飲もうとした水をそなたも飲みたかったのかコップに溺れた虫の名知らず<br>
（宮本華）</p>
<p>空なれば重さ半ばの牛乳瓶積みて帰れば冬の日遅き<br>
（藤原明朗）</p>
<p>昏き月清けき月と顔を持つ月は気持ちのリトマス試験紙<br>
（みずおち豊）</p>
<p>運針はぎこちなけれど熱中しエプロンを縫ふ細き指先<br>
（新井蜜）</p>
<p>ライターが私の髪を燃やすのを君の視点で見ていたかった<br>
（多田なの）</p>
<p>歳月は蜂蜜色にかがやいて死のはうへ死のはうへわたしをはこぶ<br>
（千葉優作）</p>
<p>下手から出てきて上手へとはける間のおよそ二分の踊り<br>
（吉田恭大）</p>
<p>触れるたび遠く感じる液晶をいちまい隔てたひとのことばは<br>
（toron*）</p>
<h3>平易なことばで</h3>
<p>今月はわりとじっくり読めた方だと思います。<br>
しかし名前って難しいですね……。</p>


塔2020年3月号から気になる歌を引きました。

塔2020年3月号を読む

<p>ようやくレイアウトをfixさせました。<br>
自分でひねるよりも、記事の中身を充実させようと思った次第です。</p>
<h2>W3Layoutsとは</h2>
<p>無料のWebテンプレートを配布しているサイトです。<br>
名前からして<a href="https://www.w3.org/">W3C</a>と関係ありそうですが、あまり密接な関係はないっぽい……？ です。<br>
わたしの英語力の足りなさ加減よ……。</p>
<p>そんな<a href="https://w3layouts.com/">W3Layouts</a>のGatsbyJSのスターターを使って、このブログの外観は実装されました。</p>
<h2>コンタクトフォームどうしようか問題</h2>
<p><a href="https://www.netlify.com/">Netlify</a>のフォームも検討したのですが、先に書いたとおり、W3Layoutsのスターターを使ったので、コンタクトフォームはすでに実装されていました。<br>
わざわざ他のサービスに書き換えるのも手間だったこと、使い勝手を知りたくてFormsを使ってみることにしました。</p>
<h2>軽く手順</h2>
<p>コンタクトフォームのレイアウトはそのまま流用したので、あとは動かないと問題なわけです。<br>
テンプレを使ったので特に難しいことはなくて、</p>
<ul>
<li>Formsからドメインとメールアドレスを登録する</li>
<li>とんでくるメールの本文のとおり確認をクリックする</li>
<li>gatsby-config.jsのW3ldomkeyを書き換える</li>
</ul>
<p>くらいなものでした。<br>
ただ全部英語で日本語情報が少ないのが頼りないところでしょうか……。</p>
<p>そんなかんじで実装したコンタクトフォームですが、営業メールがさっそく１通きていますw<br>
英語勉強しなきゃなぁと痛感する内容でした。</p>


コンタクトフォームをどうするか迷って、W3CLayoutsのFormsを使いました。その使い方など。

W3LayoutsのFormsを使ってみる

<p>期末をなんとか乗り切りました。<br>
年度末は忙しいのです……わたしのからだはひとつしかありません……。</p>
<h2>8冊目に突入</h2>
<p>この3月に、バレットジャーナルのノートが8冊目に突入しました。<br>
ロイヒトトゥルム1917のポケットサイズ（A6）を使い続けて8冊目。<br>
今回もカラーは黒です。</p>
<p>あと半年もすれば記念すべき10冊目に入る……はず……。</p>
<h2>『メモの魔力』を読んだ、けれど……</h2>
<p>何かメモが増えるかと思ったら、そんなことはなかった、というのがわたしの所感。<br>
そもそもバレットジャーナルは「書くことも選別しようね」というところもあるので、スルーすべき記憶は記録しない、というのもひとつの手だと思います。</p>
<h2>年度も変わりますが</h2>
<p>4月のフォーマットも書きました。<br>
3月と同じく、マンスリーログ・睡眠ログ・月詠メモのみ。<br>
シンプルはやっぱり良いです。</p>
<p>さて、どこまで続くわたしのバレットジャーナル。</p>


2020年3月を通してのバレットジャーナル。

2020年3月のバレットジャーナルを振り返る

<p>また別の機会に書きますが、ペンネーム（誌上名）をそのうち変更します。</p>
<h2>塔2020年2月号より</h2>
<p>住んだのはあそこと指さす一〇二三号室に明かりの灯る<br>
（いわこし）</p>
<p>踝にストラップある赤い靴はいて出かける君に会う日は<br>
（谷口美生）</p>
<p>（言葉にするのを諦めて）（歌にするのも諦めた）（ただ街をゆく）<br>
（宮本背水）</p>
<h3>ごめんなさい今月駆け足でした</h3>
<p>もう少し丁寧に読みたいものです。</p>


塔2020年2月号から気になる歌を引きました。

塔2020年2月号を読む

<p>長らく留守にしてました。<br>
そしてまだ外観がそのままという。<br>
いい加減なんとかしたいところです……。</p>
<h2>Tailwind CSSとは</h2>
<p><a href="https://tailwindcss.com/">Tailwind CSS</a>とは、CSSフレームワークのひとつです。<br>
クラスのあてかたはこんなかんじ。</p>
<pre><code class="language-html">&#x3C;div class="container md:w-1/2">
  &#x3C;h1 class="text-gray-700">Hello,world!&#x3C;/h1>
&#x3C;/div>
</code></pre>
<p>md:はデバイス幅の指定です。</p>
<p>今回は<a href="https://www.gatsbyjs.org/">GatsbyJS</a>とSass（SCSS）を使う前提で進めます。<br>
GatsbyJSの導入に関しては、<a href="/20191206">こちら</a>をご覧ください。</p>
<h2>導入方法</h2>
<p>まずnpmから。</p>
<pre><code class="language-shell">$ npm install tailwindcss
$ npx tailwind init
$ npm install --save node-sass gatsby-plugin-sass
</code></pre>
<p>そしてgatsby-config.jsを編集します。</p>
<pre><code class="language-javascript">plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      postCssPlugins: [
        require("tailwindcss"),
        require("./tailwind.config.js"),
      ],
    },
  },
],
</code></pre>
<p>tailwind.config.jsは、$ npx tailwind initをした際に作成されています。<br>
リポジトリの直下におきましょう。</p>
<p>次に、scssファイルをひとつ作成します。<br>
場所はsrcの中が良いと思います。</p>
<pre><code class="language-css">@tailwind base;
@tailwind components;
@tailwind utilities;
</code></pre>
<p>すべてのページでこれを呼び出したいので、gatsby-browser.jsを編集します。</p>
<pre><code class="language-javascript">import "./src/style.scss"
</code></pre>
<p>そして、CSSフレームワークはそのままにしておくと重いので、圧縮します。</p>
<pre><code class="language-shell">$ npm i -S purgecss gatsby-plugin-purgecss
</code></pre>
<pre><code class="language-javascript">plugins: [
  // 注意：scssのプラグインより後に書いてください！
  {
    resolve: "gatsby-plugin-purgecss",
    options: {
      content: [
        require("path").join(
          process.cwd(),
          "src/**/!(*.d).{js,jsx,ts,tsx,md,mdx}"
        ),
      ],
      printRejected: true, // 圧縮した内容を表示するかどうか
      develop: false, // develop実行時に圧縮するか
      tailwind: true, // Tailwindを使うのでtrueで
      whitelist: ["emoji"], // ホワイトリスト、ここに書いたのは圧縮で消されない
    },
  },
]
</code></pre>
<p>これでbuildを実行すると（developをtrueにした場合はdevelopの時も）、圧縮されます。</p>
<h2>参考記事</h2>
<ul>
<li><a href="https://qiita.com/mmns/items/a6a8400cf9f5f2ce488f">Gatsby, TypeScript, Emotion, Tailwind, MDXでブログを作っている</a></li>
<li><a href="https://www.gatsbyjs.org/docs/tailwind-css/">Tailwind CSS</a></li>
</ul>


GatsbyJSでTailwind CSSを使ってスタイリングした記録。

Tailwind CSSを使ってみた

<p>塔に誌上名変更届を提出し、無事に受理されました。希屋の浦でいられるのもあと少しです。</p>
<h2>7冊目が終わる</h2>
<p>ロイヒトトゥルム1917のポケットサイズでも、7冊並ぶと壮観です。<br>
ついに7冊、使い切りました。</p>
<p>7冊めは本当にぎりぎりまで使って、残り2ページのところで2月が終わりました。<br>
1冊に4ヶ月入れるのはかなり厳しいことが判明しました。</p>
<h2>睡眠ログと月詠メモだけ</h2>
<p>マンスリーログのすぐ後ろに持ってきたのは睡眠ログ（だいたいの睡眠時間を記録している）と月詠（結社に出詠する毎月の歌稿）のメモだけでした。<br>
シンプルイズザベスト、特に問題は起きませんでした。</p>
<p>1行日記やら何やらいろいろ書いていたこともあったのですが、毎日つけるのは睡眠ログくらいで良いなと実感しました。</p>
<h2>8冊め。何が起きるだろう</h2>
<p>プライベートでは幸せな意味で忙しい（！）のですが、こんな本を買いました。</p>
<table border="0" cellpadding="0" cellspacing="0"><tr><td><div style="border:1px solid #95a5a6;border-radius:.75rem;background-color:#FFFFFF;width:504px;margin:0px;padding:5px;text-align:center;overflow:hidden;"><table><tr><td style="width:240px"><a href="https://hb.afl.rakuten.co.jp/ichiba/1beb9cc4.a4635811.1beb9cc5.77b1f3a0/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fhmvjapan%2F9409118%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"  ><img src="https://hbb.afl.rakuten.co.jp/hgb/1beb9cc4.a4635811.1beb9cc5.77b1f3a0/?me_id=1251035&item_id=17197125&m=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fhmvjapan%2Fcabinet%2F9410000%2F9409118.jpg%3F_ex%3D80x80&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fhmvjapan%2Fcabinet%2F9410000%2F9409118.jpg%3F_ex%3D240x240&s=240x240&t=picttext" border="0" style="margin:2px" alt="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]" title="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]"></a></td><td style="vertical-align:top;width:248px;"><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px;word-wrap:break-word"><a href="https://hb.afl.rakuten.co.jp/ichiba/1beb9cc4.a4635811.1beb9cc5.77b1f3a0/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fhmvjapan%2F9409118%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"  >メモの魔力 The Magic of Memo NewsPicks Book / 前田裕二 【本】</a><br><span >価格：1540円（税込、送料別)</span> <span style="color:#BBB">(2020/6/7時点)</span></p><div style="margin:10px;"><a href="https://hb.afl.rakuten.co.jp/ichiba/1beb9cc4.a4635811.1beb9cc5.77b1f3a0/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fhmvjapan%2F9409118%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"  ><img src="https://static.affiliate.rakuten.co.jp/makelink/rl.svg" style="float:left;max-height:27px;width:auto;margin-top:0"></a><a href="https://hb.afl.rakuten.co.jp/ichiba/1beb9cc4.a4635811.1beb9cc5.77b1f3a0/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fhmvjapan%2F9409118%2F%3Fscid%3Daf_pc_bbtn&m=%3Fscid%3Daf_pc_bbtn&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowfQ==" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"  ><div style="float:right;width:41%;height:27px;background-color:#bf0000;color:#fff !important;font-size:12px;font-weight:500;line-height:27px;margin-left:1px;padding: 0 12px;border-radius:16px;cursor:pointer;text-align:center;">楽天で購入</div></a></div></td></tr></table></div><br><p style="color:#000000;font-size:12px;line-height:1.4em;margin:5px;word-wrap:break-word"></p></td></tr></table>
<p>さて、バレットジャーナルはどうなるでしょう……。</p>


2020年2月のバレットジャーナルの気付きなど。