2020年の振り返り

今年は去年よりも余裕がなく。

ツール・技術

• DietCube (1月～)
  • MVC の PHPフレームワーク を漸く使えた感じ。 DI も概ね理解できたと思います。今年はバックエンドはこれをメインに構築していました
  • phpmig, FaaPz/PDO, Guzzle
• wp-env (3月、9月)
  • wp-envを試すなど: `.wp-env.json`を試す
    • (完) `wp-env` で英語以外のコアを指定して `wp-env start` するとエラーが出力される
  • 最初は日本語版 WordPress を指定すると npm scripts と連動が上手くできませんでしたが、後に解消
• XAMPP
  • PHPのアップデートを実施(2月): XAMPPのPHPのバージョンをアップグレードする ( 7.1.7 → 7.4.3 )
• CentOS8 (2月)
  • CentOS8 をインストールして遊んでみる (2月)
    • ただし、 CentOS が方針転換したので今後使用するかは微妙ですね……
      • 参考: CentOSの開発方針変更メモ、他
• React Static (6月)
  • 少しだけ: React Staticを試してみる
• React (6月～)
  • こちらも少しだけ。ただ、以前 Vue.js をやっていたおかげで考え方を流用してさっと押さえられたのは良かったと思います: react-scripts + cross-env で簡単に React をサブディレクトリにデプロイする
• validatorjs, Valitron (8月)
  • `validatorjs` と `Valitron` のカスタムルールを作成する
• chokidar (8月)
  • gulp-watch と gulp.watch を見ていくうちに chokidar について勉強できたのは良い経験でした: `gulp-watch` の第二引数 `options` の `ignore` の挙動について (不完全メモ)
• phpMyAdmin (11月)
  • 今更ではありますが: phpMyAdmin のインストールと動作検証
• Dart Sass (11月～)
  • LibSass から Dart Sass への乗り換えを実施。 Ususama も乗り換えました: LibSass から Dart Sass への乗り換え
• Webpack (11月～)
  • こちらも Ususama を gulp-uglify-es から webpack-stream に乗り換えました: 続・ Gulp 4 + Webpack 5 を試す (resolutions 使用)
• Jest (11月)
  • 少しだけ。来年は使いこなしたいですね: Jest を触ってみる
• BackstopJS (11月～12月)
  • ビジュアルリグレッションテストツールとして検討。ただしメインビジュアルを vh 指定していたり、縦長ページだったり、スクロールによって表示する要素があったりすると上手く動かず挫折
    • test_backstop_randa_back_stopper_2
      • 基本的に決め打ちテンプレートの JSON ファイルと、逐次プロジェクトごとに設定を変更する部分を担当する YAML ファイルで設定を切替しやすくして、それらを config.js でパラメータとして渡しつつ動作させる、という仕組み自体はそこそこできていただけに残念……
    • BackstopJS で背景画像の高さを `vh` 単位で指定したページで画像やスクリーンショットが引き伸ばされる現象についてメモ (未解決)

環境・サービス

• Twitter API
  • API申請したり(2月)。Twitter APIの申請(2020/2/11現在)
• Crieit (11月～)
  • 10月に Qrunch がサービス終了してしまったので引っ越しを。

自作

• arm-band/dietcube-kyokotsu
  • スケルトンプロジェクトをフォークしてボイラープレート化
• Chigaeshi
  • とあるURLのリスト。 React で作成。React.js+Material UI+axiosでJSONデータを読み込んで表示させるペライチなページを作る
• Twitter のいいねを解除するアプリを作る
  • Twitter API を利用して。 user context について理解を深めることができました
• giffard_preflight (10月)
  • CORS と preflight request の検証のための実験ツール。 React と DietCube で作成: CORS の挙動の観察と preflight request の検証
• Ansible系 (10月～)
  • philotic_moby_test (10月)
    • Ansibleコントロールノード を Dockerコンテナ として構築するテスト。サーバにインストールされているパッケージ一覧を取得: Ansibleコントロールノード を Dockerコンテナ でビルドし、リモートサーバに公開鍵認証でSSH接続してインストール済みのパッケージの一覧を取得するまで
  • philotic_moby_apache_vsftpd (12月)
    • Linuxユーザを作成してFTPユーザとし、 Apache の仮想サイトを作成する Ansibleプレイブック等。 Docker 使用: Ansible を使って FTPユーザの作成と Apache の仮想サイトの設定をする
• wp-env (9月)
  • wp_geidon
    • wp-env を使用した最小限の開発環境
• WordPress プラグイン
  • wp_plugin_screaming_head (11月)
    • WordPress の head タグの中を整理するプラグイン(※設定画面付き): WordPress の head タグの中を整理するプラグイン (設定画面付き) の自作
  • wp_plugin_furusoma (11月)
    • 管理者画面(記事編集画面、投稿一覧ページでの簡易編集画面)でカテゴリーのチェックボックスを非表示にする簡易なプラグイン: WordPress の管理画面内のみ特定の投稿のカテゴリを非表示にするプラグイン

この他新技術を試すためのサンプルページやブラウザの挙動の検証のためのサンプルページを多数。

• css counter: Abstract – Reasons
• Firefox の table タグの検証: Table at Firefox
• テキストの文字色と枠線の色が同色の場合の縁取りのテスト: Home – Ghastly Dream
• React で虹と青色のページを: Everything is gonna be okay / MAKE IT BLUE
• ステップ(パンくず、フローチャート)関係のサンプルページ: Home – Twelve
• チェックボックスのカウントテスト: Kamado – Okitsuhiko
• Bootstrap 4 のスイッチを大きくするテス: Home – Switch-on Airget-lamh
• スクロールしたときにアイキャッチ画像が一瞬引き伸ばされる現象の検証: Home – Vampire Stretch
• スクロールバーのカスタマイズのサンプルです。Chrome系(webkit)のみ。: Sucrose Bar – 棒砂糖
• Dart Sass で Bootstrap4 の変数を上書きできるかテスト: Black in me – Black! – Blackout
• マウスストーカーのテスト: Home – Vampire Stoker
• Slick のテスト: Home – Slick Test
• タブとアンカーリンクのテスト: Home – Tab-loid
• Intersection Observer API のテスト: Graharaja Santa Cross

単純に作った数で言うと結構な数になる気がします。

イベント

• WordCamp Ogijima 2020 Online 参加レポート
• 第5回 群馬 WordPress Meetup オンライン参加レポート

今年は新型コロナウイルスの影響でイベントが総崩れしたので仕方なし。第5回 群馬 WordPress Meetup で発表した内容も3月のものでしたし。

まとめ

いつも以上にフロント、バック、インフラと上から下まで手を出している範囲が広い一年だった気がします。

フロントで言えば去年は Vue.js だったのですが、今年は React系 に手を出したのが大きなハイライトでしょうか。あと、じっくり腰を据えて取り組んだのが CORS, preflight request と chokidar の学習。

つい最近ですが、 Sass を Dart Sass に切り替えたのも大きなハイライトですね。まあ、公式で LibSass が deprecated と言われてしまったのでやむなしですね。

Ususama の処理も Dart Sass に切り替えました。また、 JS 側は Webpack に切り替えました。これも何気に大きな変化ですね。

バックエンドは DietCube をベースにあれこれ作りました。 DI の理解が大きなハイライトだったかと。

インフラで言うと Docker をそこそこ使い始めていて、 wp-env でもそうですが、 Ansibleコントローラ として使ったりと起用が目立ちました。

Ansible 自体は 2017年くらいに一度触ったことがあったのですが、自分で設定したい内容のプレイブックを作成したのは今年が初めてで、実際に何度か動かして作業の効率化を図ることができました。

他、ブラウザの不具合っぽいものや新しい技術を試すためのテスト・サンプルページを多数。

OSS でいうと、些細なところですがいくつか Issues やプルリクを送ったのも一応活動にはなったかと。

---

イマイチまとめきれてない気もしますが、時間も無くなってきたのでこんなところで。