trial-and-spiral - Tumblr blog

trial-and-spiral · 5 years ago

Text

僕のReleaseNote[0.38.6] & 僕のRoadMap[0.38.7]

3月もお疲れさまでした。いつもどおり振り返りと次の目標決めをやっていきます。

僕のRelease Note[0.38.6] - 2020-03

まずは先月Roadmap OKRの振り返りから。

Roadmap OKR

目的：自分を効果的に扱えるようにしてパフォーマンスを上げる

✅目標：insightのワークブックをやって自己認識を強化した #再挑戦

✅目標：友人や周囲の人に自分がどう見えてるか尋ねた #再挑戦

目的：技術力を上げて高い生産性と自己肯定感を持つ

❌目標：技術的なことor英語の自発的な勉強を1日1時間以上、週5日以上習慣的に行う

insight、以前に書評しましたがあの本の真価はこのワークブックでした。読みにくい本文より、数倍効果があった気がします。僕を良く知る友人兼以前の上司を含め仲の良い数人に僕の印象を聞いてみました。イメージとしてはマジメで優しい人らしいです。良くないところを半ば無理くり聞いたところ、もっと思い切っやったりどっしりしてたほうが良いという意見でした。なるほど。おおむね好意的な意見ばかりでありがたくもありましたが、物足りなくもありました。でも自己肯定感が少しだけアップした良しとしましょう。

そして勉強。こちらは全く。最初はやったものの続かず。いろいろといっぱいいっぱいなのに時間も精神的余裕も生み出せず破綻しました。こんな折だし元来ネガティブめな自分と上手くつきあっていくべきだと思いなおして、ゲームしたり、晩酌しながら小説読んだりリフレッシュするように舵をきりなおしました。とても良かったので今後は遊びすぎず、自分を追いつめすぎず、上手くバランスとっていきたいと思いました。

出来事/体験

新型コロナウィルス感染症（COVID-19）感染爆発重大局面

食洗機が故障して修理した（2年ぶり2回目）

左耳の違和感、耳鼻科へ

ボドゲ整理しました

コロナウィルスが猛威をふるい、以前リモートワーク継続中です。時間の自由度はあるものの、気持ちの切りかえ、特に業務終了から家庭に戻るのが上手くないようで気をつけなきゃな、と思いました。

食洗機が壊れました。2年ぶりで2回目。普通はそんな壊れないそうな。でも修理対応早かったのでOK。一瞬買い替えも検討したけど新規は高いし、今のものでも十分なので継続。ちなみに修理代は1万5000円も行かないぐらい。原因は熱センサーらしい。こいつのおかげで確実に世間で良く聞く食器どっちが洗う問題とか面倒でシンクにたまる問題が全く発生してないので、それも考えるとすごいコスパ。

左耳が詰まったよう��感覚があって、寝て起きてもとれなかったので耳鼻科へ。耳は時間との勝負なのと、以前同じ左耳の鼓膜を破っていて難聴になりかけたので。結果は聴力の低下はあるものの酷くないみたいなので突発性難聴に効くステロイドではなく軽めの薬で。1週間後再度行ったら全体的に聴力が回復してたので、しばらく薬を継続することに。ちなみにゼリーの薬がマズい。久々に良い感じの先生と巡り合った。

ムスメちゃんがいよいよ動きまわりだしたので誤飲警戒の目的と以前から整理したいと思っていたので、所有ボドゲを物理的に整理しつつ、デジタルなシートにデータとして記録してみました。積んでるのもあるので誰かとやりたいと思いつつもこの状況では難しそう。でも見ためにも気持ち的にもスッキリしたので良し！

習慣

家の作業環境もスタンディングデスクにした #継続中

ちゃんとやるポモドーロテクニック #新規

朝食は納豆卵おくらめかぶわかめ + 夕食は腹八分目 #新規

花金チートデーをめいっぱい楽しむ #新規

職場でスタンディングデスクを使っていましたが、リモートワークになって、椅子でやっていたところ腰が痛くなったので家もスタンディングデスクにしちゃいました。

作業の進めかたとしてポモドーロテクニックがあり、自分でアプリを作るほどでしたが、じゃあちゃんと実践できているかといえばできてませでした。いつも一日の途中でなあなあになってしまっていたのですが、ちゃんと向きあって、どうすれば継続できるか、が阻害しているかを探りつつ、本当に効果的なのかも含めちゃんとポモドーロテクニックをやってみます。

リングフィットアドベンチャーを週5以上で3か月続いたので、これからも続けていきますが習慣チャレンジからは除外します。朝食が一日の血糖値の上がりかたを決めるらしく、大豆と海藻がいいらしいのでこれまでグラノーラだったのを納豆+卵+オクラ+めかぶ+ワカメを混ぜたものにしてみます。また体重が減っていかないので夕食は腹八分目にしていきます。寝てる間の内臓の負担も軽減できるし朝良い感じにお腹減るし、こちらも良い感じ。

最近いろいろ詰めてたらストレス値が高まったので、意識的に楽しむことにしました。これまで金曜とチートデーとし、ビール飲みトレーニングを休んで良い日としてきました。それをビール飲み飲みスナック菓子を食べつつ好きなこと（小説読む、ゲームする）とかをします。楽しい！

装備、環境

机に置くスタンディングデスク用の台を購入

上にも書きましたが、こちら

もちろん電動には劣りますが、手でも十分上げ下げできるし、安定感もまずまずです。そんなに��価じゃないので良い買い物でした。ただもともと使ってるディスプレイが大きすぎ（32inch）たのがちょっと問題。アームが重さに耐えきれなかったりしてるので、大きすぎましたね……。とにかくスタンディング環境は良いぞ。

僕のRoadMap[0.38.7] - 2020-04

4月の挑戦目標を目的を添えて。今回はOKR的なものを変えます。

目的：個人開発で楽しみながら技術力も上げよう

□ 目標：Pentazeminという以前作ったポモドロタイマーアプリのv2の設計を完了した

□ 目標：ポモドーロの継続のための要件を探るためまず毎日仕事をポモドーロベースでやってみた

□ 目標：ポモドーロ本を読了した

目的：

□ 目標：週3以上で朝ストレッチとウォーミングアップを継続できた

□ 目標：週3以上で夜ストレッチを継続できた

リモートワーク主体になって働き方を考えたとき、ポモドーロテクニックをちゃんとやってみようと思いました。同時に以前に作ったPentazeminというポモドロアプリをリニューアルするネタがいろいろあったと個人開発の機運が高まってきたので本腰入れてやっていこうと思います。その中で技術力も上げていきたいなぁ。

他には、まず3か月リングフィットアドベンチャーが続いたので、それはモニタ対象からは外しますが続けていきます。同時に再び柔らかい体を取り戻すため、ストレッチを続けていきます。夜だけでなく最近は家で仕事前に軽い筋トレをしてストレッチをすると体が起きてきてとても良いのでまずはこちらも無理のない範囲で進めていきます。

世間が暗い話題に包まれてるからこそ、楽しくやる戦略でがんばります。今月も一歩一歩。

from Trial and Spiral https://blog.solunita.net/posts/my-release-note-0-38-6/

2 notes · View notes

trial-and-spiral · 5 years ago

Text

Qiitaが残念仕様になってやはりアウトプットは自分でブログシステム運用するに限るな、と改めて実感。サービスに依存するとろくなことない。

0 notes

trial-and-spiral · 5 years ago

Text

Gridsomeでイチからブログを作る - RSSを配信する

Gridsomeでブログを作るシリーズ。今回はビルド時にRSSを配信する機能を追加します。RSSを使う理由と、良い感じに配信する方法も合わせてみていきます。

RSS is何？

RSS（バージョンによってRich Site Summary, RDF Site Summary, Really Simple Syndication）は、ニュースやブログなど各種のウェブサイトの更新情報を配信するための文書フォーマットの総称である。 RSS - Wikipedia

要はブログの更新情報を配信する仕組みです。フィード、とも呼ばれます。特筆すべきは、もともとはRSSリーダーのような専用リーダーで購読（サブスクリプション）されるのを想定して配信されていました。

なぜいまだにRSSを使うのか

最近ではRSSリーダーで読む行為自体は下火になってきた印象です。RSSリーダーのような専用アプリケーション（またはWebアプリ）を使わず、TwitterやSlackでブログの更新情報を取得してる人も少なくない印象をうけます。

しかしながら、そのSlackやTwitterに流すもとを辿ればやはりRSSであることが多く、RSSで配信することはいまだに有効です。他にも、IFTTなどと連携し、ブログ更新→RSS配信→IFTT→自分のTwitterで更新を投稿、のような自動化もできます。

GridsomeでRSSを配信する

基本的にはプラグインを入れて、設定をするだけなので簡単です。GridsomeのRSS配信プラグインはいくつかありますが、今回はgridsome-plugin-feed - Gridsomeを使います。

$ yarn add gridsome-plugin-feed

オフィシャルの説明にあるように、基本的な使い方はgridsome.config.jsに設定を加えるだけです。基本的にはデフォルト設定どおりで問題ありません。ちなみにこのgridsome-plugin-feedは内部的にfeed - npmを使っているようです。

それでは前回までの設定を踏襲して見てみましょう

module.exports = { plugins: [ { use: 'gridsome-plugin-feed', options: { // 必須: 記事用のGraphQLスキーマタイプ, VueRemarkのoptions.typeNameと同一です contentTypes: ['Post'], // オプショナル: `Feed()` コンストラクタ用設定 // 設定可能なプロパティは https://www.npmjs.com/package/feed#example を参�� feedOptions: { title: '俺のつくったすごいブログのフィード', description: '最高のブログフィード' }, // === 以下は全てデフォルト値があります === // オプショナル: フィードの配信URLと配信形式 rss: { enabled: true, output: '/feed.xml' }, atom: { enabled: false, output: '/feed.atom' }, json: { enabled: false, output: '/feed.json' }, // オプショナル: フィードの配信記事数 maxItems: 25, // オプショナル: 相対パスのリンクを絶対パスに変更する対象 // 無効化するには `null` をセットします。 htmlFields: ['description', 'content'], // オプショナル: siteURLの末尾スラッシュで終わるようにするか否か enforceTrailingSlashes: false, // オプショナル: フィルタ。trueのものがフィード対象となります。 // 例: 過去記事のみにする場合: `filterNodes: (node) => node.date <= new Date()` filterNodes: (node) => true, // オプショナル: `Feed.addItem()`を利用して内容の変更 // 設定可能なプロパティは https://www.npmjs.com/package/feed#example を参照 // NOTE: `date` field は Javascript の `Date` object であること nodeToFeedItem: (node) => ({ title: node.title, date: node.date || node.fields.date, content: node.content }) } } ] }

このようになっています。デフォルト値が一般的なものとしてカバーしているので、オプショナルな項目にあまり手をいれなくても問題ないことが多いと思います。

なお、このプラグインはdevelop時にはRSSの生成は行なわず、build時にのみ生成するようです。つまり、実際に生成されるRSSを見たい場合は一度buildしてみると良いでしょう。

全文を配信したくない場合

例えばフィードに全文を含めてしまうと、RSSリーダー上で全文が確認できてしまい、自サイトへの流入が減る懸念もあることでしょう。デフォルトの設定だとcontent全てを配信するため、全文を配信してしまいます。ちょっとこの設定を変えてみましょう。

案1. descriptionを配信する

frontmatter側で記事のdescriptionを別途設定している場合、contentの変わりにdescriptionを配信するようにできますね。具体的には、記事側のmarkdownファイルで

--- title: 最初の記事 description: 最初の記事なんです cover_image: ogp.jpg --- これは私の最初の記事です

のようにfrontmatterでdescriptionを設定します。

そして、先程のプラグインの設定で

module.exports = { plugins: [ { use: 'gridsome-plugin-feed', options: { // 中略... nodeToFeedItem: (node) => ({ title: node.title, date: node.date || node.fields.date, content: node.description // ここをdescriptionにする }) } } ] }

こうすることでRSSのcontentに入るのはdescriptionになりますね。

案2. 本文の文字数を制限する

gridsome.config.jsはJavaScriptのファイルなのでもちろん内部でJavaScriptを使うことができます。指定した文字数以下ならそのまま、以上なら文字数でカットして三点リーダーを末尾に付与する関数を作って使ってみましょう。

// 文字列を操作する関数を定義 function toFeed(content) { const MAX_LENGTH = 140 if (content.length <= MAX_LENGTH) { return content } return `${content.substr(0, MAX_LENGTH)}…` } module.exports = { plugins: [ { use: 'gridsome-plugin-feed', options: { // 中略... nodeToFeedItem: (node) => ({ title: node.title, date: node.date || node.fields.date, content: toFeed(node.content) // 定義した関数を使う }) } } ] }

余談

なお、個人的にはRSSは全文配信したい派なのでこれは使っていません。そもそも情報を使えるよりも自サイトへの訪問を重視するケースは広告を見せたいか、来た人がそのままブログに留まって回遊（他の記事を見る行動）をして欲しいケースだと思っています。

RSSリーダーを使うようなリテラシを持つ人はそもそも広告へアクセスしないですし、そもそもブログのデザインよりRSSリーダーのようなデザインや情報を絞った状態で読みたい人と仮定しています。回遊も同じく、他の記事も気になるなら全文配信しようとも来ると仮定しています。

その場合において、全文を配信しないとわざわざサイトに訪れる必要がありBad UXから印象がわるくなると思っているため、RSSには全文を配信したい派です。（個人の見解です）

RSSにHTMLを含める

RSSリーダーのほとんどは文中のHTMLタグを解釈してくれます。特に強調やコードブロックなどはRSSリーダー上で見ても指定して解釈されているほうが都合がいいことが多いです。

VueRemarkを使って記事を書いている場合、node.contentにはmarkdownの本文がそのまま入っています。これをHTML化してRSSとして配信したいと思います。

まず、別途Remarkを入れます

$ yarn add remark

その他にもremark-htmlが必要ですが、これはVueRemarkを入れていれば依存ライブラリなので入っているはずです。あとは上で挙げた文字列カットと同じような方法でやればOKです。具体的に見てみましょう

// 必要なライブラリを読み込み const remark = require(`remark`) const html = require(`remark-html`) // markdownをHTML化する関数を定義 function markdownToHtml(content) { let result remark() .use(html) .process(content, (err, file) => { if (err) throw err result = file.contents }) return result } module.exports = { plugins: [ { use: 'gridsome-plugin-feed', options: { // 中略... nodeToFeedItem: (node) => ({ title: node.title, date: node.date || node.fields.date, content: markdownToHtml(node.content) // 定義した関数を使う }) } } ] }

これでmarkdownで書かれたcontentがHTML化して配信されます。特に画像などをRSSでも載せたい場合にはこの方法が良いですね！

まとめ

今回はRSSを生成、配信する方法を応用を交えて紹介してみました。どうしてもpluginで対応している限界もありますが、更新通知し、RSSリーダーで読ませるには十分かと思います。ブログサービスなどではここまで手を入れられないことが多いので、自分で楽にカスタムできるのはとてもいいですね。

pluginに渡す値を加工する方法は別のpluginの利用時にも応用できます。だんだんとブログに必要な機能が充実してきましたね。次回もまたこの調子で必要な機能を追加していきましょう。

from Trial and Spiral https://blog.solunita.net/posts/develop-blog-by-gridsome-from-scratch-publish-rss/

0 notes

trial-and-spiral · 5 years ago

Text

Gridsomeでイチからブログを作る - metaタグやOGPを最適化する

前回、ようやく記事を書けるようになりました。一応ブログの形にはなりましたが、まだまだ機能として不十分です。これから少しづつ機能追加していきます。今回は検索やTwitterなどのシェア時に役立つmetadata(metaタグ）をカスタマイズしていきます。

import SeriesGridsomeFromScrach from '../series/SeriesGridsomeFromScrach.vue'

metaタグis何？

metaタグとはHTMLのヘッダー部分に記述される<meta>というタグをさし、サイトやページの言語や説明、カバー画像などを指定します。本来はmetadataと称されるべきかもしれませんが、一般的にmetaタグと呼ばれているようです。検索サイトではこの情報をもとに説明を表示したり、SNSでリンクがシェアされた場合もこの情報を参照します。OGPと呼ばれるものもこのメタタグの一種です。

つまり検索流入やシェアされたリンクからの流入を期待するならば必須になってくる設定です。

一般的によく使うmetadata

metadataはサイトを表示するために必ずしも必須ではありません。特にTwitterやFacebook用のOGP設定はなくても表示にはなんら影響しません。ここでは一般的に良く使うものをサラっと紹介します。

一般的なもの

OGP

Twitter

こんな感じのタグが良く使われます（cotentに指する値は変動するのでここでは空にしています）。

見てわかるように、どのページなのかによって変わるもの（ページに依存する情報）と変わらないもの（サイトに依存する情報）があります。つまり、場合によっては値を動的に変化させる必要があります。

Gridsomeでmetadataを扱う

Gridsomeではmetadataを2つの方法、3箇所で設定する方法があります。

main.jsで設定

App.vueで設定

ページテンプレート用コンポーネントで設定

公式にはPopulating <head> - Gridsomeで解説されており、App.vueでの設定は、Overriding App.vue - Gridsomeで解説されています。

なお、metadata含むhead情報の指定はGridsomeでは内部的にvue-metaというライブラリを使っています。詳細な使いかたはそちらも合わせてみてみると良いでしょう。

この3種類の使いわけですが、

main.js: サイトに依存し、ページが変わっても変化しないもの

App.vue: ページに依存し、Index時の設定またはデフォルト値の指定

ページテンプレート：ページに依存するもの

を意識してみると良いでしょう。

main.jsで設定する

main.jsでの指定は少し特殊です。公式ではこんなコードになっています。

export default function (Vue, { head }) { // Add inline CSS head.style.push({ type: 'text/css', cssText: '.some-custom-css {color: red}' }) // Add an external CSS file head.link.push({ rel: 'stylesheet', href: 'https://some-server.com/external-styleheet.css' }) // Add an external Javascript before the closing </body> tag head.script.push({ src: 'https://some-server.com/external-script.js', body: true }) // Add a meta tag head.meta.push({ name: 'keywords', content: 'HTML,CSS,XML,JavaScript' }) }

第二引数のオブジェクトの中にheadを取り、head.{タグ}の配列に対してpushメソッドで追加していく設定方法ですね。今回はメタタグの話ですが、もちろんメタタグ以外のscriptやlinkも同じように指定できます。

ここの情報はサイト全体で指定するものにしておくのがオススメです。しかし、後述するApp.vueでの指定と実質同じなので無理にこちらで設定する必要もありません。

App.vueで設定する

App.vue自体は必須の要素ではありませんが、使うようにしておくほうがなにかと便利です。

metadataの指定ができる（今回の話）

Layoutに左右されない共通要素の指定ができる

まず、簡単に見てみるとこんな感じになります

<template> <router-view /> </template> <script> export default { metaInfo() { return { meta: [ { property: `og:locale`, content: `ja_JP` }, { key: `og:type`, property: `og:type`, content: `website` }, { key: `og:site_name`, property: `og:site_name`, content: `my site`, }, { key: `og:title`, property: `og:title`, content: `Home | my site`, }, ] } } } </script>

Vue.jsのSFCのscript要素の中でmetaInfoというメソッドが使えます。ここに記述していくことになります。この時、ページによって変更されるものはkeyを指定します。これは元のvue-metaでのhid要素と同一です。子コンポーネント側で同一keyの指定があった場合、子コンポーネントの指定でオーバーライドします。

つまり子コンポーネント側で指定がない場合はここで指定した値が使われます。指定がある場合、子コンポーネントの指定（=ページごとの指定）となります。デフォルトの設定と考えると良いでしょう。

しかし、ここで要素をベタ書きにするのはイマイチなアプローチです。実はgridsome.config.jsで指定した内容はクエリのmetadata要素で取得できます。このApp.vueではサイトの設定もしくはデフォルト設定として使うので、内容はconfigを参照することで設定を1箇所にまとめられます。

例えばgridsome.config.jsを

module.exports = { siteName: `My Site`, titleTemplate: `%s | My Site`, siteUrl: `https://my_site.example.com`, siteDescription: `僕のすごいサイト`, metadata: { siteOgImage: `ogp.png`, } }

のように指定して、App.vueを

<template> <router-view /> </template> <static-query> query { metadata { siteName siteDescription siteUrl siteOgImage } } </static-query> <script> export default { metaInfo() { return { link: [ { key: `canonical`, rel: `canonical`, href: this.$static.metadata.siteUrl }, ], meta: [ { key: `og:locale`, property: `og:locale`, content: `ja_JP` }, { key: `og:type`, property: `og:type`, content: `website` }, { key: `og:url`, property: `og:url`, content: this.$static.metadata.siteUrl, }, { key: `og:site_name`, property: `og:site_name`, content: this.$static.metadata.siteName, }, { key: `og:image`, property: `og:image`, content: this.$static.metadata.siteOgImage, }, ] } } } </script>

のような感じです。

このようにStatic-Queryで取得したデータをmetaInfoで使うようにします。なお、gridsome.config.jsではmetadataとして取得できる情報はいく��かのものに決まっています。それ以外にカスタムした任意の要素を増やす場合は、metadataの中で任意のkey-valueを指定するとmetadataクエリに載せることができます。もしくはgridsome.server.jsのほうでaddMetadataメソッドを使っても可能です。

ページコンポーネントで設定する

ページコンポーネントは例えばpages/やtemplates/の中にあるコンポーネントファイルです。例えば前回まで作ってきたブログの場合、1ページはtemplates/Post.vueがページ用のコンポーネントになります。

この1記事を表示するとき、タイトルやURLなどはサイト全体のものではなく、ページ用のものがふさわしいはずです。App.vueでkeyを指定したものは同じkeyを使うことで子コンポーネント（=ページコンポーネント）側のものが優先されるようにオーバーライドされます。

簡単にPost.vueを見てみましょう。

<template> <article> <h1></h1> <VueRemarkContent /> </article> </template> <page-query> query Post ($id: ID!) { post (id: $id) { title content path } metadata { siteName siteUrl } } </page-query> <script> export default { metaInfo() { return { title: this.$page.post.title, link: [ { key: `canonical`, rel: `canonical`, href: this.$page.metadata.siteUrl + this.$page.post.path, }, ], meta: [ { key: `og:type`, property: `og:type`, content: `article` }, { key: `og:url`, property: `og:url`, content: this.$page.metadata.siteUrl + this.$page.post.path, }, { key: `og:title`, property: `og:title`, content: `${this.$page.post.title} | ${this.$page.metadata.siteName}`, }, ] } } } </script>

先程のStatic-QueryのようにPage-Queryで取得した値ももちろん使えるため、それらを組み合わせていきます。ここで指定しないものは親であるApp.vueのものが使われますので、こちらではオーバーライドするものだけを指定します。

画像を指定する際の注意点

これはmetadataの指定に限ったことではないのですが、ogp:imageやtwitter:imageのように画像を扱うことが多いので触れておきます。

Gridsomeでは、画像の置き場所として2箇所候補があります。 1. /static/ 2. /src/assets/

結論から言えば、基本的に画像は2のアセット用のディレクトリに置くべきでし��う。

/staticディレクトリは、ビルドされるとビルドディレクトリのトップにそのまま置かれます。assets内のものは、assetsとして処理されファイル名にダイジェストが追加されて配置されます。このassetsの仕組みは他のフレームワークで見られるものと同様のものです。

なぜassetsにダイジェスが付与されるかというと、簡単に言えばファイルが更新されたときに適切に表示するためです。ブラウザはファイル名がそのままの場合キャッシュを優先的に使うことがあります。その場合、サイトを更新したにもかかわらずユーザーは古いデータを表示しつづけてしまうことがあります。これを防ぐためにキャッシュを使わせない仕組みとしてダイジェストを付与しています。

そのため、/src/assets/内に置いたファイルはただファイルを指定しただけだとGridsomeは表示できません。それを解決するためにasset-loaderを使います（asset-loaderはGridsomeに組み込まれているので別途ライブラリのインストールなどは必要ありません）。

asset-loaderを使う

今回は画像を扱うのは/src/assets/images/というディレクトリで扱うことにします。

まず、girdsome.config.jsに

module.exports = { // 中略 chainWebpack(config) { config.resolve.alias.set(`@images`, `@/assets/images`) }, }

と追加して、エイリアスを張ります。これで/src/assets/images/ディレクトリには@imagesでアクセス可能なようパスが解決されるようになります。

あとは使うときに require('!!assets-loader!@images/{ファイル名}').srcのように書きます。 assets-loaderから返るのはオブジェクトで、srcに実際のパスが入っているため最後に.srcをつけて取り出しています（なおここでは詳しくassets-loaderについては触れません）。

assetsに置いた画像をOGPで扱う

これをOGP画像指定にも応用してみます。

まずは/src/assets/images/ogp.jpgとして何か適当に画像を配置してみます。

次に前回追加してみたブログ記事のfrontmatterに画像を追加してみましょう。前回までの流れで/src/contents/posts/my-first-article.mdがあるはずなので、そこにcover_imageとして追記します（ちなみにcover_imageは任意のキー名に変えても問題ありません）。

--- title: 最初の記事 cover_image: ogp.jpg --- これは私の最初の記事です

そして、ページコンポーネントの/src/templats/Post.vueに追記します。

<template>  </template> <page-query> query Post ($id: ID!) { post (id: $id) { title content path cover_image } metadata { siteName siteUrl } } </page-query> <script> export default { metaInfo() { return { meta: [ // 中略 { key: `og:image`, property: `og:image`, content: this.$page.metadata.siteUrl + require(`!!assets-loader!@images/${this.$page.post.cover_image}`).src }, ] } } } </script>

こんな感じです。og:imageは絶対パスである必要があるので、siteUrlと組み合わせて絶対パスにしています。このassets-loaderを使う方は公式ドキュメントに言及がないので注意してください。

GridsomeのリポジトリのIssueのg-images with dynamic paths not correctly generating full feature set · Issue #292 · gridsome/gridsomeまたはGridsome g-images with dynamic paths - DEV Community 👩‍💻👨‍💻の記事などが参考になります。

まとめ

今回はブログとしても大切なメタタグについて設定してみました。vue-metaが良くできているのでそれにのっかていてとても簡単に実装できます。また、Gridsomeはgenerateする前提なのでSSRとかSSRしないとか悩む必要もなく、設定さえしておけば問題なく処理されるので楽でいいですね。

次回移行も「ブログ」としてまずはこれは必要だろう、という機能を優先的にどんどん強化していきます。

from Trial and Spiral https://blog.solunita.net/posts/develop-blog-by-gridsome-from-scrach-dynamic-metadata/

0 notes

trial-and-spiral · 5 years ago

Text

今日は久々の物理出社

0 notes

trial-and-spiral · 5 years ago

Text

ブログリニューアルは式年遷宮 - ブログをVuePressからGridsomeに変えました

VuePressも悪くはないものの、高速に表示できることは1つの価値であるので、Gatsbyインスパイアで高速化にも力を入れているGridsome移行しました。

今回移行するにあたって全面的にHTML,CSSも書きなおしたりもしました。それによって良い知見がありました。昔からブログを書いていて、もう何度目かわからないほどリニューアルをしてきています。その度に知見が増えるので、式年遷宮みたいだなぁと思った話です。

概要

VuePressからGridsomeにブログのフレームワークを変えました

その際にHTMLやCSSも含めてフルリニューアルしました

結果としてフロントエンド回りの知識がアップデートされました

式年遷宮is何？

神宮式年遷宮（じんぐうしきねんせんぐう）は、神宮（伊勢神宮）において行われる式年遷宮（定期的に行われる遷宮）のことである。原則として20年ごとに、内宮（皇大神宮）・外宮（豊受大神宮）の二つの正宮の正殿、14の別宮の全ての社殿を造り替えて神座を遷す。このとき、宝殿外幣殿、鳥居、御垣、御饌殿など計65棟の殿舎のほか、714種1576点の御装束神宝（装束や須賀利御太刀等の神宝）、宇治橋なども造り替えられる。

早い話、伊勢神宮では20年に一度建物を造り替えます。という話。実は建物が瑞々しく美しくなる、ということだけでなく、その裏では宮大工さん達の技術継承の場として一役かっているとか。

話を自分に戻すと、古くはiBlogの時代からブログテーマはいつも僕は自分で作ってきました。そしてブログシステムを変えたり、タイトルも変えたり、同時にテーマを作りかえるようなリニューアルを何度か行なってきました。その度にCSSを学んだり、HTMLを理解しなおしたり。エンジニアでなかったころから自分のフロントエンド知識のアップデートの場を担ってきました。

エンジニアになった今でもそれは例外ではなく、今回もまた色々と知見が増えたことを実感しました。リニューアルの度に学び直し、技術知識のアップデートが発生することがまるで式年遷宮みたいだなぁと思った次第です。

今回のリニューアルの動機

主な動機は表示までの（体感的な）高速化、サイドバーの拡張です。

以前までのVuePressとGridsomeの間に開発者体験には大きな差はありません。Vue.jsのシングルファイルコンポーネントを効果的に使うことで、非常にサイトは作りやすいです。

一方で、VuePressもまだ若いプロジェクトです。Gridsomeも同じくまだ若いプロジェクトではありますが、Gatsby.jsのノウハウを積極的に取り入れることで完成度はかなり高まってきています。そして一番の気掛かりは表示スピードです。VuePressの時にはページを表示し読めるようになるまでかなり時間がかかることがありました。高速化のノウハウとブログとしての運用面を考えるとGridsomeに軍配があがります。

また同時にもともとはシングルカラムビューを意識して作っていましたが、ブログの効果を正しく発揮するために回遊率を上げるためのサイドバーが必要だとも感じていました。

リニューアルでやったこと

Gridsomeには��ターターと呼ばれるテンプレートがありますが、使わずイチから作りました。これは意図しない不要な依存を避けるためです。また、スターターで開始するとスターターに持たされた機能の意図を読んだり、アップデート状況もチェックしていく必要があるためプレーンな状態で作ることを決めました。

移行前はVuePressなのでディレクトリ構成やデータの扱いさえ直せばそう多くない修正で��行できるだろうと考えました。しかし今回はHTML,CSS含めてイチから書きなおすことにしました。1つは前述のとおりサイドバーなど一部大きく変更する必要があったため、もう1つは以前書いたコードことを忘れていたので読んで理解し修正をするよりイチから書いたほうが結果的に楽と判断したためです。

そして、Gridsomeの特徴的な組み込み機能であるg-imageなどを積極的に活用しました。それとともに以前持っていた関連記事の表示やサイト内検索を自分で実装しなおしました。

今回のリニューアルでついた知見

HTMLのW3Cで策定されているセマンティックなHTMLを再確認

以前から意識していたのでそう大きく認識を改めることはなかったんですが、あらためて再確認の場となりました。意外にも本来の意図を意識したセマンティックなHTMLを書くことは蔑ろにされがちです。特にサーバーサイドエンジニアが片手間でフロントエンドまで見るときはその傾向は顕著になります。

また、HTMLのタグが持つ意味、正しい使いかたの定義は変わることもあります。これを含めて今回再考、再確認する良い場になりました。合言葉は「divタグはフォールバック」。

CSSの知識をアップデート

前回のリニューアルのタイミングより時が進んだことにより、CSS Grid Layoutが実用的なサポート範囲になったと判断して本格的に使ってみました。他にはposition: stickyも使ってみました。またファーストビューでいかに正確に読みやすいようレンダリングされるか苦心しました。およそ理解してると思っていたCSSもまだまだ学ぶべきがことがあって楽しかったです。 CSS自体の仕様は変わらずとも、ブラウザの対応状況に変化があるので時間経過だけでベストプラクティスは変わるのが興味深いですね。

VueのCompositionAPIの知見がついた

Vue.jsはv3へのバージョンアップを控えており、v3ではCompositionAPIという書き方に対応されます。今までの書き方も変わらず使えますがTypeScriptとの親和性も含め今後ゆるやかに移行していくと予想されます。v2の現在でもこのCompositionAPIを使う方法があり、今回せっかくの機会な触れてみました。

Gridsomeの場合はフレームワークの機能としてGraphQLのクエリ結果をコンポーネントのcomputedに格納する仕組みがあります。これがCompositionAPIとの親和性が低いため全体的、本格的なCompositionAPIメインで使うことは叶いませんでしたがキャッチアップする機会となりました。

Gridsomeの知見、GraphQLの知見がついた

Gridsomeは内部的にGraphQLを使ってページごとのデータを扱う仕組みです。そのため本格的とまでは行かずともGraphQLを触れていく必要があります。今までGraphQLに触れてこなかった僕には良い機会となりました。そしてGridsomeがどう上手くVue.jsとVue.jsのエコシステムを上手く使ってるかに触れることができました。

追加機能開発でいろいろ触れられた

今回、全文検索を実装するにあたって日本語形態素解析ライブラリのkuromoji.jsを使いました。形態素解析をやってみたのは初めてですが、いろんな応用が効く技術ですね。その他にも関連記事機能や、人気記事をどう実装するか考えたりやることは尽きません。いろんな技術にまずは軽く触れる機会としてブログ開発は1つの良い土台になりえるのかもしれません。

逆に期待と違ったこと

作りなおしで思いのほか時間がかかりました。とはいえ修正よりも楽しくできたので心理的には良かったですが、ちょっと大変でした。

なかでも1つのボトルネックになったのはGraphQLの知識です。まったく触ってないところからのスタートだったので、約束事もわからずなにをどうして良いか掴むのに時間がかかりました。今はある程度わかりましたが、自分で機能を開発するにあたって単純にクエリを書く以外の知見も求められなかなか大変です。

そしてGridsomeにはプラグイン機能があります。公開する、しないはともかく追加機能はプラグイン形式にのっとって作るべきでしょう。が、残念ながらプラグインを使う情報に比べると、プラグインを開発する方法の情報が少なく、自作して開発する方法がよくわかりませんでした。なんとかすでにあるプラグインをいくつか読み解いてみるしか方法がなさそうです。

今回やれなかったこと、やらなかったこと

まず、人気記事一覧の実装はじめ、まだやりのこしている実現したい機能はいくつかあります。今後はゆるやかにそういうのをやっていきたいです。

あえてやらなかったことは、PWA対応でしょうか。プラグインを使えばすぐにできそうですが、個人のブログをPWAにしたところ嬉しい人なんて皆無だと思いあえてやりませんでした。今後も必要ないと思っています。

感想

とまあこんな感じで今回のリニューアルを通して数多くの知識の再確認とキャッチアップの機会を得ました。過去の自分からこれからの自分への知識の受けわたしというか。そしてやはり、手を動かしてナンボだな、ということも再認識しました。あまり個人開発と意識はしてなかったものの良い機会になりました。テーマのような見た目だけでなく機能も自分で開発していける楽しさは自分でブログシステムを扱う醍醐味ですね（逆を言えば必要な機能は自分でなんとかしなきゃいけないけど）。

そして成果物として出来上がった現在はチューニングも効を奏して、表示までの体感速度は爆上がりして満足の行くものになりました。VuePressに比べてGridsomeのドキュメントは必要十分と思えるほどしっかりと充実していますね。また、今後もしCMSや外部ソースとの連携が必要になる際も組み込みやすそうで良い感じです。

見ためはというと、正直大幅なレイアウト変更で以前より見にくくなったのかもしれない懸念はのこります。が、（今の）自分の好みにはなっ��嬉しい限りです。これからもブログは自分の趣味全開の自分の城的な場所としてやっていきます。

ブログをやるなら現状（VuePressより）Gridsomeという選択肢は間違ってなかったようです。

from Trial and Spiral https://blog.solunita.net/posts/renewal-blog-to-gridsome-from-vuepress/

0 notes

trial-and-spiral · 5 years ago

Text

Gridsomeでイチからブログを作る - Markdownファイルで記事を作る

前回、前々回と下準備をしました。それらは準備であって人によっては不必要です。料理で言えば「包丁を研ぐ」のような感ですかね。今回こそは料理をして食べれる形、つまり記事部分を表示させてブログの体にもっていくことを目指そうと思います。

記事を表示させるための準備

記事としてのデータの持ち方はいろいろありますが、今回はMarkdownファイルをベースとして表示できるようにします。なお、他の選択肢としてはWordpressを始めとしたCMSでデータを保持、編集しAPI経由で取得するような方法もあります。

記事部分を扱うプラグインは規約としてsourceという命名規則にのっとるように決められています。従来のGridsome v0.6系まではMarkdownファイルを1記事として扱うためのプラグインとして@gridsome/source-filesystemが提供されていました。 2020年2月現在、Blog-Starterもこれがベースとなっています。

Gridsome v0.7系以降では新たに@gridsome/vue-remarkというプラグインも使うことができます。sourceとついていませんが、内部的に@gridsome/source-filesystemを使っているため、これだけでMarkdownで記事を作っていくことができます。

設定方法が少し異なるものの、遜色なく使えます。なによりMarkdownファイル内でVue.jsのSFCを扱えるのは強力です。記事内に自分で開発したVue.jsのコンポーネントを表現の埋めこむことで自由度が飛躍的にアップします。今回はこのVueRemarkを導入してブログにしていきます。

VueRemakの準備

使いかたはここを見るのが早いです。

が、ちゃんとステップバイステップで追っていきましょう。

まずはインストール。

$ yarn add @gridsome/vue-remark

次にgridsome.config.jsを以下のように追記します。

module.exports = { plugins: [ { use: '@gridsome/vue-remark', options: { typeName: 'Post', // 必須。GraphQL上で扱う型定義 baseDir: './content/posts', // 記事となるmarkdownファイルを置くディレクトリ pathPrefix: '/posts', // URLになるパス。必須ではない。 template: './src/templates/Post.vue' // 記事ページのVueコンポーネントファイルの指定 } } ] }

このオプションは公式にも詳しく書かれています。

{ typeName: 'Post', // 必須。GraphQL上で扱う型定義 baseDir: './content/posts', // 記事となるmarkdownファイルを置くディレクトリ pathPrefix: '/posts', // URLになるパス。必須ではない。 template: './src/templates/Post.vue' // 記事ページのVueコンポーネントファイルの指定 }

この設定を説明すると、 Post型のスキーマを作り、 contents/postsにあるmarkdownファイルに従って記事内容を読みこみ /post/{記事名} ./src/templates/Post.vueのコンポーネントを使って表示するということをしています。

さっそくcontents/posts/の中にmy-first-article.mdというファイルを作って試して��ます。記事の内容以外はmarkdownの拡張書式であるfrontmatterに従って設定します。今回は最低限として

--- title: 最初の記事 --- これは私の最初の記事です

と書いてみます。

最初の---の行で囲まれた部分がfrontmatterと言い、メタ情報として扱われます。とりあえずタイトルだけでいいでしょう

このmarkdownを実際に表示する部分となる'./src/templates/Post.vue'を書きます。

<template> <article> <h1></h1> <VueRemarkContent /> </article> </template> <page-query> query Post ($id: ID!) { post (id: $id) { title content } } </page-query>

（この例ではHTMLですが、前回導入したPugをtemplateに指定してもOKです）。

<page-query>内に書いたGraphQLにしたがってデータをロードします。ここの内容がそのままVue.jsのコンポーネント内に$pageにはいります。内部にはVue.jsのcomputeとして扱われるのでthis.$pageで扱うことができます。

<VueRemarkContent />の部分には自動的にMarkdownの本文内がpage-queryの中でcontentとして取得した内容をもとにHTMLとして表示されます。

これで記事単体のページはできました。単体ページだけではアクセスしづらいので、indexとなる記事一覧ページも作りましょう。/src/pages/index.vueを作って

<template> <div class="index"> <g-link v-for="post in $page.posts.edges" :key="post.id" :to="post.node.path"> <h2> </g-link> </template> <page-query> query { posts: allPost { edges { node { id title path } } } } </page-query>

と書いてみましょうか。最低限これだけあればOKです。なお<g-link>はGridsome特有の組み込みコンポーネントで、サイト内リンクを作ります。vue-routerのrouter-link機能とほぼ同一です。サイト内のリンクは<g-link>、サイト外へは通常の<a href>を使います。

ここまでできたら一度表示してみましょうか。開発中の表示は下記コマンドを打ちます。

$ yarn develop

として、表示されるURL(デフォルトではhttp://localhost:3000）をブラウザで開いてみます。

問題なく表示されていればOKです。記事タイトルと思しきものが1件表示されているので、クリックしたら遷移するでしょうか？なお、VueファイルもMarkdownファイルもHotLoadingが効いているのでファイルを編集して保存すると自動的に反映されます。

タグ対応

記事に分類のためのタグを導入します。要件としては

1記事には複数タグをつけることができる

タグ別に一覧ページを表示できる

でしょうか。 gridsome.config.jsのremark部分に以下のように変更します。

module.exports = { plugins: [ { use: '@gridsome/vue-remark', options: { typeName: 'Post', baseDir: './content/posts', pathPrefix: '/posts', template: './src/templates/Post.vue' }, refs: { tags: { typeName: `Tag`, create: true, } } } ] }

このrefsの指定では、TagというSchemaで参照型が作られ、PostのSchemaに含めています。またcreate: trueとしているため/src/templates/Tag.vueを作ることで、Tagごとの一覧ページのテンプレートを表示させることができます。

まずは記事側に

--- title: 最初の記事 tags: - tag1 - tag2 --- これは私の最初の記事です

のようにfrontmatterにYAML記法の配列でタグ名を適当につけます。

あとはPost.vueで指定しているqueryにtagを足し、templateから扱えばいいので

<template> <article> <h1></h1> <ul> <li v-for="tag in $page.post.tags" :key="tag.id"> <g-link :to="tag.path"> </g-link> </li> </ul> <VueRemarkContent /> </article> </template> <page-query> query Post ($id: ID!) { post (id: $id) { title content tag { id title path } } } </page-query>

とTagを含めるように変更します。

また、Tag.vueを作れば /tags/tag名で呼ばれるファイルを設定できます��で、以下のようなコンポーネントも作ってみましょう。

<template> <div class="index"> <div class="info"> <p> </p> </div> <g-link v-for="post in $page.tag.belongsTo.edges" :key="post.id" :to="post.node.path"> <h2> </g-link> </template> <page-query> query { tag: tag(id: $id) { title belongsTo { edges { node { ... on Post { id title path } } } } } } </page-query>

これでタグ機能を追加できました。

ページングを追加する

ページングを追加するにはqueryをまずページング対応に書きかえます。この時にpage-infoも一緒に出力します。

それではindex.vueを変更してみましょう。

<template> <div class="index"> <g-link v-for="post in $page.posts.edges" :key="post.id" :to="post.node.path"> <h2> </g-link> <Pager :info="$page.posts.pageInfo"/> </template> <page-query> query ($page: Int) { posts: allPost(perPage: 10, page: $page) @paginate { pageInfo { totalPages currentPage } edges { node { id title path } } } } </page-query>

allPost部分に上記のような引数と@paginateを指定します。同時にpageInfoも出力しておきます。これをGridsome組み込みコンポーネントのPagerに指定れば自動的にページングを表示してくれます。

クラスやスタイルを変更したい場合や、表示件数や前後移動のための表示文字列も変更できるので、詳細はPaginate data - Gridsomeを参照してください。

まとめ

以上で最小限の記事一覧と記事ページ、タグページの実装ができました。スターターで作るよりまず簡素に自分で書いてみると何がどうなってるか理解できると思います。

これで最低限のブログの体はできました。あとはこれをベースとしてどんどん機能を拡張していくだけです。次回以降は必要な機能を追加していきましょう。

from Trial and Spiral https://blog.solunita.net/posts/develop-blog-by-gridsome-from-scrach-by-markdown/

1 note · View note

trial-and-spiral · 5 years ago

Text

僕のRelease note[0.38.5] & 僕のRoadMap[0.38.6]

先月まで自分ChangeLogとしていましたが、今月から「僕のRelease note」と改題しました。やることは変わらず前月のふりかえりと今月の目標設定。

僕のRelease Note[0.38.5] - 2020-02

先般からやっているこの振り返りですが、ChangeLogとReleaseNoteどっちの表現がより正確なのか気になって違いを調べてみました。

Changelog - Wikipedia

Release notes - Wikipedia

version control - What is difference between release notes and changelog? - Stack Overflow

強いてどっちかと言えばリリースノートのほうがより適切と判断したので、今回から「ReleaseNote」という表記にしました。

まずは先月Roadmap OKRの振り返りから。

Roadmap OKR

目的：自分を効果的に扱えるようにしてパフォーマンスを上げる

❌目標：insightのワークブックをやって自己認識を強化した

❌目標：友人や周囲の人に自分がどう見えてるか尋ねた

目的：技術力を上げて高い生産性と自己肯定感を持つ

❌目標：Ruby Goldを取得した

気分転換的に前からタスクとして積んでた「ブログをGridsomeに移行する」というのに着手したら楽しくなって、そちらに全振りしてしまいました。友人と会う機会はあったものの腰を据えて話す時間がとれそうになかった背景もありましたが。

無事、Gridsome移行は完了しすでにリリースでき、そ��目標は達成できました🙌。ちゃんとリグレッションなく移行しつつ、自分で決めた期限に間に合わせたのは良かったです。フルリニューアルや機能移行の過程でいろいろ知見もついて得るものは多かったので結果的には進捗に満足いってます。

出来事/体験

ボドゲ部活動再開

リモートワーク開始

新型コロナウィルス感染症（COVID-19)警戒体制

以前からプライベートで、友人達やさらにその友人まで巻きこんで「ボドゲ部」と称した活動を僕が中心となってやっていました。昨年の繁忙期-転職活動-転職-出産とライフイベントが多忙になっておやすみしていましたが、ようやく再開しました。要因は育児にも少し慣れてきたことがひとつ。もうひとつはこのような機会を作り、仕事、家事、育児から離れる時間を意識的に設けてメンタルヘルスを健康に保つ作戦です。

職場では試験的に週イチでリモートワークが許可されました。育児都合もあるので、積極的に使ってみています。さらにCOVID-19の影響で来週からは毎日リモートワークになりました。コミュニケーションを考えると出社のほうが生産性が高いと思っていますが、機会を有効に利用しつつ検証とベストプラクティスの模索をしていきたいです。

習慣

運動（リングフィットアドベンチャー）が高頻度で続いてる #継続中

職場の自席環境をスタンディングデスクにした #継続中

運動は週5以上のペースで続けれています。今のところ体重に大きな変化はみられないけど今後もやっていきます。今月続けれたら3か月なので、そうしたら定着とみなしてモニタリング期間を終了します。職場のスタンディング環境も慣れました。リモートワークで家で座って作業していると腰が痛くなるので、今やスタンディングのほうが良く、家にも導入したいぐらいです。

アウトプット/創作活動

Gridsomeでブログをリリース（移行）した

SlackAppに「特定の言葉に反応して対応するリアクションをする」機能を実装した

Gridsomeへの移行はなんとか2月中にできました。ヤッタネ🎉。初回読み込みがまだ遅めではありますが、以前よりは速くなり、機能もリグレッションなく移行できました。またスタイルは移行より書き直したほうが楽そうだったのでせっかくなのでイチから書き直しました。これによって主にフロントエンド回りの知識のアップデートができたのでとても良かったです。

所属している月イチでチャレンジするコミュニティには「運動えらい」チャンネルがあります。運動した報告をすると誰かが「��らい」絵文字でリアクションするだけのみんなで褒めあうチャンネルです。ここに「しました」を含む発言をするとユーザーごとにカウントアップしてカウント応じた「n連」という絵文字をつける機能を実装しました。日を空けてしまうとカウントリセットされます。アイデア自体はあったものの、「やろう！」と決めてから要件定義、実装、リ��ースまで一週間かけず��勢いでやりきりました。リリースすると決めたならそれを守ること、勢いでもやりきることは大事。実装ややってること以上に参加メンバーの反応が良くて嬉しかったです。難しいことしなくてもユーザーインパクトを出せる好例になりました。

装備、環境

スマートウォッチを再び購入

汎用エアコンリモコン導入

スマートウォッチはこちら。

きっかけは（スマートではない普通の）腕時計のバンドが壊れてしまったことです。以前も別のスマートウォッチを一時期使っていたんですが、なくしてしまいました。時間の確認はやはり普通の腕時計のほうが楽ですが、スマホに届く通知が時計にも届くのは凄く便利です。通知に気づきやすくなります。内容も表示され、すぐに反応が必要か、後でいいものかをその場で判断できるのが凄く良いですね。特にスマホをポケットなどに入れずにバイブが気づきにくい使い方をしてる僕にはすごく楽です。

エアコンの汎用リモコンも買いました。僕はエアコンの電源をよく切り忘れて寝てしまいます。今のエアコンは賃貸の部屋に備えつけのものです。タイマーはあるものの「n時間後にオフ」のような設定のみで、一度だけ有効です。そのため、これまではタイマーで切り忘れを防ぐことが難しかったです。

このリモコンは24時間式のタイマーが付いているので、つけっぱなしでも決まった時間に電源をオフにしてくれます。1度だけ有効/ずっと有効を設定できるので、一度設定すれば切り忘れを完全に防ぐことができます。今のところ快適に動いていて、もっと早く買えばよかった、今年買って良かったものランキング暫定一位です。

こういう小さなストレスを道具で解決していくの大事。

僕のRoadMap[0.38.6] - 2020-03

3月の挑戦目標を目的を添えて。

目的：自分を効果的に扱えるようにしてパフォーマンスを上げる

□ 目標：insightのワークブックをやって自己認識を強化した #再挑戦

□ 目標：友人や周囲の人に自分がどう見えてるか尋ねた #再挑戦

目的：技術力を上げて高い生産性と自己肯定感を持つ

□ 目標：技術的なことor英語の自発的な勉強を1日1時間以上、週5日以上習慣的に行う

1は完全に2月やれてなかったので再挑戦します。今度はちゃんとやります。 2は4月に基本情報の試験が控えてること、もしくはRubyGoldをとる、なんでもいいんですが、リモートワークなのもあって仕事中や通勤中以外での勉強時間を意識的に捻出することを試みます。

今月も一歩一歩。

from Trial and Spiral https://blog.solunita.net/posts/my-release-note-0-38-5/

0 notes