TECH
2020.09.27
AMP OptimizerによるAMPのさらなる最適化
以前、Optimize your hosted AMP pages - amp.devを読みながらAMPの最適化を行いました。 AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜 - SIS Lab このサイトもAMP対応したのだから、LighthouseやPageSpeed Insightsのスコアもきっと高いはずと計測してみたところ、全然スコアが出ていなかったので改善しました。 …
TECH
2020.08.15
Progressive Web Appを有効にする
このブログでは、HugoでFull AMPなHTMLを生成し、GitHub Pagesでホストしています。 AMPの最適化を行う際、Lighthouseを利用してWebパフォーマンスを測定しているのですが、PWA Readyになっていないことが気掛かりでした。 個人ブログをPWA化しても自分しか使わないため、自己満足に他なりません。 しかし、PWAがグリーンにならないのは気持ちが悪いため、今回エ …
TECH
2020.04.10
Blog KPI Collector（GAS）で各種KPIを自動取得する
ブログメンタリング期間中は、事前に設定したブログKPI（ページビュー数、ユーザ数、Twitterフォロワーなど）を報告するため、毎週日曜日に手動で取得していました。 しかし、ブログメンタリング終了後、報告する必要がなくなるとどうしてもめんどくさいことはやらなくなってしまいます。 そこで、今まで取得していたKPIをGoogle Apps Scriptで自動取得するように設定してみました。 …
TECH
2020.03.31
小さな習慣・アウトプット駆動生活〜ブログメンタリングのふりかえり〜
2019/12月〜2020/2月の期間で@kakakakakkuさんのブログメンタリングを受けて、「ブログを毎週1記事必ず書く」という目標にチャレンジしました。結果としては、@kakakakakkuさんのサポートもあり3か月間毎週1記事以上書くことができ、目標を達成しました。 同じ期間でTableauの「DATA Saber認定制度」も同時並行で進めていたので、図らずとも「学んだことをブログに …
TECH
2020.03.13
npm-run-allでローカルAPI serverとHugo serverを同時に実行する
このブログではローカルでAPIサーバ（Express）を動かし、HugoのShortcodesから利用しています（2020/03/13現在）。 HugoでAMP対応のブログカードを作る - SIS Lab そのため、記事を書いてHugoのプレビューを利用する場合は、2つのターミナルで以下のコマンドを実行していましたが、ちょっとだけ面倒です。 API Server: npx ts-node …
TECH
2019.11.16
Cloudflare AMP Real URLをブログに導入する
AMPページをGoogleドメインではなく、自ドメインで表示できる「AMP Real URL」をこのブログにも導入しました。「AMP Real URL」に関する日本語のページがあまりなかったので、手順をまとめてみました。 ブログに適用するは物好きしかいない、かつ、企業で導入するにはまだまだ早いということでしょうか。 まだまだ発展途上の仕組みだとは思いますが、個人のブログなのでなんの気兼ねなく試 …
TECH
2019.10.11
AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜
このサイトもAMP対応したのだから、LighthouseやPageSpeed Insightsのスコアもきっと高いはずと計測してみたところ、全然スコアが出ていなかったので改善しました。その時のメモを残しておきます。 目次 TL;DR 計測 セルフホストしたAMP Pagesを最適化する 1. 最初のタグはmeta charest tagで始め、その後残りのmeta tagを記述する 2. …
TECH
2019.10.06
AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した
ミニマルCSSフレームワーク「A Responsive CSS Grid for AMP | 1BX」を試してみました。 目次 TL;DR AMP用のCSSフレームワークに求められること 1BXとは ハマった点 解決方法 参考 TL;DR Hugoで作成するようなブログにおいては1BXで十分構成可能 サイズが小さくても、グリッドレイアウトを利用可能 2文字クラス名を多用して …
TECH
2018.12.13
GitHub Pagesで複数の独自ドメインサイトを運用する
GitHub Pagesを利用する上で、公式ドキュメントやいろんな人のブログを読みつつ、自分で試行錯誤した結果を残しておきます。 目次 GitHub Pagesの始め方 個人的なおすすめ 参考 逆に
TECH
2018.11.03
QrunchとMediumに技術メモをクロス投稿する
もっと気軽にアウトプットできる技術ブログサービス「Qrunch（クランチ）」では、重複コンテンツの心配をせずにクロス投稿ができることを知りました。
TECH
2017.12.22
はてなダイアリーからはてなブログ経由で独自ドメインのブログに記事を移行しました
概要 今まで、はてなダイアリー(d.hatena.ne.jp.meganii)の記事は移行せずにそのまま残していました。しかし、Scrapboxのユーザー会に参加して過去コンテンツの重要性に気付き、今のブログに全て集約したいと考えました。 そこで、はてなブログを経由させて、独自ドメインのブログに記事を全て移行しました。 その結果、はてなダイアリーからはてなブログにブックマークを含めて簡単に移行 …
TECH
2017.10.07
HugoのRelated Contentを利用して関連記事を表示する
Hugo | Hugo 0.27: Fast and Flexible Related Content! Hugo | Related Content いつのまにかHugo 0.29から関連コンテンツ表示機能が追加されています。これによって他のCMSではプラグインで簡単にできていたのに、Hugoではできないというポイントが解消されました。もはや、Hugo最強説！！。 さっそくこのブログにも試し …