lulzneko

カック@ブロガー / k9u(@kakakakakku)さんにブログメンターについていただき４週間。ありがたいことに日々多くの学びと気付きをいただいています。
この記事は私自身の学びの整理ではありますが、私がカックさんに教わっていること、学んだことなどはお役に立つのではないかと思い共有します。

シリーズの記事

ブログメンティ始まる
ブログメンティふりかえり１週目
ブログメンティふりかえり４週目(本記事)

ブログメンティーとしての目標設定

技術系記事を以下のペースで公開する(※ このシリーズの記事は記載するがカウント外)

週１回を必達とする
週２回を目標として設定する

以下の記事を書き目標を達成することができました。

２週目

３週目

４週目

Hexo のブログ環境機能に関する記事が中心となりました。これまで、なんとなくで構築してあまり手を入れていなかったので本格的に書くにあたって手を入れていったとこから、Chrome DevTools の使い方などに話を広げられたともいます。

また、プルリクを出す記事を書けたのが良かったです。利用させてもらっている OSS に貢献できたこと、また貢献のしかたを発信でき、カックさんの教え「OSS に感謝し貢献する」を小さいながらも実践できました。プルリクを出すのは引き続き実践できるよう狙っていき、記事を増やしていきたいです。そして、このシリーズの記事からプルリクをする人が出てくることにつながったら嬉しいです。

そして Asana でタスク管理。気に入っているサービスなので色々なサービス連携で活用法や API を使う方法などを研究して発信していきたいです。

各種メトリクスの推移と考察

毎週日曜日に以下のメトリクスを取得しています。こちらは達成数値のノルマとかではなく、推移を見ていただいています。

記事数は安定して出せていて、またテーマもたまっているので安心です。記事の質を上げて良い情報発信をできるようにしていきたいです。

PV は１週目のところでShiftup! JP_Getshifter Vol3！で JAMstack なサーバーレスウェブフロントについて発表をしましたので、PV が上がってイベント効果がなくなり下がったところから少し戻った感じです。良い情報発信を心がけ伸ばしていけるようかんばります。

記事数

せっかくなので追加しました。(投稿数は目標設定カウント数のみ)

	開始時	１週目	２週目	３週目	４週目
トータル	21	25	28	31	33
投稿数	-	3	2	3	2

週間 PV

Google Analitycs で取得しています。

	開始時	１週目	２週目	３週目	４週目
全体	232	478	355	276	305
/articles	82	241	242	199	205
@lulzneko	78	203	225	174	191

はてなブックマーク数

サイト内の合計はてブ数を表示するツール｜はてブチェッカーで取得しています。

	開始時	１週目	２週目	３週目	４週目
全体	29	29	30	30	30
/articles	10	10	11	11	11
@lulzneko	10	10	11	11	11

Twitter フォロワー数

lulzneko (ラルズネコ)(@lulzneko) | Twitterを見ています。

	開始時	１週目	２週目	３週目	４週目
@lulzneko	158	169	170	171	172

気づき、学び

アウトプッターの使命と目的意識

ブログを書いたりイベントで発表したり、アウトプットするからにはやはり目的があります。そこをもっと明確にしたいなと思いました。カックさんとお話(DM)をしているなかで “ツール紹介などは「XXX はできないよね」という誤解を解く意味もある” というのがありました。そのものずばりで「プラグインや機能を紹介するのはアウトプッターの使命」と。

自分が調べたことや、見つけた良い方法などを発信し、多くの人の役に立ちたいというのは大前提としてあります。その上でもっと目的意識を明確化することで、伝えたいことがはっきりできるし、その伝えたいことの周りにも目が行って、これも合わせてお伝えしたいが生まれるのかなと。

これは Riotz.works というチーム全体のテーマでもあり日々考えていることでした。きっと Riotz.works 全体、そしてブログ、イベント発表、ハッカソンと活動の個々にも持つとよいのだろうなと感じ、まずはメンティー期間を通じてブログのアウトプッターの使命と目的意識の明確化に取り組んでいきます。

慌て記事への反省

今週は「Markdow ＋グラフ」の調査をしていて行けそうな雰囲気だったので置いておき、後半に着手したら見当違いが発覚し慌てての Asana 紹介記事になりました。調査が甘かったことから慌て記事なってしまい、記事で書きたい方向性やターゲットがブレてしまったことが反省です。
記事を書く目的は何か、読んでくださる方に何を得てほしいか、書いて発信するからには意識をしっかり持たなければと。

このように急ぎになってやってしまうことのほかに、「これいいな」「これ話したいな」「よし！書こう！！」みたいな感じの勢いで書き始めてしまうケースも同じで、気を付けたいところです。

やりたかったことは本記事のグラフ表示で、今回はChart.jsを使うことで実現しました。(これも Chart.js スゴイ！書くぞ！！の勢いになりそうでした。。。)

ブログへの愛情と厳しいチェック

恥ずかしいことですが、せっかく書いているのに typo してしまう。カックさんにレビュー依頼すると読むのがとても速いのに typo のチェックが入る。どうやって見てるの？と不思議です。

文章を読んでると typo が光って見える謎のスキルがあるから無限に typo を発見できてしまうのです✏️
— カック@ブロガー / k9u (@kakakakakku)2019年4月11日

その厳しいチェックもブログへの愛情から。お話している中でとても感じますし、書くことだけでなく読んでくださる方へ伝わるか、読みやすいかということを考えているからなんですね。
書いたからには読んでもらいたいし、読んでもらうからには内容や読みやすさはもとより、誤字脱字チェックの基本的なことは然るべく。そのためには厳しくセルフチェックをしなければならない。typo がないように、しっかりチェックします。

コミュニティへの貢献

こちらは前回も書きましたが、ブログを書くだけではなく使っている OSS やコミュニティへ貢献すること。これは、もちろん感謝があり、そしてアウトプットの活動を楽しむことなのだと感じました。プルリクを出しマージされると、とても嬉しいです。嬉しさを積み重ね、楽しく感謝と貢献をしていきたいです。

こちらはカックさんのプルリクまとめの記事です。まとめができるぐらい私も貢献していきたい。

なかなか書ききれなかったり、うまくお伝えできてない部分がありますが、少しでも共有できればと。

最低限、週１本書くことでやっていますが、まだ習慣化できてなかったり、書くのに時間がかかったりとなかなか成長できてないのを感じます。しかしながらカックさんとのやり取りというのがとても楽しく、まさに「メンター」が付いているという安心感と楽しさでこなせています。

４週目＝１ヶ月、あっという間に過ぎてしまいました。もっともっとレベルアップし、お役に立てるような良い記事を書けるようになっていきたいです。

どうぞ、よろしくお願いいたします。

Author:lulzneko

lulzneko

2019-04-27

開発環境

Asana で個人のタスク管理をする

週１本～２本のペースでブログを書く中でアイデアの広がりや、やってみたいことなどがいろいろ出てくるようになりました。これまでは簡単なメモなどで済ませていたのが、いよいよ本格的に管理の必要を感じてくる中で、いくつか試したところ Asana が良かったので紹介します。

タスク管理導入の背景

カック@ブロガー / k9u(@kakakakakku)さんにブログのメンターについていただいて早１ヶ月。最初に 20 のブログテーマを考え、またお話(DM)していく中で新しいブログのテーマをいただき、そして自分でも書いてみたいネタを考えるようになり、アイテムの整理が大変になってきました。

タスクの管理はもともと苦手、にもかかわらず色々思いついては書き散らかす困ったタイプでした。ところがブログを定期的に書いていくには優先順位や難易度(と、その準備)といったところから、ある程度整理が必要となります。

また超大型連休前で仕事も詰め込み状態、Slack で次々にやることが積まれてはスレッドが押し流されていく状況も重なったのもありました。

仕事のプロジェクト管理は別なので、個人のタスク管理として手軽に使えるもを探している中で良さそうなものから、同僚に紹介された Asana を使い始めたのが経緯です。

Asana とは

Asana https://asana.com/jaは “一番大事な仕事に、もっと時間を” をトップに題するプロジェクト管理のサービスです。

ToDo リストや、カンバン方式のタスク管理機能があるほか、ガントチャートのようなタイムライン、カレンダーなど豊富な機能を備えています。また無料プランもあるので個人や小規模なチームに手軽に導入できるもありがたいです。

導入企業もそうそうたるもので、2019年中には東京オフィスも開設されるとのことです。そのため4月1日には東京でイベントも開催されたとのことで、いろいろと楽しみなサービスです。
また、とても使いやすさ楽しさを感じたのですが、その辺についても記事があり、こういったのも楽しいです。

参考情報

Asana の良いところ

日本語化されている

メニューもアプリも日本語化されています。また簡単なテンプレートプロジェクトも日本語化され説明も読めるので助かります。ノウハウ的なことやケーススタディも日本語で多く公開されているので、使い始めに困るこもなく、研究もいろいろとでいそうです。また最近話題の 1 on 1 プロジェクトのテンプレートもありおもしろいです。

参考情報

スマートフォンアプリが爆速！

私が持っているスマホ Xperia XZ1 での操作感になりますが、このアプリ、起動の速さが最高です！
まずスプラッシュがありません。一瞬だけ Asana のロゴカラーで画面が埋まりますが１秒もないぐらいの時間でマイタスクのリストが表示されます。その後リストがネット同期化されますがタスクの入力は行うことができます。この速さは個人タスク管理において最高の体験といえるでしょう。思いついたことを即座に入力できます。

これまではちょっとした ToDo や、思い付きをメモしておきたいときに待たされるのは苦痛ですし、待ってるうちに他のことをしたり、考えたりして入力することを忘れてしまうといったことがありました。しかしながら Asana のアプリを入れてから即入力できるようになりメモ忘れがなくなりました。

できればウィジェットも欲しかったのですが、表示が大きすぎで１画面使ってしまう勢いだったのでやめました。こちらは ToDo リストで上から表示できる分だけ「1 x 1」や「1 x 2」ぐらいだと嬉しかったです。(スケジュール管理はジョルテを使っていて、その ToDo ウィジェットが良いので Google Calendar 経由で連携に挑戦してみたいです)

アプリはこちらから入手できます。

ネットにつながっていなくても利用できる

スマホアプリなら当然でないと困りますが、ネットにつながってない状態でも入力できます。もちろんネットへつながった時に同期してくれるので安心です。いつでも使えるのが助かります。
これはブラウザでも同様でリストはあらかじめアクセスしていないといけませんが、リストが表示できていればタスクは追加できます。残念ながらローカルストレージへは保存してくれないのでブラウザを閉じてしまったら消えてしまうのはありますが。それでもリストさえ取得しておけばある程度操作できるのはよいです。

アプリやサービス連携が豊富

公式ページには 100以上と書かれていますが、とにかくたくさんあります。Gmail などのメール連携から、Slack などのチャット、ストレージなどなど。
また API も公開されているようなので、自分なりのアクションを作りこむこともできそうです。こちらは存在の確認だけで詳細を読んでないのですが、いずれ挑戦してみます。

参考情報

エフェクトでテンションが上がる

タスクを完了するとキラキラで流れて行ったり、サプライズ的な特別効果が表示されたりと楽しさがあります。
こういったエフェクトが作業する楽しさにもつながり、とても良いテンションで作業ができますし、また登録したくなります。

Asana のサインアップ

まずhttps://asana.com/jaへアクセスし利用するメールアドレスを入力し [無料で試す] をクリックしサインアップします。(Gmail を使うと会社のメールアドレスを求められますが [個人用メール] で続けられますし、Gmail の受信トレイを開くボタンも用意してくれるユーザーフレンドリー仕様です)

入力したメールアドレスに来たメールから [メールアドレスを確認] をクリックし、ようこそ画面が表示されるので [始める] をクリックします。
プロフィールのセットアップ画面が表示されるので、写真、氏名、パスワードを入力し [続行] をクリックします。

チームの情報を聞かれるので [チームタイプ] と [チーム名] を入力し [チームを作成] をクリックします。チームは ID 管理されているようでユニーク性は求められないため安心です。

続いてチームに参加するユーザーのメールアドレスを求められます。必要に応じて追加します。
最後に [無料トライアルを始める] 画面が表示されクレジットカードの入力を求められますが無料の Basic 版を使うには入力する必要はありません。
画面右の [無料トライアルを始める] の下にある[制限付きバージョンで続ける]をクリックします。

無事 Asana を使い始めることができるようになりました！

プロジェクトを作るように求められてますが [マイタスク] だけで使っていくことができます。

そして、ぜひサンプルタスクを作って完了してみてください！
タスク完了のエフェクトとサプライズが待ってます。
試していただきたいのでキャプチャは割愛 (取るのが難しかったのは内緒の方向で)
さらに [プロフィール] - [プロフィール設定] - [ハック] から [さらに楽しく] できるみたいです。

今回タスク管理のためにいろいろと調べていたら、最近はプロジェクト管理系のツールにモダンなチャットが統合されるようになってきているようで持ちました。もしかしたら新しいツールの時代が来ているのかもしれませんね。

普段 Slack を使っていますが、タスクが大量に発生してくる状況になってくるとタスク(イシュー、チケット etc…)を作成するのが手間になったり、埋もれたりしてしまいます。そうなるとチャットから簡単にタスクが作れたらいいなぁと思っていて、チャットからタスク管理よりも、使いやすいタスク管理に Slack などのモダンチャットがついたら最高なのかなと。

当面は個人タスク管理として使う感じですが、少しずつ本格的に使っていく方法を考えてみます。
Asana は ToDo リストタイプと、カンバン形式の両方が選べます。個人タスク管理であることと、使ってみた感覚から、私は ToDo リストが好みのようでした。(たぶん管理がちゃんとできないから雑に上下するぐらいがちょうどいい。それでいてセクション分けできるのがいいです。)

最初はメンターさんに倣って#22 「Trello があるので眠れない」 | #omoiyarifmな、眠れないTrelloを検討していたｗのですが、感覚的に Asana がマッチした感じで使っています。リストでざっくりと、エフェクト好きな感じが合ったのかな。

Author:lulzneko

lulzneko

2019-04-23

開発

「テキスト校正くん」を使って読みやすい文章を書けるようにする

文章を書くときに「この単語は、ひらがな、カタカナ、漢字どれがよいか」や「気づいたら “の” が連なっていた」とったことがあるのではないでしょうか。
気を付けて書いたり、読み返したりしてチェックしますが人力だけではどうしてもすり抜けてしまいます。定型でできるチェックは自動で行い、人でないと判断できない部分に注力しましょう。

環境
本記事の開発環境は以下となります。

Windows 10 64bit + WSL Ubuntu 18.04.1 LTS
Visual Studio Code
テキスト校正くん

「テキスト校正くん」とは

テキスト校正くんは Visual Studio Code で、文章を自動でチェックしてくる拡張機能です。

テキストや Markdown を入力中にリアルタイムで校正してくれます。公式サイト文章作成・メール作成に役立つ！　VS Codeの拡張機能「テキスト校正くん」を公開 - ICS MEDIAによると以下のようなチェックを行ってくれます。

設定も簡単に行うことができるので、不要なチェックを外すこともできます。Visual Studio Code の拡張機能として容易にインストールでき、設定も手軽なのでテキストチェックの入門として、とてもよいです。

また内部的にはtextlintを使っているとのことです。さらに「テキスト校正くん」自体もics-creative/project-japanese-proofreadingで MIT ラインセンスのもと公開されています。

インストール

Visual Studio Code を起動して拡張機能(Ctrl + Shift + X) を表示します。
[テキスト校正くん] で検索、[インストール] をクリックします。(再読み込みの必要な場合があります)

さっそくテキスト校正くんで文章をチェックしてみます。
新しいファイルを.txtまたは.mdで作成します。テキスト校正くんはテキストファイルをチェックするため.txtまたは.mdのファイルである必要があります。

青空文庫から「夏目漱石吾輩は猫である」を拝借してエラーが出るようにしてみました。

エディター部分にリアルタイムで赤線が表示され、カーソルをのせるとエラーの詳細が表示されます。また「問題」のビューに一覧も出るので便利です。

まずは指摘を修正し、それから目視によるチェックをすることで文章の質を上げることができます。

設定

デフォルトの設定でいい感じに校正してくれますが、自分用にカスタマイズしたいこともあります。たとえば「半角括弧を使いたい」や「英単語の後に半角スペースをいれたい」など。
テキスト校正くんは簡単な設定でチェックルールをオフにできます。

Visual Studio Code の設定を開きますが、GUI で設定したほうがわかりやすいので GUI エディターを表示します。
コマンドパレット(Ctrl + Shift + P) からprefuiで絞り込み「基本設定: 設定（UI）を開く」を選択します。

設定の GUI エディターからテキスト校正くんで絞り込み、不要なルールのチェックを外して設定をします。

設定もリアルタイムで反映されるので、エディターを並べて探りながら設定することもできます。下図例では「句点(。)と読点(、)」が「生まれたかとんと見当がつかぬ」のピリオドのエラー有無に効いています。

私の文章の書き方が独特ということもあり、当初はかなりチェックが入ってしまっていました。ですが「テキスト校正くん」を入れてからはリアルタイムで指摘してくれるので都度直せますし、漢字の開きなど文章の勉強にもなり助かっています。
(過去記事は、そこまで多くはないのですが指摘が多すぎるので追々直していきます。。。)

とはいえ、漢字の間違えや誤入力などはチェックできないので最終的な確認は目視が大事なことに変わりはありません。単純なミスを防ぎ本質的なところに注力させてくれる拡張機能になります。

そしてブログメンター Eyes に耐えられる文章力とセルフレビュー力を鍛えたいところです。

文章を読んでると typo が光って見える謎のスキルがあるから無限に typo を発見できてしまうのです✏️
— カック@ブロガー / k9u (@kakakakakku)2019年4月11日

ICS MEDIAさんには、こんなに素晴らしい拡張機能を作り、無料の OSS で公開してくださり感謝しかありません。ありがとうございます！

Author:lulzneko

lulzneko

2019-04-20

プルリク / OSS-Friday

hexo-related-popular-posts にサブパス対応のプルリクを送る

Static Site Generator の Hexo で「人気の記事」を実現する Plugin、hexo-related-popular-posts。ビルド時に Google Analytics からアクセス解析のデータを取得してランキングを作成する素晴らしいアイデアで不可能を可能にしてくれます。
今回こちらの Plugin を使わせていただいたところ、サブパスの URL に対応する機能がなかったのでエンハンスのプルリクエストをだして拡張してもらいました。

tea3/hexo-related-popular-postsはHexoの Plugin で、Google Analytics からアクセス解析のデータを取得して各記事のランキングを作成してくれます。

Hexo は Static Site Generator で JAMstack サイトを作ります。JAMstack は静的なサイトで、アクセス解析のようなことはできず、通常は「人気の記事」のような動的な要素が必要なことはできません。

ところが tea3/hexo-related-popular-posts は冒頭に書きました通り Google Analytics と連携することで実現してくれる、最高にスゴイ Plugin です。

詳しくは「ブログで使っている Hexo に人気の記事リストを表示したい！」を、ご参照ください。

プルリクを出すことになった背景

本ブログに人気の記事リストを導入した際に、順不同でアクセス解析が反映さていない現象に遭遇しました。

正しくないランキングに明らかにアクセスがないであろう「Hello World !!」が入っており不思議だったのと、起動しなおすとランキングが入れ替わる挙動をしました。

※「Hello World !!」の記事は実際にアクセス数 0。さりげなくリンクを貼ってみます。

インストール・エラーとなる原因

まず hexo-related-popular-posts での動作確認です。アクセス解析したデータが出力されるファイルrankingSheet.txtを確認したところ、PV が 0 でした。

Google Analytics からデータが取れていないことも考えられるので、hexo-related-popular-posts が使っているライブラリsfarthin/ga-analyticsの動作確認したところ、コンソールに正しく表示できました。環境設定に問題はなさそうです。
※ ga-analytics の動作確認については、こちら「Google Analytics にプログラムでアクセスできるようにする」をご参照ください

そうなるとデータを取得した後に何かがあるので、hexo-related-popular-posts のソース確認に入ります。

Visual Studio Code で Hexo プロジェクト配下のnode_modules/hexo-related-popular-postsを開きます。

1 2	$ cd node_modules/hexo-related-popular-posts $ code .

ソースコード 13ファイルとはいえ、何かあたりが欲しいところ。まずはrankingSheet.txtを正しく表示できるところを目標にランキングデータファイル名の設定rankingSheetを全文検索します。そうするとcache.jsがかかりました。

ざっと眺めてみると 33行目に// PV updateと、それっぽいコメントがあり、36行目でパスの比較をしてデータモデルを作っているようです。
ここにデバッグ用のコンソール出力を挟んで動作確認をしたところarticles/有無でミスマッチしていることがわかりました。

2018/12/29/what-we-did-in-2018/ == articles/lulzneko/2018/12/29/what-we-did-in-2018/
2018/12/31/review-of-2018/ == articles/lulzneko/2018/12/31/review-of-2018/
2019/04/03/take-seminar-on-shiftup-vol3/ == articles/lulzneko/2019/04/03/take-seminar-on-shiftup-vol3/
2019/04/01/k9us-blog-mentoring-to-lulzneko/ == articles/lulzneko/2019/04/01/k9us-blog-mentoring-to-lulzneko/
2019/02/24/summary-of-qa-at-jawsdays2019/ == articles/lulzneko/2019/02/24/summary-of-qa-at-jawsdays2019/
...

このarticles/は、本ブログ URL のトップでriotz.worksドメインのサブパスに配置されているパス名になります。そのサブパスが Google Analytics のデータには含まれていて、Hexo のデータには入っていなかったことからランキングデータが正しく作られなかったようです。

原因が判明したので、サブパスを使っている場合に対応する機能拡張をプルリクします。

フォークしてプルリク作成の環境用意

プルリクを出すために、まずは元リポジトリをフォークしてプルリク作成の環境を作ります。

tea3/hexo-related-popular-postsのリポジトリへ行き、画面右上の [Fork] をクリックします。

いい感じにリポジトリがフォークされます。(この画面、スキ)

自分のアカウントにフォークしたリポジトリが作られるのでgit cloneします。
(画面左上のリポジトリのアカウントが自分になっていて、フォーク元が表示されている)

フォークした自分のリポジトリに変更を加える

プルリクしたい変更を自分のリポジトリに行います。
しっかりやるには作業用ブランチを用意しますが、今回は単発の作業で開発用ブランチもなさそうなのでmasterブランチに直接変更を加えてしまいます。

変更の方針
原因究明時にほぼ判明しているので難しくないですが、以下となります。

cache.jsにサブパスの文字列を持ってくる (今回はarticles/になる文字列)
Google Analytics とパスマッチする部分で、上記サブパスを利用する

サブパスの文字列は Hexo の設定、プロジェクト直下　_config.ymlファイルのroot: /articles/になります。Hexo 公式ドキュメントでは “root directory” と書かれている、こちらURL - Configuration | Hexoの設定になります。

これをcache.jsで使うにはhexo.configのrootプロパティ、すなわちhexo.config.rootを使います。ただし、このままだと/articles/のように先頭の/でまたミスマッチするのでhexo.config.root.slice(1)にして先頭を取り除きます。

ここで取得したサブパスの文字列を判定のif文で使います。(上記キャプチャの 36行目)

1
2
3

if (hexo.config.root.slice(1) + hexo.locals.cache.posts.data[v].popularPost_tmp_gaData.path == tmp_gaData[w].path) {
  // ...
}

このままだと処理がわかりにくいのでリファクタリング。
とくにslice(1)を毎回処理するのはムダなのでファイル上部の変数宣言部に移動します。rootの変数名は微妙ですが設定の項目名をそのまま使っているようなので合わせます。

const root = hexo.config.root.slice(1)

if (root + hexo.locals.cache.posts.data[v].popularPost_tmp_gaData.path == tmp_gaData[w].path) {
  // ...
}

テストケースが用意されているのでテストが失敗しないか確認しておきます。
修正が完了したら自分のリポジトリへプッシュします。

プルリクの作成

フォークした自分のリポジトリへ行き、変更がプッシュされていることを確認します。
つづいて画面中ほどの左に [New pull request] のボタンがあるのでクリックします。

プルリク作成画面が表示されるので、以下を確認し [Create pull request] をクリックします。

[file changed] から差分の最終確認
マージ先の確認(今回はtea3/hexo-related-popular-postsのmaster)

プルリク作成画面プルリクの目的と機能についての説明コメントを書き [Create pull request] をクリックします。
今回、作者さんのブログが日本語なので日本語でリクエストを出しても大丈夫だと思いましたが GitHub は英語で書かれているのとクローズされているプルリクも英語でやり取りしていたので英語にしました。(私の英文がヤバげなのは英語がまったくできないので頑張ってくググった成れの果てです💦)

無事プルリクが送られたので、マージされるのを期待して待ちましょう。

Support sub-path URL configuration with popular posts feature by lulzneko · Pull Request #19 · tea3/hexo-related-popular-posts

一晩でマージされた！

プルリクを出して一晩、夕方にはマージしリリースしてくださりました。はやっ！ᴛ ᴇ ᴀ 🍵(@tea0828)さんありがとうございます！！

プルリクもマージされ人気記事のリストが表示されるようになりました。

プルリクを送る、となるとハードルが高いように感じるかもしれませんが作業そのものとしては難しくはありません。この記事がプルリク作成のきっかけになれば幸いです。

Author:lulzneko

lulzneko

2019-04-19

フロントエンド

ブログで使っている Hexo に人気の記事リストを表示したい！

ブログによくある「人気の記事」のリストが欲しい。しかしながら本ブログは JAMstack で動的なことができません。ところが、スゴイ Plugin があって静的なサイトなのに「人気の記事」ができてしますのです！！

環境
本記事の開発環境は以下となります。

Windows 10 64bit + WSL Ubuntu 18.04.1 LTS
OpenSSL 1.1.0g (WSL)
Visual Studio Code
Node.js 8.10.0
npm 5.6.0
sfarthin/ga-analytics 0.0.7
hexo-related-popular-posts 3.0.4

JAMstack なサイトの強み/弱み

スゴイ Plugin の紹介の前に、少し JAMstack について整理します。

本ブログは Static Site Generator の Hexo を使って静的なサイト、つまり JAMstack として作っています。静的なサイトなのでプログラムを動かせるようなサーバーは持っていません。

JAMstack にすることでパフォーマンスが良く、安全性を高めたサイトを作ることができます。詳しくは本ブログの記事JAMstack、それはハイパフォーマンスなウェブフロントを実現するアーキテクチャをご参照ください。

メリットがあれば、デメリットもあります。静的なサイトになるので動的なこと、たとえばコメント欄などは実現できません。今回のテーマである「人気の記事」も同様で、実現するには各記事へのアクセスを集計しアクセスが多いものを人気として動的にリストを作る必要があります。つまり JAMstack ができない、動的な機能が必要となります。(なお JAMstack で動的な要素が必要な場合は SaaS などのサービスと連携して実現することが多いです)

この動的なことができない JAMstack ですが、tea3/hexo-related-popular-postsplugin が「人気の記事」を実現してくれます！

作者ᴛ ᴇ ᴀ 🍵(@tea0828)さんのサイトHexoブログで関連記事や人気記事を生成するプラグインを作った(node.js製hexo)|おちゃカメラ。によると、Google Analitycs のページビューを取得して、人気の記事を作るとのことです。確かに Google Analitycs は設置しているケースは多いですし、本ブログでも設定しています。また各ページごとのアクセス数もしっかり取ってくれています。そこに注目して Plugin として実現してしまうのがスゴイ！

そして形態素解析も備えていて、記事本文を分析して「関連する記事」のリストも作ってくれます。また「人気度」「関連度」を組み合わせることもできミックスしてどちらにウェイトを置いてリストを作るかの制御も可能です。

ただし注意点が１つあります。Static Site Generator の Plugin なので「サイト生成時に動作」します。つまりリアルタイムに人気の記事は変化しません。あくまでも「サイト生成時の人気の記事」であることに留意が必要です。とはいえ、きちんと投稿したりサイトメンテをしていれば更新されていくので安心ですし、夜間ビルドを走らせて毎日ビルドしてしまう手もあります。

最高にスゴイ Plugin です。ᴛ ᴇ ᴀ 🍵(@tea0828)さんありがとうございます！！

インストール

Hexo のプロジェクトディレクトリへ移動して、以下のコマンドを実行します。

1	$ yarn add hexo-related-popular-posts

※ npm を使っている場合はnpm install -S hexo-related-popular-posts

プロジェクト名:analytics-access
場所:組織無し（変更なし）

プロジェクトが作成され、プロジェクトのダッシュボードが表示されます。(ヘッダーにプロジェクト名が出てる)
Google Analytics へアクセスるための機能を追加するために [＋ API とサービスを有効化] をクリックします。

検索ボックスに [Analytics API] を入力して絞り込み [Analytics API] のボックスをクリックします。
※ 似ている名前でアイコンがついている [Google Analytics Reporting API] がありますが違うので注意

Analytics API の説明が表示されるので利用規約Google APIs Terms of Serviceを確認し同意できたら [有効にする] をクリックします。

Analytics API の認証情報を作成

Analytics API のダッシュボードが表示され、認証情報の作成を求められます。
[認証情報を作成] をクリックします。

プロジェクトへの認証情報の追加画面が表示されるので、項目を入力し [必要な認証情報] をクリックします。

使用する API:Analytics API
API を呼び出す場所:その他の UI (Windows、CLI ツールなど)
アクセスするデータの種類:アプリケーションデータ

サービスアカウント作成のフォームが表示されるので、項目を入力し [次へ] をクリックします。

サービスアカウント名: 任意の文字列 (今回はhexo)
サービスアカウント ID: 任意の文字列 (今回は自動でhexo-907、６文字以上必要 )
役割:役割を選択（変更なし）
キーのタイプ:P12

「サービスアカウントに役割が割り当てられていません」と表示されますが、[役割なしで作成] をクリックします。
※ 役割はなくても Web API にアクセスできますし、コンソールにアクセスする必要はないので役割なしで問題ありません。

サービスアカウントとキーが作成され、秘密鍵のファイルがダウンロードされます。ダウンロードした秘密鍵にはパスワードが設定されています。表示された文字列をひかえておきます。(キャプチャ用に画像はそれっぽく作っています)
ダウンロードが完了したら [閉じる] をクリックします。

認証情報画面が表示されるので [サービスアカウントの管理] をクリックします。

サービスアカウントの情報が表示されるので [メール] と [名前] をひかえておきます。

Google Analytics の認証情報を作成

https://analytics.google.com/analytics/へアクセス Google Analytics を表示します。
左のメニューから [管理] をクリックし、アクセスしたい [アカウント] - [プロパティ] - [ビュー] を設定します。

アクセスする [ビュー] の [ビューの設定] をクリックします。

[ビュー ID] をひかえ、[ユーザー管理者] をクリックします。

ビューの権限画面から右上の [＋] をクリックし、[ユーザーを追加] を選択します。

権限の追加画面に必要な情報を入力し [追加] をクリックします。

メールアドレス: ひかえておいたメールの文字列 (今回はhexo-907@analytics-access-237909.iam.gserviceaccount.com)
新規ユーザーにメールで通知する: チェックを外す (チェックしてても問題はありません)
権限: 表示と分析だけチェック（変更なし）

追加されました。

sfarthin/ga-analytics でデータを取得

実際にコマンドからデータを取得してみます。ここでは簡単にデータを取得してくれるライブラリsfarthin/ga-analyticsを使います。 sfarthin/ga-analytics は Analytics API を使って、Google Analytics のデータを取得してくれる Node.js のモジュールです。詳しくはREADMEをご参照ください。

まずはダウンロードした秘密鍵のファイルフォーマットを pem形式に変換します。

1	$ openssl pkcs12 -in [ダウンロードした秘密鍵のファイル] -nocerts -passin pass:[秘密鍵ファイルのパスワード] -nodes -out google-services.pem

Analytics API にアクセスするための情報を環境変数に設定し、ga-analyticsを実行します。
引数がない場合はトータルのセッション数が出力されます。セッション数が表示されたらサービス設定等正しく行えています。プログラムでアクセスできる準備ができました！

export GOOGLEAPI_CLIENTID="[サービスアカウントの名前].apps.googleusercontent.com"
export GOOGLEAPI_EMAIL="[サービスアカウントのメール]"
export GOOGLEAPI_KEY="google-services.pem"
export GOOGLEAPI_ANALYTICS_TABLE="ga:[Google Analytics の ビュー ID]"

npx ga-analytics
┌────────────────────┐
│ sessions (INTEGER) │
├────────────────────┤
│ 826                │
└────────────────────┘

Total sessions: 826

不要となった場合

以下の２ヵ所から削除します。

Google Developer Consolehttps://console.developers.google.com/のサービスアカウント
Google Analyticshttps://analytics.google.com/analytics/のビューユーザー管理者

Google Analytics からプログラムでデータを取得することができました。
しっかりとした分析を確認したりするには Google Analytics のウェブサイトが素晴らしいので、同じようなダッシュボードはあまり作りませんが、ちょっとした分析や定型レポートの出力などに使えます。

次回は、この Google Analytics と Hexo を組み合わせた Plugin の紹介をします。

Author:lulzneko

lulzneko

2019-04-11

フロントエンド

ブログで使っている Hexo の SNS 共有リンクのユーザビリティを高める

本ブログで使っている Hexo のデフォルトのテーマ landscape。記事を SNS で共有するボタンが用意されているのですが、そのボタン群のボックスを出してから使う手順になっています。
ボタン群を直接記事の下に配置することで、手順を減らしてユーザビリティを高めます。

前回の記事ブログで使っている Hexo の SNS 共有リンクに「はてなブックマーク」を追加するでは、Hexo に「はてなブックマーク(以降、はてブ)」のブックマークを作るボタンを追加しました。

そのとき気になったのが [共有] ボタンをクリックしてから、SNS 共有ボタン群のボックスを出して使う点です。今回は、この部分を改善してユーザビリティを高めます。

改修ポイントを確認

前回「はてブ」のボタンを追加したのはscript.jsの// Shareブロックでした。
これはarticle-share-linkのクラスが割り当てられた要素、つまり記事下の [共有] をクリックすると SNS シェア用のボックスを表示するスクリプトになります。

今回は、このスクリプトをやめて HTML テンプレートに直接各ボタンを配置するようにします。
修正ターゲットはarticle-share-link(= [共有] がある場所)になるので、これを全文検索して探します。
※ [共有] のラベル共有は i18n 対応で外部化されているので検索対象に適しません

article.ejsの<footer>タグ内にありました。(キャプチャでは 36行目)
ここにscript.jsで作っているボタンを移動してきます。

以下のコードを<footer>タグの下に追加し、article-share-linkの<a>タグを<span>タグに変更します。

<a href="http://b.hatena.ne.jp/entry/<%- post.permalink %>" class="article-share-hatena" target="_blank" title="このエントリーをはてなブックマークに追加"></a>
<a href="https://twitter.com/intent/tweet?url=<%- post.permalink %>" class="article-share-twitter" target="_blank" title="Twitter"></a>
<a href="https://www.facebook.com/sharer.php?u=<%- post.permalink %>" class="article-share-facebook" target="_blank" title="Facebook"></a>
<a href="http://pinterest.com/pin/create/button/?url=<%- post.permalink %>" class="article-share-pinterest" target="_blank" title="Pinterest"></a>
<span data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %>：</span>

基本的にはscript.jsにあった、タグを JavaScrip の書式から HTML の書式に変更して移動してます。
encodedUrlは HTML 内では文字列連結ができないのと、変数がpost.permalinkに変わり、HTML テンプレートとして<%- post.permalink %>を使います。すぐ下の [共有] のリンクで使っているのと同じです。

できあがった HTML テンプレートで表示！
残念ながら左に寄ってしまっています。。。

移動しただけでは残念ながらレイアウトが崩れてしまいました。スタイルを与えて修正します。
(この辺はサイトのデザインとご相談、１つの例として)

まずアイコン共通のスタイルを修正します。$article-share-linkを修正しますが同じ名前で.article-share-linkがあるので注意です。$のほうになります。
主な修正点は以下になります。

アイコンのボックスが大きいのでwidth: 20pxheight: 20pxで小さく
左に集まってしまっていたのをfloat: rightで右に戻す
並びが窮屈なのでmargin: 0 0 0 10pxで間隔を調整

アイコンのフォントが [共有] に対して大きいのでfont-size: 18pxで調整

$article-share-link
  width: 20px
  height: 20px
  display: block
  float: right
  position: relative
  color: #999
  text-shadow: 0 1px #fff
  margin: 0 0 0 10px
  &:before
    font-size: 18px
    font-family: font-icon
    font-weight: normal
    absolute-center(@font-size)
    text-align: center
  &:hover
    color: #fff

続いて各アイコンのスタイルを修正します。
カーソルがのったときに背景色が変わるようになっていますが、新しいレイアウトだとアイコンそのものの色を変えたほうがわかりやすいでしょう。
以下 Twitter を例にしますが、すべてのアイコンの定義で同じように修正します。

backgroundの行をcolor: color-twitter !importantのようにします

背景色の定義を、フォントの色の定義に変更

.article-footer aのcolor定義に負けるので、!importantで優先

.article-share-twitter
  @extend $article-share-link
  &:before
    content: "\f099"
  &:hover
    color: color-twitter !important
    text-shadow: 0 1px darken(color-twitter, 20%)

だいぶ良い感じにアイコンが並びました。
float: rightを使ったのでアイコンが HTML の定義と逆順に並んでいます。今回はこの順番にしますが、並び順をボックスのときと同じようにするには、HTML の<a>タグの順番を逆順にします。

[共有] のラベルからマウスカーソルスタイルとアイコンを外す

SNS 共有のボックスを開くための [共有] ラベルのスタイルを調整します。今度は.article-share-link、.始まりの方になります。
矢印のアイコンをなくした方がすっきりしたので消しましたが、表示したい場合は&:before以降を残します。

cursor: pointerを削除し、マウスでクリックできる感をなくす

&:before以降を削除し、矢印のアイコンを消す

1
2
3

.article-share-link
  float: right
  margin-left: 20px

最後に [共有] ラベルをクリックできないようにします。<a>タグとcursor: pointerのスタイルをなくしているので、一見クリックできない要素に見えますが、クリックすると壊れたボックスが表示されます。
script.jsの// Shareブロックを削除します。　(キャプチャでは 34行目～86行目、表示の都合により一部折りたたみ)

完成！

SNS 共有アイコンをボックス表示から、記事の下に展開済みで表示するようにできました。

ブログメンティふりかえり１週目の後に、メンターのカック@ブロガー / k9u(@kakakakakku)さんとお話していた時に「”はてブ”をつけるときにボタンを使う」のがありました。

私が「はてブ」を使っていなかったので、ブックマークを付ける感覚をとらえられずボタンを設置していなかったのですが、確かにサイトを開いてから URL を入力する手順はしなそうです。

Twitter も共有するときにボタンがあれば押す可能性が高まるものの、自分で URL コピーするときは何か書く時で、そうでないときは流す可能性が高まります。ただ Twitter は開いていることが多いので、コピペする率は高いかもしれません。そういったサイトの特性もあることを学びました。

せっかくボタンを設置しましたし、アカウントも開設したので、たくさんのサイトを「はてブ」していきます。

今回は CSS をいろいろと調整しての修正がありました。
キャプチャや作業紹介がしにくかったので Try & Error の紹介は省略しましたが、CSS を試行錯誤するときは Chrome DevTools で CSS を直接編集するとリアルタイムに画面が変わってわかりやすいので、まずは Chrome DevTools で試してコードに落とすと楽です。

Author:lulzneko

lulzneko

2019-04-10

フロントエンド

ブログで使っている Hexo の SNS 共有リンクに「はてなブックマーク」を追加する

本ブログは Hexo の Static Site Generator でデフォルトのテーマ landscape をカスタマイズして使っています。landscape のテーマは、記事の最後に SNS へ共有するためのリンクがあります。このリンクボタン群に「はてなブックマーク」を追加します。

[2019.4.12 追記]
本記事の方法で共有ボタンを追加した際にapi.shopstyle .comドメインへリダイレクトしてから「はてなブックマーク」へ戻る挙動が確認されたため、記事を取り下げておりましたが原因が確認できたので再公開します。
原因はコメント欄のサービス Disqus による挙動と思われ、本サイトの Disqus 利用を停止したところリダイレクトは確認されなくなりました。詳細については別途まとめます。
本記事の方法で共有ボタンを追加することに問題はありません。お騒がせし申し訳ありませんでした。

Hexo とは

まず、本ブログで使っているHexoを紹介します。
Hexo は “A fast, simple & powerful blog framework” を謳うブログサイトを作るためのフレームワーク、というかツールです。公式サイトでは言及していませんが JAMstack なサイトを作るための Static Site Generator です。

Markdown で書いた記事をもとにウェブサイトの HTML を生成し、生成後は静的なサイトとしてデプロイできウェブサーバーだけで運用できます。簡易的なサイトでよければGitHub Pagesが使えますし、NetlifyやAWSの S3+CloudFront などでしっかりと運用もできます。
静的サイトなのでコメント機能は持っていませんがDisqusと連携する機能が組み込み済みなので簡単に設置できます。テーマやプラグインが豊富にあり、また日本語での情報も多く使いやすいのが特徴です。

Hexo 同様のツールとしてはGatsbyJSやVuePress、Gridsomeなどがあります。これらは、より高速で、ブラウザキャッシュを効果的に使う仕組みなどもあらかじめ入っているので、新しく立ち上げるサイトの場合はこれらを検討してみるのもよいでしょう。
またStaticGenにたくさんリストされているので、利用している技術スタックや環境などから自分に合ったものを探すのもよいです。

記事の共有リンクに「はてなブックマーク」を追加する

Hexo には記事の下に Twitter、Facebook、Pinterest、Google+ へ記事を共有するためのボタンが用意されています。
ここに「はてなブックマーク(以降、はてブ)」でブックマークを作るボタンを追加ます。ついでにサービス終了となった Google+ のボタンは削除します。

当初、Hexo の Plugin があるかと思ったのですが見当たらなかった、というか Plugin できる場所ではないようなのでテーマを直接修正することにします。

修正する場所を見つけるために Chrome DevTools であたりを付けます。
共有リンクの Google+ を右クリックして、コンテキストメニューから [検証] をクリックします。
すると Chrome DevTools が表示され、右クリックして [検証] した場所、ここでは Google+ ボタンのソースがフォーカスされます。

フォーカスされたソースの前後から検索に適しそうな文字列を探します。
今回はフォーカスされた部分のclass="article-share-google"が使えそうです。できればid属性を使いたいところですがclass="article-share-google"もソース内でかなり限定できそうですし、Twitter なども同じような命名でクラス定義されているようなので「はてブ」の CSS を作る時に使えそうです。

検索用の文字列を決めたのでソースから探します。
今回は普段から開発に使っているVisual Studio Codeで全文検索をかけました。

リンクを追加する

script.jsの中でarticle-share-linkのクラスが割り当てられている要素をクリックしたときに、SNS シェア用のリンクが入ったボックスを表示する中で作られているようです。

class="article-share-google"を行ごと消して Google+ のボタンを削除します。(キャプチャでは 61行目)

「はてブ」共有用リンクを、今回は Twitter 共有リンクの前に入れます。
以下のコードを追加します。(キャプチャでは 58行目)
※ コードは公式のはてなブックマークボタンの作成・設置についてを参考に作りました。title属性はサイトに合わせて変更してください。

1	'<a href="http://b.hatena.ne.jp/entry/' + encodedUrl + '" class="article-share-hatena" target="_blank" title="このエントリーをはてなブックマークに追加"></a>',

スタイルを追加する

article.stylに.article-share-googleが定義されています。
ここに「はてブ」共有リンク用のスタイルを追加します。(キャプチャでは 323行目)

この.article-share-googleの下に追加します。(.article-share-googleのブロックは削除して大丈夫です)

.article-share-hatena
  @extend $article-share-link
  &:before
    content: "B!"
    font-family: Verdana;
    font-weight: bold
  &:hover
    background: #00a4de
    text-shadow: 0 1px darken(#00a4de, 20%)

Hexo 内のアイコンはFont Awesome 4が使われています。しかしながら、このフォントセットには「はてブ」アイコンは入っていません。かわりに公式アイコンを使いたいところですが、スタイルにズレが生じてしまうのでフォントアイコンで乗り切りたいところです。

こちらのサイトさんで良い方法を紹介してくださっていました。素晴らしい情報をありがとうございます！
Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法

色は公式の素材集 - 株式会社はてなから、アイコンをカラーピックしました。

できあがり

「はてブ」でブックマークを作るボタンを導入することができました！

導入の背景としては、ブログメンティふりかえり１週目で各 KPI を取得した際に「はてブ」が増えていなかったためです。

なぜ増えていないのか(おそらく以前から)を考えたところ「はてブ」を付けていただけるような記事を作ることはもとより、そもそもボタンを設置していないのが大きかったのではないかと反省し導入しました。

また改修していて気づいたのですが [共有] ボタンを押してから、使いたい SNS のボタンを選ぶ手順も良くないなと。[共有] の右に直接アイコンを並べるようにしますが、そのお話は次回。

ウェブサイトのちょっとしたところを修正したい場合に、Chrome DevTools [検証] からの、全文検索は結構使えます。スタイルを手直ししたり、配置を入れ替えたりといったときにおススメです。

Author:lulzneko

lulzneko

2019-04-09

ふりかえり

ブログメンティふりかえり１週目

カック@ブロガー / k9u(@kakakakakku)さんにブログメンターをしていただいて１週間。さっそく、ふりかえりの記事を書きます。当初は隔週で書きたいと考えていましたが、最初の１週間で圧倒的な影響を受けているので、熱いうちにアウトプットしたく、１週目にしてふりかえりを書きます。

シリーズの記事

ブログメンティ始まる
ブログメンティふりかえり１週目(本記事)

ブログメンティーとしての目標設定

技術系記事を以下のペースで公開することを設定しました。(※ このシリーズの記事はカウント外)

週１回を必達とする
週２回を目標として設定する

１週目は以下の記事を書くことができ、目標を達成できました。

Shiftup! のイベントで発表させていただいたので、たくさんの記事を書くことができました。今週は技術記事を書いていく予定です。

各種メトリクスの推移と考察

毎週日曜日に以下のメトリクスを取得しています。
こちらは達成数値のノルマとかではなく、推移を見ていただいています。次回からグラフで表示できるようにします💦

週間 PV

Google Analitycs で取得しています。
全体、ブログ、lulzneko で取得しているのはriotz.worksドメインがブログだけではなくイベントでの発表用の資料やアプリが同居しているのと、メンバーのうさぎ / Riotz.works(@lopburny)とjavaponny(@javaponny)が書く記事も含まれるため、分類しています。

イベントで発表したため記事の伸びより全体の伸びのが大きくなっています。発表資料にアクセスいただいたのと、記事の埋め込みからもアクセスになるので差が出ています。

トップ５は以下で、こちらがアクセス数の 85% を占めています。
私の記事へもたくさんのアクセスいただきありがとうございます。

Shiftup! イベントや名刺セミナーは直近だったことと、Twitter ハッシュタグなどから来ていただいた方も多かったようです。２位のアドベントカレンダーで書いた記事や、４位の JAMstack 記事が根強く見ていただけているようで、うれしいです！
メンティ始まるは、カック@ブロガー / k9u(@kakakakakku)さん砲です。

アクセスいただき、ありがとうございます。
引き続き、よい発信ができるよう精進します。

はてなブックマーク数

サイト内の合計はてブ数を表示するツール｜はてブチェッカーで取得しました。
スタート時から変化なく。
ブログ内にはてなブックマークをつけるためのボタンなどを用意していないのが悪いです。。。このブログはHexoを使っており、たしか Plugin があったはずなので設置します。

[2019-04-10 追記]
ブログで使っている Hexo の SNS 共有リンクにはてなブックマークを追加するを書きました。
Plugin はなかったのでテーマを直接修正する方法で実現しました。

Twitter フォロワー数

フォローいただきありがとうございます。

メンティ始まると Shiftup! イベントでフォローしてくださった方が多かったように感じました。しっかり情報発信してまいりますので、今後ともよろしくお願いいたします。

気づき、学び

「すぐに」「ポジティブに」

カック@ブロガー / k9u(@kakakakakku)さんが、すぐにレスポンスをしてくれ、そしてエネルギーをくれる話し方をしてくれます。
書いた記事のレビューや、相談、チョットしたやり取りといった時に、すぐにレスを返してくれて前向きなコメントをもらえる。これがすごくエネルギーになり次のアクションをする原動力になって、記事を書いたりして DM する。そしてまたすぐに返ってくると、とてもよいサイクルを作ってくれいます。ありがとうございます！！

この「すぐに」「ポジティブに」は、とても素晴らしいエネルギーになるということを身をもって勉強させてもらいました。これは、どのような場面でも役に立ち、よい環境を生み出します。このやり方を身に着けて使えるようになりたいです。

コミュニティへの感謝と貢献

技術について書くには、まったく新しい技術をゼロから全部生み出さない限り、元になる技術や関連する技術があります。そういった技術に対して、コミュニティに感謝し還元することを大事にされていて、それを記事のレビューや会話の中から自然と伝えてくれます。

Hexo を使っている話から「記事を書こう、そして Pull Request を出してみよう」や、Shifter への機能提案の記事では「コミュニティへ投げかけてみよう」など、技術やコミュニティへ貢献する活動を意識することを心がけるようになりました。

これは技術について記事を書くからだけでなく、普段からたくさんの技術に助けられ、また業務でも使わせてもらいと、とにかくお世話になっています。しっかり感謝して貢献していきます。
そして貢献する方法も発信していき、多くのコントリビューションが生まれる１つのきっかけしたいです。

ターゲットはだれか！？

記事を書くときに「誰に」「何を」を意識するにようなりました。
これまでは、なんとなくはあるものの「ブログを書く」に寄ってました。
そのためせっかく書いた後も「ブログ書きました。タイトル、URL」とツイートするだけで、何を書いてよいかわからないというか考えつかないようなことが多々ありました。

イベントやセミナーの参加レポートは参加できなかったけどテーマに興味を持っている人への共有。発表の記事では参加した方に話した内容の振り返りや次の発表の機会があったら多くの方に来てもらえるように。などと読んでくださる人に何を伝え、読んだ後にどうなってほしいのか、どうしてほしいのかを持って書くようにということが自然と意識されるようになってきました。まだまだ漠然とした意識なので、これをしっかり持って記事で伝えたいことをメッセージしていけるようにしたいです。

ブログ眼

記事のテーマにつながる話をたくさんしてくださります。そのため自然と「これはテーマになるかな？」という感覚を持つようになってきました。
使っているものなら発信する貢献する、たとえば当ブログで使っている Hexo。
使っている技術と同種だったり関連があるものは調べ発信する、たとえば AWS の話から Amplify Console の評判と東京リージョン提供開始について。
使っていなくても導入しそうなら調べ発信する、たとえば誤字からセルフレビュー textlint。
１つ１つに皆さんへ伝える価値を考え、調べ、使い、発信し、貢献するにつなげていくというループに。そのためにブログ眼を鍛えていきます。

まだまだあるのですが、まずは大きく感じたところを整理しました。
１週間で非常に多くの気付きに学びがあり、カック@ブロガー / k9u(@kakakakakku)さん凄すぎます！

DM でのやり取りも褒めていただいたりと嬉しくなって油断してると、せっかくの教えが流れていきそうで慌ててまとめを書き、気を引き締め直しです。

“ターゲット” の項ではないですが、本記事のテーマは「ブログメンターの教えお裾分け」です。
何よりのターゲットは私自身の学びの整理ではありますが、教えて頂いている内容はブログを書いている方や書こうと思っている方の参考になると考えています。そのため頂いた教えを微力ながらもお伝えする次第です。

Author:lulzneko

lulzneko

2019-04-06

レポート

Shiftup! JP_Getshifter Vol3！振り返り、Shifterのヘッドレス CMS 化に思いを馳せる

2019年4月3日に開催された「Shiftup! JP_Getshifter Vol3！はじめてのスタティックサイトジェネレーター」でディスカスした「Shifter のヘッドレス CMS 化」についてアイデアになります。
WordPress コンテンツ作成管理＋スタティック・サイト・ジェネレーターウェブ生成＋ Shifter 運用管理な構成っていかがでしょう？

シリーズの記事

Shiftup! JP_Getshifter Vol5！にて「Shifter ＋ SSG の世界」について発表をしました
Shiftup! JP_Getshifter Vol3！で JAMstack なサーバーレスウェブフロントについて発表をしました
Shiftup! JP_Getshifter Vol3！参加レポート
Shiftup! JP_Getshifter Vol3！振り返り、Shifter のヘッドレス CMS 化に思いを馳せる(本記事)

イントロダクション

Shiftup! JP_Getshifter Vol3！にて Shifter Webhooks の発表がありました。
このは Shifter がサイト生成した際に、Shifter CDN 以外のホスティング環境へデプロイできるようにする機能です。

この機能についてピザ休憩で話をしている際に、Shifter の生成済みウェブサイトを流すのではなく「管理しているコンテンツを任意の CI へ流すことができたらすごいのではないか」という話で盛り上がりました。

発表者青空俯角 / mimi(@miminari)さんのブログgridsomeのススメとShifterの可能性について – Photosynthesic blogで言及されている、こちらになります。

ざっくり言うと Shifter の WordPress エディターとコンテンツ管理・運用を利用ターゲットとし、WordPress で作成したコンテンツのソースを任意のスタティック・サイト・ジェネレーターにかけて JAMstack なサイト生成するということができるのではないかという話です。

スタティック・サイト・ジェネレーターを使う場合、コンテンツ管理をヘッドレス CMS というエディターとコンテンツ管理のためだけのサービスを使い、そこからコンテンツを取得してスタティック・サイト・ジェネレーターでサイト生成するという手法があります。
この手法を Shifter で実現すると、とても良いことが起こるのではないかという考えになります。

以下は私の発表で使ったものですが、WordPress の部分を Shifter にして動作させることができたら嬉しいというものになります。(REST で取得するかどうかは別として)

ヘッドレス CMS とは

ここで “ヘッドレス CMS” という概念が急に登場したので、整理しておきます。

JAMstack なブログや記事を配信するサイトを作る際に、その記事のソースをどのように管理するのかという話があります。スタティック・サイト・ジェネレーター自体は記事を管理する機能はなく、特定のソースから JAMstack なサイトを作ることに特化しています。そのため記事のソースを管理する方法が必要となってくるからです。

１つは、ローカルにある Markdown などのファイルをソースとし使う方法になります。
サイトの構成と一緒に記事も管理する方法になります。たとえば、この記事自体は Markdown ファイルとして Git で管理されていて、同じリポジトリ内にサイト生成のテンプレート類も入っています。これを Hexo というツールで JAMstack なサイトとして生成し、GitHub Pages でホスティングしています。

もう１つは、CMS で管理されているソースをもとに JAMstack なサイトを生成する方法です。
この方法で使う CMS はエディターとコンテンツ管理が主体になります。コンテンツの作成と管理に特化していて、ウェブサイトは別で持ってくださいという形です。

このエディターとコンテンツ管理に特化した CMS をヘッドレス CMS と呼びます。
CMS は通常エディターとコンテンツ管理から、ウェブサイトの生成とホスティングまでのすべてを担っています。このウェブサイト生成とホスティングがないものを Headless とし、Headless な CMS、ヘッドレス CMS と呼ばれています。

通常 GUI がないものを Headless と呼ばれますが、ヘッドレス CMS はコマンドラインベースというわけではなく Web UI がちゃんとあります。この場合「ウェブサイト側」がないことを指して Headless と呼ばれるようです。

主なヘッドレス CMS はheadlessCMS | Top Content Management Systems for JAMstack sitesで見つけることができます。

最近はContentfulが話題になっているようです。(私は Markdown ＋ Git 派なので、ヘッドレス CMS を使ってないです。すみません。。。)

Shifter がヘッドレス CMS 化した場合の世界観

では、Shifter がヘッドレス CMS になると何がうれしいのかということですが、Shifter = WordPress だからです。

WordPress は世界で一番使われている CMS といわれることがあります。最近では note などの新しいサービスが色々登場し、老舗のはてなや技術系のQiita といった人気のサービスもあるとはいえ、なんだかんだで WordPress を使ったり、立ち上げたことがあるのではないか。

その「使っている人が多い」「使ったことがある人も多い」「初心者にも使いやすい」という特性を Shifter は活かすことができます。

そして WordPress のコンテンツ作成力(= エディターと管理) をそのままに、スタティック・サイト・ジェネレーターのウェブサイトの表現力を組み合わせた場合に、すごい相乗効果が得られると考えています。

WordPress のテーマはたくさんあり優れていますが、オリジナルを作ろうとすると途端にハードルが上がります。また、ブログではなくウェブサイトを作ろうとすると、これもまた大変です。この部分をフロント系の得意な技術、つまり任意のスタティック・サイト・ジェネレーターへ転換することができたら、素晴らしいマリアージュが生まれるのではないでしょうか。

では WordPress を自前で立てて、REST API 経由でスタティック・サイト・ジェネレーターへ流したらよいのではないか、まさに発表のときに使った図の構成になります。

しかしながら、この図には欠点があります。WordPressの管理運用をどうするのか。

WordPress を立てて REST 経由でコンテンツを取得すると、WordPress へアクセスできることになり、WordPress を守る必要が出てきます。またバージョンアップなどの管理も必要となります。これは WordPress だけではなく、PHP に、ウェブサーバー、DB、OS とたくさんの管理対象が発生します。

これを Shifter にお願いすることができたら？
完全に管理しておいてくれるので安心であり、管理作業から解放されることになります。

できればスタティック・サイト・ジェネレーターで作ったサイトを Shifter CDN へ返せるとさらによいのですが、そこは難しいようでしたら Netlify や S3 など、CI からデプロイできます。

以上が Shifter がヘッドレス CMS となり、スタティック・サイト・ジェネレーターと組み合わせることの世界観とメリットになります。

まとめ

Shifter がヘッドレス CMS として動作してくれることで以下のようなメリットが生まれます。

WordPress による、コンテンツ作成管理力
スタティック・サイト・ジェネレーターによる、ウェブサイト表現力
Shifter の WordPress マネージドによる、WordPress 管理からの解放

Shifter さん、ぜひ検討してみていただけませんか？
ヘッドレス CMS という表現を使っていますが、生成済みサイトを流すのではなく、単に管理しているコンテンツのソースを流すような仕組みがあればということで、スタティック・サイト・ジェネレーターと組み合わせてステキなことができそうです。

ウェブサイト構築はデザイナーさんやフロントエンドエンジニアさんがやり、記事などのコンテンツを継続的に作っていくのは実務部門やるといったことがあります。そういった時に表現力のあるウェブサイトを作りながらも、WordPress によるコンテンツ管理の運営を発揮できるのではないでしょうか。

Shiftup! JP_Getshifter Vol3！参加記三部作、最後の記事になります。

ちょうど発表者青空俯角 / mimi(@miminari)さんと運営のKOGA Hiromichi(@digitalcube)さん、Seiji Akatsuka(@seijiakatsuka)さんと Shifter アップデートについての話をして、Gridsome との組み合わせに話が及んで浮かんだアイデアになります。(イントロダクションで青空俯角 / mimi(@miminari)さん記事引用の話)

本記事の主題としては「Shifter さん、ぜひ作ってください」にはなりますが、WordPress の運用部分は発生するものの Gridsome などと WordPress を組み合わせて同様のこともできますし、実際にやったことがある案件で Nuxt.js から WordPress REST API を呼び出してモバイル対応してない既存 WordPress サイトのモバイル対応するというのもやったことがあります。

WordPress とスタティック・サイト・ジェネレーターの組み合わせは、応用力が高いと考えています。
そのためアーキテクチャや考え方などについて発信したく、またヘッドレス CMS ＋スタティック・サイト・ジェネレーターという JAMstack のアーキテクチャの１つを広めたく書いたものになります。

そして勉強会に参加すると、こういった使い方や新しいアーキテクチャについての議論ができたりします。今回はかなりカジュアルでお話しやすいイベントだったというのもありますが、実際にサービスを展開されている方や発表者さんとディスカスできるのは、とても素晴らしく、よいですね。

どこかでお会いしましたら、いろいろなアイデアについてディスカスしましょう！

Author:lulzneko

ブログ メンティー としての目標設定

各種メトリクスの推移と考察

記事数

週間 PV

はてなブックマーク数

Twitter フォロワー数

気づき、学び

アウトプッターの使命と目的意識

慌て記事への反省

ブログへの愛情と厳しいチェック

コミュニティへの貢献

タスク管理導入の背景

Asana とは

Asana の良いところ

日本語化されている

スマートフォンアプリが爆速！

ネットにつながっていなくても利用できる

アプリやサービス連携が豊富

エフェクトでテンションが上がる

Asana のサインアップ

「テキスト校正くん」とは

インストール

設定

hexo-related-popular-posts

プルリクを出すことになった背景

インストール・エラーとなる原因

フォークしてプルリク作成の環境用意

フォークした自分のリポジトリに変更を加える

プルリクの作成

一晩でマージされた！

JAMstack なサイトの強み/弱み

hexo-related-popular-posts plugin！

インストール

人気の記事リストを表示

Hexo と hexo-related-popular-posts の動作確認

人気の記事のウィジェットを作成

作成した人気の記事のウィジェットを有効化

作成した人気の記事のウィジェットのスタイル適用

注意

関連する記事リストを表示

Google Developer Console で Analytics API の準備

Analytics API の認証情報を作成

Google Analytics の認証情報を作成

sfarthin/ga-analytics でデータを取得

不要となった場合

Hexo の SNS 共有リンクの改修

改修ポイントを確認

SNS 共有ボタンを移動

SNS 共有ボタンにスタイルをあてる

[共有] のラベルからマウスカーソルスタイルとアイコンを外す

SNS 共有アイコンのボックスを表示するスクリプトを削除する

完成！

Hexo とは

記事の共有リンクに「はてなブックマーク」を追加する

リンクを追加する

スタイルを追加する

できあがり

ブログ メンティー としての目標設定

各種メトリクスの推移と考察

週間 PV

はてなブックマーク数

Twitter フォロワー数

気づき、学び

「すぐに」「ポジティブに」

コミュニティへの感謝と貢献

ターゲットはだれか！？

ブログ眼

イントロダクション

ヘッドレス CMS とは

Shifter がヘッドレス CMS 化した場合の世界観

まとめ

ブログメンティーとしての目標設定

ブログメンティーとしての目標設定