portal shit!

Archive ページ をリファクタリングした。

これまで gulp をビルドに利用していた（Archive ページを React Router 化）が、 webpack を使うように変えた。

React のコードも見直して、 DOM の状態に依存して表示・非表示を切り替えるコードがあったりして（ 🐙 Archive ページにカテゴリごとの記事件数を表示する機能を追加 ）ごちゃごちゃしてたので DOM を直接ごちゃごちゃ操作するのをやめて React で管理するように変えた。親コンポーネント、子コンポーネント、孫コンポーネント、子コンポーネントの兄弟コンポーネント間で状態を共有する必要があって、結構難儀した。

実際の画面を見るとこんな感じ。

App というコンポーネントがルートにあって、子に CategoryList 、CategoryList の子コンポーネント（ App からすると孫）に Category コンポーネントがある。記事一覧自体は CategoryList と兄弟コンポーネントである Archive コンポーネントが担当している。

こんな感じで特定の Category が選ばれたことを Category のクリックイベントをトリガーに CategoryList に伝達し、 CategoryList はさらにそれを App コンポーネントに伝える。その結果が App から Archive コンポーネントに伝えられ、表示内容が変更される。

この辺を参考にして実装した。コールバック関数を props として引き回し、状態を回収する感じ。

Reactjs - How to pass values from child component to grand-parent component?

Below is correct example for passing the values from child component to parent component in reactjs. App.jsx import React from 'react'; class App extends React.Component { constructor(props...

stackoverflow.com

React Router v4 でルーティング先の component に Props を渡す方法 - ngzmのブログ

「React Router v4 でルーティング先の component に Props を渡す方法」について調査したので記事にします。 基本的なReact Router v4 の基本的なルーティング React Router v4 の基本的なルーティングは次のような感じでコーディングします。 import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render(( <BrowserRouter> <AppFra…

ngzm.hateblo.jp

ただこういう込み入った状態の管理を React で行う場合は Redux などを利用するのが良いようだった。

ReactとFluxとReduxについて順を追って整理する

書き途中 React Viewのライブラリ。 なぜ、従来のjQueryやBackbone.jsやVue.jsで…

hogehuga.com

前職のとき、 Redux とか Flux が出てきた頃に F/E のエンジニアの人たちが熱狂してたけど自分はいまいち理解できなくて、傍観するだけだったが、いまさらにして何となく Flux アーキテクチャの概要的なものを把握することができた気がする。ただ自分の場合は深みに入り込まず極力シンプルに作りたいと思っていたので Redux などには手を出さず、 Callback で愚直に状態を親コンポーネントに伝達していく方法をとった。

React 、やっぱり大分良いものだとという感じがした。 jQuery でクラスや CSS で show - hide を Toggle していた頃とは隔世の感がある。

久々に開発環境をいじってて brew upgrade tmux したら色々ぶっ壊れてつらい。

具体的には以下のブログを参考に、 pane の swap を screen 風にしていた設定が効かなくなってしまった。

tmuxのペイン切り替えをscreenみたくする(ターミナルマルチプレクサ Advent Calendar 2011 23日目) - kozo2のはてなダイアリー

ターミナルマルチプレクサ Advent Calendar 2011の23日目でございやす。 すいやせん、日またぎ遅刻しやした。tmuxはscreenと比べると設定をあまりせずとも便利に使えるのがいいところですが、screenから乗り換えた際にどうしても不便に感じるのがactiveなwindowのpaneに別windowのpaneの情報をもってくることではないでしょうか。僕は下記のscreenでできてたことをtmuxでしたかったけどやり方わからず不満だったんですね。 windowをpane2個になるように分割してから 1.のpane2個のうち片側のpaneをC-n, or C-p で次or前のw…

kozo2.hatenadiary.org

## paneの入れ替えをscreenっぽく
bind-key C-n swap-window -t:+ \; swap-pane -s:-
bind-key C-p swap-window -t:- \; swap-pane -s:+

こういう使い方をしていた。

# 状態 1
window 1 A|[B] <- window 1 の pane B がアクティブ
window 2 C     <- window 2 に pane C が単独で存在

C-b C-n を入力し、以下のような配置になっていた（これまで）。

# 状態 2 (tmux 2.8)
window 1 A|[C] <- window 1 の pane B があったところが pane C になる
window 2 B     <- window 2 には pane B が単独で存在

ところが tmux 2.9a 以降ではこんな風になってしまう。

# 状態 2 (tmux 2.9a)
window 1 [B]   <- window 1 pane B が単独で存在しアクティブ
window 2 A|C   <- window 2 に pane A と C 単独で存在

このほかにも tmux-powerline が綺麗に動かなくなったりして色々厳しい。 tmux は 2.8 までが安定している気がする。

仕事ではほとんどコード書かなくなってしまったのでたまの休みで時間があるときになんかやろうとするとこういうトラブルに遭遇して死んでしまう。プログラミングスキルのみならず開発環境の維持・セットアップにいたるまで、プログラミングに関連するあれこれは料理人が日々包丁の手入れをするように常日頃から磨いていないとさび付いてしまう。

追記

tmux の件は以下なんかを参考にしてみようかな。

tmux-change-paneというコマンドを作った

ota42y.com

さらに追記（2019-08-25T11:34:25）

.tmux.conf を以下のようにしたら解決した。

bind-key C-n swap-pane -t:-
bind-key C-p swap-pane -t:+

むしろ最近の変更で tmux の pane スワップの挙動が自分の好み（ screen 風）に近づいたみたい😅

最新の Rebuild.fm のエピソードを聞いてたら Automattic による Tumblr 買収の話から Medium 、 WordPress から古の Blogger 、 TypePad 、 MovableType まで話が及んで楽しかった。

Rebuild: 246: You Are Welcome (fumiakiy)

rebuild.fm

エピソード内で miyagawa さんがインディーなインターネットユーザーとして独自ドメインは重要だけど、誰も使わないから当てられるサービスがなくなってきた、その意味で WordPress は独自ドメイン使えるので悪くない選択だと思う、的なことを言っていたのが印象的だった。エピソード中でも触れられていたけど、 Medium は新規登録ユーザーに対して独自ドメイン利用を利用不可能にしている模様。

Custom Domains service deprecation

As of November 2017, Medium is no longer offering new custom domains as a feature. Instead, you can create a publication on Medium that will live on a medium.com/publication-name URL. Existing publ...

help.medium.com

ブログプラットフォームとしての知名度を高めるためには一目で「あ、このブログは Medium 使ってるんだ」とわかった方が良いはずで、となると独自ドメイン名を使われるのは良くないと判断したんだろうなぁ。

加えて Medium は確かに最近よくログインを求めてくる。旧型の iPhone 7 で見ると画面の 1/3 くらいの領域をユーザー登録導線にしてる感じ。読みづらい。なんらかのプラットフォームに乗っかると、やはりプラットフォームに「こう使って欲しい」と制約をかけられることになりがちだ。ステークホルダーが書き手、読み手、プラットフォームの三者になるので当然といえば当然か。一方でセルフホストのブログなら基本的には書き手と読み手の二者しかステークホルダーがいない。

ブログは自分で作るのが一番満足度高いと感じる。意に反して広告が出るようになることはないし、読者にログインを強要したりもしない。足りない機能があれば自分で作ればよいというのもよい¹。自分はセルフホストのブログを同じドメインで 14 年やってて、最初は P_BLOG 、 そしていまは Lokka を自分で細々と改修しながら使ってる。時々更新が途絶えることはあるが、ほぼほぼ毎月一本は何かしらを書き続けることができている。サーバーの運用は発生するが、まぁプログラマーなら自宅サーバーか VPS くらい飼ってるだろうし、運用は趣味の一環かなという感じがする。

Lokka のプレビューはサーバーサイドに保存時と同じパラメーターを POST して、 DB にレコードを保存せずレンダリングだけ行うが、 GitHub や Kibela のようなタブ切り替えでインスタントに Markdown のプレビューができると便利だろうと思って、 Markdown で編集中に Edit と Preview をタブっぽい UI で切り替えられるようにしてみた。

Markdown のレンダリング自体はサーバーサイドで行っているので、プレビューしたときと実際に保存したときで Markdown の解釈が異なるということもない。

ただリモートで生成した HTML 文字列を DOM に挿入するときに単純に document.innerHTML = body; のようなやり方をしてしまうと JavaScript が動かず困ったので、 iframe を作って document.open(); document.write(body); document.close(); するやり方をとった。そうなると今度は iframe の高さを body のレンダリング終了後に調整する必要があって色々面倒だった。たまに高さがずれたりはするが、基本的にはめっちゃ便利。

Lokka の利用者少ないと思いますが、 Lokka 本体にも入れようと思います。 Ruby の最新版への追従へも最近は行えてないのでこれもやります。

このブログの記事投稿画面で、画像をコピーアンドペーストでアップロードできるようにした。以前、ドラッグアンドドロップではアップロードできるようにしていたが、 GitHub や Kibela ではコピーアンドペーストでアップロードできるようになっておりはちゃめちゃに便利だったので真似してみた。こんな感じ。

ハイパー便利。

Reference

Element: paste イベント

paste イベントは、ユーザーがブラウザーのユーザーインターフェイスで「貼り付け」操作を行ったときに発生します。

developer.mozilla.org

以前書いたことがある Castro （🎧 Overcast と Castro - portal shit!）がすごく便利になっている。

以前の記事では、 Overcast にあるチャプター移動機能やオーディオエンハンスメント・無音カット機能が Castro にはないと述べていた。しかし一年ちょい前にリリースされた Castro 3 により、有料ではあるがこれらの機能が提供されることになった。

Release Week: Castro 3 and Castro Plus

With this update Castro became free to download from the App Store. The triage features, and almost everything else, that users loved in Castro 2 are now free to use for everyone.

castro.fm

これがめっちゃ便利。 UI は前にも述べたとおりすぐれているし、さらに購読中の Podcast のショーノートを検索する機能も今年の 1 月についた。

Our first update of 2019 introduces local search:

- use the search bar in Archive to find podcasts
- tap the search icon on a podcast screen to search its episodes
- integrates with Spotlight to search from your homescreen

Get it now on the App Store: https://t.co/v5ZJTCNirt pic.twitter.com/JJyUpWwljC

— Castro Podcasts (@CastroPodcasts) January 30, 2019

これもスーパー便利で、「あの Podcast の誰々がゲストで出てる回を検索して聞きたい」というありがちな要望を満たすことができる。以下は Rebuild のエピソード一覧で "higepon" で検索し、 higepon さんが出てるエピソードだけを絞り込んでる図。

めっちゃ便利で最高なので是非お試し下さい。

2019 年 6 月の頭に Google が検索結果のコアアルゴリズムをアップデートしたらしい。

【Google】2019年6月3日、コアアルゴリズムアップデートを実施 | デジタルマーケティングブログ

【更新】2019年6月3日 コアアルゴリズムアップデートのロールアウト開始Googleは、2019年6月3日よりコアアルゴリズムアップデートのロールアウトを開始しました。今後、数日間で変更が反映されていくとのことです。

digitalidentity.co.jp

自分のブログはこの影響をもろに受けて、アクセス数が激減してしまった。自分ではよく分かっていなかったが、コアアルゴリズムアップデート前は痔ろう関係の記事が結構 Google で上位に表示されてたみたいだ。 6 月のコアアルゴリズムアップデートではお金や健康系の記事に対する評価基準が変わったらしい。より専門的で正しい情報を掲載しているサイトの方が上位に表示されるようになったみたい。自分のブログは個人の日記レベルのことしか書いてないので評価が下がり、表示順位が下がるどころではなくそもそもほとんど表示されないようになってしまった。

狙って病気やお金のことを書いていたわけではなく、1000 件程度ある記事のうちのたまたま数件がお金や病気について書いてあって、それが結構アクセスを集めていたわけだが、それらが検索結果に反映されなくなってしまったので検索流入が激減してしまった。

お金や健康に関しての情報について、専門家が書いているわけではない記事が検索結果で上位表示されるのは確かに問題なので今回の Google のアルゴリズムアップデートは一ユーザーとしてはありがたいことだけど、 Google のお気持ち次第でこうもアクセス数が減るものかとビックリしてしまった。