暗算を練習するミニアプリを作った (対象: 小1〜)

「何かお遊び勉強ツールを作って」と言われたので、作ってみました。

手書きde暗算

タイプde暗算

手書き/タイピングで簡単な算数問題を解くゲームです。 PC、スマホ、タブレットならどんなブラウザでも動くし、PWAなのでアプリ化できるし、オフラインでも使えます。

学年の選択は、その学年で習う範囲も出しているので、 3年生までは、範囲が終わっていない場合は1学年前のものをやったほうが良いかも知れません。 4年生以降は四則演算の難易度が少しずつ上がるだけです。 中学生では20x20の掛け算まで出題するようにしてみました。 ただ九九をたくさん覚えてもつらいので、10x10以上の暗算が難しければ、小6くらいの難易度がちょうど良いかも知れません。


作って見て思ったのですが、手書きで算数問題をやるのって意外と難しいですね。 MNISTでは99%以上の精度が当たり前になっていますが、実際には適当な絵を書いても数字だと認識します。 そこで入力してもらった数字が合っているかどうかをチェックしてもらう形式にしましたが、ちょっと手間が掛かる。 これ以上簡単にするのは結構難しいかなー。

あと最初はもっと画像をバリバリ使ったそれっぽいサイトにしようと思ったのですが、著作権はやっぱ厳しくて、気付いたらAAサイトになってしまった。 こんなはずではなかったんだが…。 AA普及サイトという事にしておきます。

フリゲ紹介: ハシビロコウとメジェド

ハシビロコウとメジェドは、バナナをゲットしてゴールするだけというシンプルなアクションゲーム。 全16ステージ＋ファイナルステージ＋おまけステージ。

最初のほうは一瞬でクリアできるステージばかりですが (左下)、10面くらいから面白くなってくる (右下)。 画面内のバナナをすべて取るとゴールが表示されるので、そのゴールに入ればステージクリアです。 全16ステージはすべて30秒以内にクリアする問題で、アクション要素も強くないので、ちょっとしたパズルゲームを解いている感じ。

ただファイナルステージだけは30秒制限もなくなり、なかなか歯ごたえがある。 ファイナルステージが本番で、最初の16ステージは前座のようなゲームになっている。 探索アクションに近いくらいマップが広くてかなり楽しめる。

アクション要素を薄めてパズルゲームになった洞窟物語みたいな感覚が楽しめる作品。 こういったライトな作品は気軽に楽しめて良いですね。

Googleガイドライン制定後のfaviconサイズ

Googleで検索結果にfaviconが表示できるようになり、ガイドラインが作られました。今のところはモバイル以外では表示されないけど、対応できるものは対応しておきたい。

ただこのガイドライン、すぐに気になった事として「ファビコンのサイズが 48 ピクセルの倍数になっていること」、「16 × 16 ピクセルのファビコンは指定しないでください」という記述がありました。 16x16, 32x32のfaviconってなくても大丈夫なんだっけ？ 有名なfaviconジェネレータではまず間違いなくこの2つを生成しています。


そこで16x16、32x32は何のために必要なのか、改めて調べてみました。 色々なページの結論をまとめると、48x48以下のサイズは以下の使われ方をしている事がわかりました。

• 16x16: IE9のアドレスバー他
• 24x24: IE9のピン留め機能
• 32x32 たいていのブラウザのタブ

これらの指定が必要かどうかについてはStackflowにドンピシャの解答が見つかりました。 MicrosoftはIE9時代には16x16, 32x32のサイズ指定を推奨していたようなのですが、より大きなサイズのfaviconがあればそちらを使っているのが現状のようです。 つまりIE9が死滅し、今後 IE11 も死滅していくことを考慮に入れると16x16, 24x24 の favicon 生成は不要と思います。

では今でもたいていのブラウザの表示に使われている32x32の記述はなくても大丈夫なのでしょうか。 対応状況をチェックしたテーブルがありましたが、いまいちよくわからない。 仕方ないので実機で検査してみると、IE11、Edge、Safari、Firefox、Chrome、どのブラウザも16x16, 32x32のサイズがなくても表示できました。 なんだレガシー系を捨てれば32x32も要らなかったのか。 ようするにこれらの指定は、これまでも通信量とレスポンスの観点以外では指定する必要がなかった事になります。


32x32と48x48では通信量が2倍くらい違ってくるので、普段のタブ表示ではどちらが優先されるかDevToolsでさらに調査してみました。 その結果、32x32のfaviconがあれば、タブ表示ではそちらが優先されるようになっていました。 つまり以下のような指定が今後は良さそうという事になりますね。

# before
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

# after
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">

たかがfavicon、されどfavicon。

Neocitiesは高速でコミュニティ機能が凄い静的サイト構築サービス

Neocitiesという静的サイト構築サービスを見つけました。 どう見ても「猫シティー」なんですが、Neocitiesです。 スペルミスには注意しましょう。 おそらく今は亡きYahoo! ジオシティーズからもじったのだと思いますが、これ凄いサービスと思います。

私はサイトを作る場合、エンジニア向けならNetlifyやGitHub Pagesをおすすめしていたし、非エンジニアならGoogle Sitesなどをおすすめしていました。 でもNeocitiesは、HPやブログを作るなら、もっとおすすめできる気がしている。 まずは広告なしなところも凄いのですが、CDNが付いているのでTTFBを適当に測定してみたら30msくらいでした。 巷のCDNサービスよりずっと早いじゃないか！

何も Limitations が書かれてないのでとりあえずユーザ登録してみたところ、1GBのストレージと200GBの帯域が無料で使えるとの事です。 無料枠も凄いのですが、5ドル/月払うだけで50GBのストレージと3000GBの帯域が使えるらしい。 たいていのVPSより安くないかこれ。 最近の海外の静的サイト構築サービスのレベルってここまで来たんだな…。


コミュニティサービスとしても興味深くて、Mediumみたいなソーシャル機能があります。 ここで結構面白いサイトが見つかります。 例えば、ドラクエのパロディサイトは、すぐに目を引き付けられました。 インパクト重視で海外に売り込めるチャンスを提供していて、よくできていると感じました。 トップページでいかにインパクトを出すかが重要そう。

エンジニアにとってもかなり使い勝手が良いです。 コマンドラインからも操作できて、Hugoなどのたいていの静的ジェネレータに対応しています。 巷のブログサービスってどれもAPIで弄ろうとすると面倒臭いんですよ。 そういったイライラがないように設計されているから嬉しい。 さらにGit Hooksを使って自動デプロイもできるし、Web上でHTML編集もできて、割と高機能です。

惜しむらくはWYSIWYGに対応していないところと、複数アカウントの非対応でしょうか。 ただ結構面白いなと思ったので、何かネタサイトでも作ってみたいなと思ってます。

Surge: 簡易的な静的デプロイサービス

Surgeという静的デプロイサービスがある事を知りました。 GitHub Pagesとよく似たデプロイサービスです。 もちろん無料枠もある。

Surgeの面白いところはGitHubと連携している訳ではなく、ディレクトリ上で surge コマンドを打てばデプロイできるところです。 最近流行のNetlifyなどのデプロイサービスだとGitHubと連携したりする必要があるのでネット上で多少の設定が必要ですが、その必要もない。 CNAMEファイルを作っておけばそのドメインに毎回デプロイしてくれるみたい。

[your-domain-name].surge.sh という短い名前を使えるのも良いところだと思います。 ディレクトリをそのままアップロードするようなので静的サイト以外には使えないと思いますが、とにかくシンプルなのが売りでしょうか。 ただGitのバージョン管理を使わずにディレクトリだけを見るので、インクリメンタルな更新はどうするのかという問題があります。 ページ数の多くないモック的なサイトじゃないとキツイかな。


使いやすそうな利用シーンを色々と考えてみましたが、単一のファイルサイズがやや大きめで、なおかつ更新されやすい時には良さそうです。 そういったファイルをGitHubで管理すると、diff地獄に陥りますからね。

公式サイトには Limitations が一切書かれていないように見えて困惑するのですが、300MBくらいの容量制限はあるみたい。

Google FontsのJIS漢字コード対応チェッカーを作った

Google FontsはJIS漢字コードをどれくらいサポートしているか示していません。 訳あってきちんと調べたかったので、調べられるツールを作りました。

といってもあまり完璧なものではありません。 以前はフォントが欠けていたら文字化けしていた気がするのですが、最近は標準フォントで無理やり代替するようになったのか、文字化けしてくれないので確認しにくいのです。 対応状況をきちんと調べるには、フォントをダウンロードしてチェックするしかないような気がしていますが、それは面倒過ぎる。

そこで少し考え方を変えて、JISの水準ごとにレンダリングしてみて、標準フォントを一切使わずレンダリングできていたらサポートできていると考える事にします。 以前作ったGoogle Fontsの日本語用表示チェッカーを少し拡張して、JIS第一基準とJIS第二基準の漢字一覧を表示させてみました (下)。 DevToolsを使って標準フォントを使わずに表示できている事を確認できれば、その水準の漢字に対応していると判断できます。


フォント変更 (正式版): Noto Sans JP Noto Serif JP M PLUS 1p M PLUS Rounded 1c Sawarabi Mincho Sawarabi Gothic Kosugi Kosugi Maru
フォント変更 (早期アクセス): M+ 1p Rounded M+ 1c はんなり明朝 こころ明朝 さわらび明朝 さわらびゴシック ニクキュウ ニコモジ Noto Sans Japanese

JIS第1基準

亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨我牙画臥芽蛾賀雅餓駕介会解回塊壊廻快怪悔恢懐戒拐改魁晦械海灰界皆絵芥蟹開階貝凱劾外咳害崖慨概涯碍蓋街該鎧骸浬馨蛙垣柿蛎鈎劃嚇各廓拡撹格核殻獲確穫覚角赫較郭閣隔革学岳楽額顎掛笠樫橿梶鰍潟割喝恰括活渇滑葛褐轄且鰹叶椛樺鞄株兜竃蒲釜鎌噛鴨栢茅萱粥刈苅瓦乾侃冠寒刊勘勧巻喚堪姦完官寛干幹患感慣憾換敢柑桓棺款歓汗漢澗潅環甘監看竿管簡緩缶翰肝艦莞観諌貫還鑑間閑関陥韓館舘丸含岸巌玩癌眼岩翫贋雁頑顔願企伎危喜器基奇嬉寄岐希幾忌揮机旗既期棋棄機帰毅気汽畿祈季稀紀徽規記貴起軌輝飢騎鬼亀偽儀妓宜戯技擬欺犠疑祇義蟻誼議掬菊鞠吉吃喫桔橘詰砧杵黍却客脚虐逆丘久仇休及吸宮弓急救朽求汲泣灸球究窮笈級糾給旧牛去居巨拒拠挙渠虚許距鋸漁禦魚亨享京供侠僑兇競共凶協匡卿叫喬境峡強彊怯恐恭挟教橋況狂狭矯胸脅興蕎郷鏡響饗驚仰凝尭暁業局曲極玉桐粁僅勤均巾錦斤欣欽琴禁禽筋緊芹菌衿襟謹近金吟銀九倶句区狗玖矩苦躯駆駈駒具愚虞喰空偶寓遇隅串櫛釧屑屈掘窟沓靴轡窪熊隈粂栗繰桑鍬勲君薫訓群軍郡卦袈祁係傾刑兄啓圭珪型契形径恵慶慧憩掲携敬景桂渓畦稽系経継繋罫茎荊蛍計詣警軽頚鶏芸迎鯨劇戟撃激隙桁傑欠決潔穴結血訣月件倹倦健兼券剣喧圏堅嫌建憲懸拳捲検権牽犬献研硯絹県肩見謙賢軒遣鍵険顕験鹸元原厳幻弦減源玄現絃舷言諺限乎個古呼固姑孤己庫弧戸故枯湖狐糊袴股胡菰虎誇跨鈷雇顧鼓五互伍午呉吾娯後御悟梧檎瑚碁語誤護醐乞鯉交佼侯候倖光公功効勾厚口向后喉坑垢好孔孝宏工巧巷幸広庚康弘恒慌抗拘控攻昂晃更杭校梗構江洪浩港溝甲皇硬稿糠紅紘絞綱耕考肯肱腔膏航荒行衡講貢購郊酵鉱砿鋼閤降項香高鴻剛劫号合壕拷濠豪轟麹克刻告国穀酷鵠黒獄漉腰甑忽惚骨狛込此頃今困坤墾婚恨懇昏昆根梱混痕紺艮魂些佐叉唆嵯左差査沙瑳砂詐鎖裟坐座挫債催再最哉塞妻宰彩才採栽歳済災采犀砕砦祭斎細菜裁載際剤在材罪財冴坂阪堺榊肴咲崎埼碕鷺作削咋搾昨朔柵窄策索錯桜鮭笹匙冊刷察拶撮擦札殺薩雑皐鯖捌錆鮫皿晒三傘参山惨撒散桟燦珊産算纂蚕讃賛酸餐斬暫残仕仔伺使刺司史嗣四士始姉姿子屍市師志思指支孜斯施旨枝止死氏獅祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時次滋治爾璽痔磁示而耳自蒔辞汐鹿式識鴫竺軸宍雫七叱執失嫉室悉湿漆疾質実蔀篠偲柴芝屡蕊縞舎写射捨赦斜煮社紗者謝車遮蛇邪借勺尺杓灼爵酌釈錫若寂弱惹主取守手朱殊狩珠種腫趣酒首儒受呪寿授樹綬需囚収周宗就州修愁拾洲秀秋終繍習臭舟蒐衆襲讐蹴輯週酋酬集醜什住充十従戎柔汁渋獣縦重銃叔夙宿淑祝縮粛塾熟出術述俊峻春瞬竣舜駿准循旬楯殉淳準潤盾純巡遵醇順処初所暑曙渚庶緒署書薯藷諸助叙女序徐恕鋤除傷償勝匠升召哨商唱嘗奨妾娼宵将小少尚庄床廠彰承抄招掌捷昇昌昭晶松梢樟樵沼消渉湘焼焦照症省硝礁祥称章笑粧紹肖菖蒋蕉衝裳訟証詔詳象賞醤鉦鍾鐘障鞘上丈丞乗冗剰城場壌嬢常情擾条杖浄状畳穣蒸譲醸錠嘱埴飾拭植殖燭織職色触食蝕辱尻伸信侵唇娠寝審心慎振新晋森榛浸深申疹真神秦紳臣芯薪親診身辛進針震人仁刃塵壬尋甚尽腎訊迅陣靭笥諏須酢図厨逗吹垂帥推水炊睡粋翠衰遂酔錐錘随瑞髄崇嵩数枢趨雛据杉椙菅頗雀裾澄摺寸世瀬畝是凄制勢姓征性成政整星晴棲栖正清牲生盛精聖声製西誠誓請逝醒青静斉税脆隻席惜戚斥昔析石積籍績脊責赤跡蹟碩切拙接摂折設窃節説雪絶舌蝉仙先千占宣専尖川戦扇撰栓栴泉浅洗染潜煎煽旋穿箭線繊羨腺舛船薦詮賎践選遷銭銑閃鮮前善漸然全禅繕膳糎噌塑岨措曾曽楚狙疏疎礎祖租粗素組蘇訴阻遡鼠僧創双叢倉喪壮奏爽宋層匝惣想捜掃挿掻操早曹巣槍槽漕燥争痩相窓糟総綜聡草荘葬蒼藻装走送遭鎗霜騒像増憎臓蔵贈造促側則即息捉束測足速俗属賊族続卒袖其揃存孫尊損村遜他多太汰詑唾堕妥惰打柁舵楕陀駄騨体堆対耐岱帯待怠態戴替泰滞胎腿苔袋貸退逮隊黛鯛代台大第醍題鷹滝瀧卓啄宅托択拓沢濯琢託鐸濁諾茸凧蛸只叩但達辰奪脱巽竪辿棚谷狸鱈樽誰丹単嘆坦担探旦歎淡湛炭短端箪綻耽胆蛋誕鍛団壇弾断暖檀段男談値知地弛恥智池痴稚置致蜘遅馳築畜竹筑蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷註酎鋳駐樗瀦猪苧著貯丁兆凋喋寵帖帳庁弔張彫徴懲挑暢朝潮牒町眺聴脹腸蝶調諜超跳銚長頂鳥勅捗直朕沈珍賃鎮陳津墜椎槌追鎚痛通塚栂掴槻佃漬柘辻蔦綴鍔椿潰坪壷嬬紬爪吊釣鶴亭低停偵剃貞呈堤定帝底庭廷弟悌抵挺提梯汀碇禎程締艇訂諦蹄逓邸鄭釘鼎泥摘擢敵滴的笛適鏑溺哲徹撤轍迭鉄典填天展店添纏甜貼転顛点伝殿澱田電兎吐堵塗妬屠徒斗杜渡登菟賭途都鍍砥砺努度土奴怒倒党冬凍刀唐塔塘套宕島嶋悼投搭東桃梼棟盗淘湯涛灯燈当痘祷等答筒糖統到董蕩藤討謄豆踏逃透鐙陶頭騰闘働動同堂導憧撞洞瞳童胴萄道銅峠鴇匿得徳涜特督禿篤毒独読栃橡凸突椴届鳶苫寅酉瀞噸屯惇敦沌豚遁頓呑曇鈍奈那内乍凪薙謎灘捺鍋楢馴縄畷南楠軟難汝二尼弐迩匂賑肉虹廿日乳入如尿韮任妊忍認濡禰祢寧葱猫熱年念捻撚燃粘乃廼之埜嚢悩濃納能脳膿農覗蚤巴把播覇杷波派琶破婆罵芭馬俳廃拝排敗杯盃牌背肺輩配倍培媒梅楳煤狽買売賠陪這蝿秤矧萩伯剥博拍柏泊白箔粕舶薄迫曝漠爆縛莫駁麦函箱硲箸肇筈櫨幡肌畑畠八鉢溌発醗髪伐罰抜筏閥鳩噺塙蛤隼伴判半反叛帆搬斑板氾汎版犯班畔繁般藩販範釆煩頒飯挽晩番盤磐蕃蛮匪卑否妃庇彼悲扉批披斐比泌疲皮碑秘緋罷肥被誹費避非飛樋簸備尾微枇毘琵眉美鼻柊稗匹疋髭彦膝菱肘弼必畢筆逼桧姫媛紐百謬俵彪標氷漂瓢票表評豹廟描病秒苗錨鋲蒜蛭鰭品彬斌浜瀕貧賓頻敏瓶不付埠夫婦富冨布府怖扶敷斧普浮父符腐膚芙譜負賦赴阜附侮撫武舞葡蕪部封楓風葺蕗伏副復幅服福腹複覆淵弗払沸仏物鮒分吻噴墳憤扮焚奮粉糞紛雰文聞丙併兵塀幣平弊柄並蔽閉陛米頁僻壁癖碧別瞥蔑箆偏変片篇編辺返遍便勉娩弁鞭保舗鋪圃捕歩甫補輔穂募墓慕戊暮母簿菩倣俸包呆報奉宝峰峯崩庖抱捧放方朋法泡烹砲縫胞芳萌蓬蜂褒訪豊邦鋒飽鳳鵬乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貌貿鉾防吠頬北僕卜墨撲朴牧睦穆釦勃没殆堀幌奔本翻凡盆摩磨魔麻埋妹昧枚毎哩槙幕膜枕鮪柾鱒桝亦俣又抹末沫迄侭繭麿万慢満漫蔓味未魅巳箕岬密蜜湊蓑稔脈妙粍民眠務夢無牟矛霧鵡椋婿娘冥名命明盟迷銘鳴姪牝滅免棉綿緬面麺摸模茂妄孟毛猛盲網耗蒙儲木黙目杢勿餅尤戻籾貰問悶紋門匁也冶夜爺耶野弥矢厄役約薬訳躍靖柳薮鑓愉愈油癒諭輸唯佑優勇友宥幽悠憂揖有柚湧涌猶猷由祐裕誘遊邑郵雄融夕予余与誉輿預傭幼妖容庸揚揺擁曜楊様洋溶熔用窯羊耀葉蓉要謡踊遥陽養慾抑欲沃浴翌翼淀羅螺裸来莱頼雷洛絡落酪乱卵嵐欄濫藍蘭覧利吏履李梨理璃痢裏裡里離陸律率立葎掠略劉流溜琉留硫粒隆竜龍侶慮旅虜了亮僚両凌寮料梁涼猟療瞭稜糧良諒遼量陵領力緑倫厘林淋燐琳臨輪隣鱗麟瑠塁涙累類令伶例冷励嶺怜玲礼苓鈴隷零霊麗齢暦歴列劣烈裂廉恋憐漣煉簾練聯蓮連錬呂魯櫓炉賂路露労婁廊弄朗楼榔浪漏牢狼篭老聾蝋郎六麓禄肋録論倭和話歪賄脇惑枠鷲亙亘鰐詫藁蕨椀湾碗腕

JIS第2基準

弌丐丕个丱丶丼丿乂乖乘亂亅豫亊舒弍于亞亟亠亢亰亳亶从仍仄仆仂仗仞仭仟价伉佚估佛佝佗佇佶侈侏侘佻佩佰侑佯來侖儘俔俟俎俘俛俑俚俐俤俥倚倨倔倪倥倅伜俶倡倩倬俾俯們倆偃假會偕偐偈做偖偬偸傀傚傅傴傲僉僊傳僂僖僞僥僭僣僮價僵儉儁儂儖儕儔儚儡儺儷儼儻儿兀兒兌兔兢竸兩兪兮冀冂囘册冉冏冑冓冕冖冤冦冢冩冪冫决冱冲冰况冽凅凉凛几處凩凭凰凵凾刄刋刔刎刧刪刮刳刹剏剄剋剌剞剔剪剴剩剳剿剽劍劔劒剱劈劑辨辧劬劭劼劵勁勍勗勞勣勦飭勠勳勵勸勹匆匈甸匍匐匏匕匚匣匯匱匳匸區卆卅丗卉卍凖卞卩卮夘卻卷厂厖厠厦厥厮厰厶參簒雙叟曼燮叮叨叭叺吁吽呀听吭吼吮吶吩吝呎咏呵咎呟呱呷呰咒呻咀呶咄咐咆哇咢咸咥咬哄哈咨咫哂咤咾咼哘哥哦唏唔哽哮哭哺哢唹啀啣啌售啜啅啖啗唸唳啝喙喀咯喊喟啻啾喘喞單啼喃喩喇喨嗚嗅嗟嗄嗜嗤嗔嘔嗷嘖嗾嗽嘛嗹噎噐營嘴嘶嘲嘸噫噤嘯噬噪嚆嚀嚊嚠嚔嚏嚥嚮嚶嚴囂嚼囁囃囀囈囎囑囓囗囮囹圀囿圄圉圈國圍圓團圖嗇圜圦圷圸坎圻址坏坩埀垈坡坿垉垓垠垳垤垪垰埃埆埔埒埓堊埖埣堋堙堝塲堡塢塋塰毀塒堽塹墅墹墟墫墺壞墻墸墮壅壓壑壗壙壘壥壜壤壟壯壺壹壻壼壽夂夊夐夛梦夥夬夭夲夸夾竒奕奐奎奚奘奢奠奧奬奩奸妁妝佞侫妣妲姆姨姜妍姙姚娥娟娑娜娉娚婀婬婉娵娶婢婪媚媼媾嫋嫂媽嫣嫗嫦嫩嫖嫺嫻嬌嬋嬖嬲嫐嬪嬶嬾孃孅孀孑孕孚孛孥孩孰孳孵學斈孺宀它宦宸寃寇寉寔寐寤實寢寞寥寫寰寶寳尅將專對尓尠尢尨尸尹屁屆屎屓屐屏孱屬屮乢屶屹岌岑岔妛岫岻岶岼岷峅岾峇峙峩峽峺峭嶌峪崋崕崗嵜崟崛崑崔崢崚崙崘嵌嵒嵎嵋嵬嵳嵶嶇嶄嶂嶢嶝嶬嶮嶽嶐嶷嶼巉巍巓巒巖巛巫已巵帋帚帙帑帛帶帷幄幃幀幎幗幔幟幢幤幇幵并幺麼广庠廁廂廈廐廏廖廣廝廚廛廢廡廨廩廬廱廳廰廴廸廾弃弉彝彜弋弑弖弩弭弸彁彈彌彎弯彑彖彗彙彡彭彳彷徃徂彿徊很徑徇從徙徘徠徨徭徼忖忻忤忸忱忝悳忿怡恠怙怐怩怎怱怛怕怫怦怏怺恚恁恪恷恟恊恆恍恣恃恤恂恬恫恙悁悍惧悃悚悄悛悖悗悒悧悋惡悸惠惓悴忰悽惆悵惘慍愕愆惶惷愀惴惺愃愡惻惱愍愎慇愾愨愧慊愿愼愬愴愽慂慄慳慷慘慙慚慫慴慯慥慱慟慝慓慵憙憖憇憬憔憚憊憑憫憮懌懊應懷懈懃懆憺懋罹懍懦懣懶懺懴懿懽懼懾戀戈戉戍戌戔戛戞戡截戮戰戲戳扁扎扞扣扛扠扨扼抂抉找抒抓抖拔抃抔拗拑抻拏拿拆擔拈拜拌拊拂拇抛拉挌拮拱挧挂挈拯拵捐挾捍搜捏掖掎掀掫捶掣掏掉掟掵捫捩掾揩揀揆揣揉插揶揄搖搴搆搓搦搶攝搗搨搏摧摯摶摎攪撕撓撥撩撈撼據擒擅擇撻擘擂擱擧舉擠擡抬擣擯攬擶擴擲擺攀擽攘攜攅攤攣攫攴攵攷收攸畋效敖敕敍敘敞敝敲數斂斃變斛斟斫斷旃旆旁旄旌旒旛旙无旡旱杲昊昃旻杳昵昶昴昜晏晄晉晁晞晝晤晧晨晟晢晰暃暈暎暉暄暘暝曁暹曉暾暼曄暸曖曚曠昿曦曩曰曵曷朏朖朞朦朧霸朮朿朶杁朸朷杆杞杠杙杣杤枉杰枩杼杪枌枋枦枡枅枷柯枴柬枳柩枸柤柞柝柢柮枹柎柆柧檜栞框栩桀桍栲桎梳栫桙档桷桿梟梏梭梔條梛梃檮梹桴梵梠梺椏梍桾椁棊椈棘椢椦棡椌棍棔棧棕椶椒椄棗棣椥棹棠棯椨椪椚椣椡棆楹楷楜楸楫楔楾楮椹楴椽楙椰楡楞楝榁楪榲榮槐榿槁槓榾槎寨槊槝榻槃榧樮榑榠榜榕榴槞槨樂樛槿權槹槲槧樅榱樞槭樔槫樊樒櫁樣樓橄樌橲樶橸橇橢橙橦橈樸樢檐檍檠檄檢檣檗蘗檻櫃櫂檸檳檬櫞櫑櫟檪櫚櫪櫻欅蘖櫺欒欖鬱欟欸欷盜欹飮歇歃歉歐歙歔歛歟歡歸歹歿殀殄殃殍殘殕殞殤殪殫殯殲殱殳殷殼毆毋毓毟毬毫毳毯麾氈氓气氛氤氣汞汕汢汪沂沍沚沁沛汾汨汳沒沐泄泱泓沽泗泅泝沮沱沾沺泛泯泙泪洟衍洶洫洽洸洙洵洳洒洌浣涓浤浚浹浙涎涕濤涅淹渕渊涵淇淦涸淆淬淞淌淨淒淅淺淙淤淕淪淮渭湮渮渙湲湟渾渣湫渫湶湍渟湃渺湎渤滿渝游溂溪溘滉溷滓溽溯滄溲滔滕溏溥滂溟潁漑灌滬滸滾漿滲漱滯漲滌漾漓滷澆潺潸澁澀潯潛濳潭澂潼潘澎澑濂潦澳澣澡澤澹濆澪濟濕濬濔濘濱濮濛瀉瀋濺瀑瀁瀏濾瀛瀚潴瀝瀘瀟瀰瀾瀲灑灣炙炒炯烱炬炸炳炮烟烋烝烙焉烽焜焙煥煕熈煦煢煌煖煬熏燻熄熕熨熬燗熹熾燒燉燔燎燠燬燧燵燼燹燿爍爐爛爨爭爬爰爲爻爼爿牀牆牋牘牴牾犂犁犇犒犖犢犧犹犲狃狆狄狎狒狢狠狡狹狷倏猗猊猜猖猝猴猯猩猥猾獎獏默獗獪獨獰獸獵獻獺珈玳珎玻珀珥珮珞璢琅瑯琥珸琲琺瑕琿瑟瑙瑁瑜瑩瑰瑣瑪瑶瑾璋璞璧瓊瓏瓔珱瓠瓣瓧瓩瓮瓲瓰瓱瓸瓷甄甃甅甌甎甍甕甓甞甦甬甼畄畍畊畉畛畆畚畩畤畧畫畭畸當疆疇畴疊疉疂疔疚疝疥疣痂疳痃疵疽疸疼疱痍痊痒痙痣痞痾痿痼瘁痰痺痲痳瘋瘍瘉瘟瘧瘠瘡瘢瘤瘴瘰瘻癇癈癆癜癘癡癢癨癩癪癧癬癰癲癶癸發皀皃皈皋皎皖皓皙皚皰皴皸皹皺盂盍盖盒盞盡盥盧盪蘯盻眈眇眄眩眤眞眥眦眛眷眸睇睚睨睫睛睥睿睾睹瞎瞋瞑瞠瞞瞰瞶瞹瞿瞼瞽瞻矇矍矗矚矜矣矮矼砌砒礦砠礪硅碎硴碆硼碚碌碣碵碪碯磑磆磋磔碾碼磅磊磬磧磚磽磴礇礒礑礙礬礫祀祠祗祟祚祕祓祺祿禊禝禧齋禪禮禳禹禺秉秕秧秬秡秣稈稍稘稙稠稟禀稱稻稾稷穃穗穉穡穢穩龝穰穹穽窈窗窕窘窖窩竈窰窶竅竄窿邃竇竊竍竏竕竓站竚竝竡竢竦竭竰笂笏笊笆笳笘笙笞笵笨笶筐筺笄筍笋筌筅筵筥筴筧筰筱筬筮箝箘箟箍箜箚箋箒箏筝箙篋篁篌篏箴篆篝篩簑簔篦篥籠簀簇簓篳篷簗簍篶簣簧簪簟簷簫簽籌籃籔籏籀籐籘籟籤籖籥籬籵粃粐粤粭粢粫粡粨粳粲粱粮粹粽糀糅糂糘糒糜糢鬻糯糲糴糶糺紆紂紜紕紊絅絋紮紲紿紵絆絳絖絎絲絨絮絏絣經綉絛綏絽綛綺綮綣綵緇綽綫總綢綯緜綸綟綰緘緝緤緞緻緲緡縅縊縣縡縒縱縟縉縋縢繆繦縻縵縹繃縷縲縺繧繝繖繞繙繚繹繪繩繼繻纃緕繽辮繿纈纉續纒纐纓纔纖纎纛纜缸缺罅罌罍罎罐网罕罔罘罟罠罨罩罧罸羂羆羃羈羇羌羔羞羝羚羣羯羲羹羮羶羸譱翅翆翊翕翔翡翦翩翳翹飜耆耄耋耒耘耙耜耡耨耿耻聊聆聒聘聚聟聢聨聳聲聰聶聹聽聿肄肆肅肛肓肚肭冐肬胛胥胙胝胄胚胖脉胯胱脛脩脣脯腋隋腆脾腓腑胼腱腮腥腦腴膃膈膊膀膂膠膕膤膣腟膓膩膰膵膾膸膽臀臂膺臉臍臑臙臘臈臚臟臠臧臺臻臾舁舂舅與舊舍舐舖舩舫舸舳艀艙艘艝艚艟艤艢艨艪艫舮艱艷艸艾芍芒芫芟芻芬苡苣苟苒苴苳苺莓范苻苹苞茆苜茉苙茵茴茖茲茱荀茹荐荅茯茫茗茘莅莚莪莟莢莖茣莎莇莊荼莵荳荵莠莉莨菴萓菫菎菽萃菘萋菁菷萇菠菲萍萢萠莽萸蔆菻葭萪萼蕚蒄葷葫蒭葮蒂葩葆萬葯葹萵蓊葢蒹蒿蒟蓙蓍蒻蓚蓐蓁蓆蓖蒡蔡蓿蓴蔗蔘蔬蔟蔕蔔蓼蕀蕣蕘蕈蕁蘂蕋蕕薀薤薈薑薊薨蕭薔薛藪薇薜蕷蕾薐藉薺藏薹藐藕藝藥藜藹蘊蘓蘋藾藺蘆蘢蘚蘰蘿虍乕虔號虧虱蚓蚣蚩蚪蚋蚌蚶蚯蛄蛆蚰蛉蠣蚫蛔蛞蛩蛬蛟蛛蛯蜒蜆蜈蜀蜃蛻蜑蜉蜍蛹蜊蜴蜿蜷蜻蜥蜩蜚蝠蝟蝸蝌蝎蝴蝗蝨蝮蝙蝓蝣蝪蠅螢螟螂螯蟋螽蟀蟐雖螫蟄螳蟇蟆螻蟯蟲蟠蠏蠍蟾蟶蟷蠎蟒蠑蠖蠕蠢蠡蠱蠶蠹蠧蠻衄衂衒衙衞衢衫袁衾袞衵衽袵衲袂袗袒袮袙袢袍袤袰袿袱裃裄裔裘裙裝裹褂裼裴裨裲褄褌褊褓襃褞褥褪褫襁襄褻褶褸襌褝襠襞襦襤襭襪襯襴襷襾覃覈覊覓覘覡覩覦覬覯覲覺覽覿觀觚觜觝觧觴觸訃訖訐訌訛訝訥訶詁詛詒詆詈詼詭詬詢誅誂誄誨誡誑誥誦誚誣諄諍諂諚諫諳諧諤諱謔諠諢諷諞諛謌謇謚諡謖謐謗謠謳鞫謦謫謾謨譁譌譏譎證譖譛譚譫譟譬譯譴譽讀讌讎讒讓讖讙讚谺豁谿豈豌豎豐豕豢豬豸豺貂貉貅貊貍貎貔豼貘戝貭貪貽貲貳貮貶賈賁賤賣賚賽賺賻贄贅贊贇贏贍贐齎贓賍贔贖赧赭赱赳趁趙跂趾趺跏跚跖跌跛跋跪跫跟跣跼踈踉跿踝踞踐踟蹂踵踰踴蹊蹇蹉蹌蹐蹈蹙蹤蹠踪蹣蹕蹶蹲蹼躁躇躅躄躋躊躓躑躔躙躪躡躬躰軆躱躾軅軈軋軛軣軼軻軫軾輊輅輕輒輙輓輜輟輛輌輦輳輻輹轅轂輾轌轉轆轎轗轜轢轣轤辜辟辣辭辯辷迚迥迢迪迯邇迴逅迹迺逑逕逡逍逞逖逋逧逶逵逹迸遏遐遑遒逎遉逾遖遘遞遨遯遶隨遲邂遽邁邀邊邉邏邨邯邱邵郢郤扈郛鄂鄒鄙鄲鄰酊酖酘酣酥酩酳酲醋醉醂醢醫醯醪醵醴醺釀釁釉釋釐釖釟釡釛釼釵釶鈞釿鈔鈬鈕鈑鉞鉗鉅鉉鉤鉈銕鈿鉋鉐銜銖銓銛鉚鋏銹銷鋩錏鋺鍄錮錙錢錚錣錺錵錻鍜鍠鍼鍮鍖鎰鎬鎭鎔鎹鏖鏗鏨鏥鏘鏃鏝鏐鏈鏤鐚鐔鐓鐃鐇鐐鐶鐫鐵鐡鐺鑁鑒鑄鑛鑠鑢鑞鑪鈩鑰鑵鑷鑽鑚鑼鑾钁鑿閂閇閊閔閖閘閙閠閨閧閭閼閻閹閾闊濶闃闍闌闕闔闖關闡闥闢阡阨阮阯陂陌陏陋陷陜陞陝陟陦陲陬隍隘隕隗險隧隱隲隰隴隶隸隹雎雋雉雍襍雜霍雕雹霄霆霈霓霎霑霏霖霙霤霪霰霹霽霾靄靆靈靂靉靜靠靤靦靨勒靫靱靹鞅靼鞁靺鞆鞋鞏鞐鞜鞨鞦鞣鞳鞴韃韆韈韋韜韭齏韲竟韶韵頏頌頸頤頡頷頽顆顏顋顫顯顰顱顴顳颪颯颱颶飄飃飆飩飫餃餉餒餔餘餡餝餞餤餠餬餮餽餾饂饉饅饐饋饑饒饌饕馗馘馥馭馮馼駟駛駝駘駑駭駮駱駲駻駸騁騏騅駢騙騫騷驅驂驀驃騾驕驍驛驗驟驢驥驤驩驫驪骭骰骼髀髏髑髓體髞髟髢髣髦髯髫髮髴髱髷髻鬆鬘鬚鬟鬢鬣鬥鬧鬨鬩鬪鬮鬯鬲魄魃魏魍魎魑魘魴鮓鮃鮑鮖鮗鮟鮠鮨鮴鯀鯊鮹鯆鯏鯑鯒鯣鯢鯤鯔鯡鰺鯲鯱鯰鰕鰔鰉鰓鰌鰆鰈鰒鰊鰄鰮鰛鰥鰤鰡鰰鱇鰲鱆鰾鱚鱠鱧鱶鱸鳧鳬鳰鴉鴈鳫鴃鴆鴪鴦鶯鴣鴟鵄鴕鴒鵁鴿鴾鵆鵈鵝鵞鵤鵑鵐鵙鵲鶉鶇鶫鵯鵺鶚鶤鶩鶲鷄鷁鶻鶸鶺鷆鷏鷂鷙鷓鷸鷦鷭鷯鷽鸚鸛鸞鹵鹹鹽麁麈麋麌麒麕麑麝麥麩麸麪麭靡黌黎黏黐黔黜點黝黠黥黨黯黴黶黷黹黻黼黽鼇鼈皷鼕鼡鼬鼾齊齒齔齣齟齠齡齦齧齬齪齷齲齶龕龜龠堯槇遙瑤凜熙



念のため調べ方を書いておくと、上記のJIS第n基準のテキストエリアをDevToolsで開いて、以下のようにComputed Elementsを確認すれば、フォントの対応状況がわかります。

2019-06-14時点では、対応状況は以下のようになりました。

フォント名	JIS第一基準 (対応文字数)	JIS第二基準 (対応文字数)
Noto Sans JP	◯	◯
Noto Serif JP	◯	◯
M PLUS 1p	◯	△ (2072)
M PLUS Rounded 1c	◯	△ (1944)
Sawarabi Mincho	△ (2228)	△ (27)
Sawarabi Gothic	◯	△ (1951)
Kosugi	◯	◯
Kosugi Maru	◯	◯
M+ 1p	×	×
Rounded M+ 1c	◯	△ (1944)
はんなり明朝	×	×
こころ明朝	×	×
さわらび明朝	△ (2228)	△ (27)
さわらびゴシック	◯	△ (1951)
ニクキュウ	×	×
ニコモジ	△ (3)	△ (2)
Noto Sans Japanese	×	×

JIS第一基準も意外と対応してないんですね。

Google Search Consoleの「公開URLをテスト」はやったほうが良い

Google Search Consoleの公開URLのテストは絶対やったほうが良いと思いました。 というのもGooglebotが最新版になった→ブラウザで表示きちんと表示されているからOKという訳ではないからです。 実際、私の作った某サイトはJavaScriptがこけていて、正しくクロールされていなかった。

そのような事にならないよう、まずは公開URLをテストしてみましょう。 公開URLのテストは、サイドバーにある「URL検査」からできます。 「URL検査」で検査したいURLを入力すると、以下の画面が出てくるので、「公開URLをテスト」を押しましょう。 既にクロール済みの場合は、「クロール済みのページを表示」を押してもOKです。

テストをした後はクロール済みのページを見てみましょう。 先に述べたボタンを押しても良いですし、サイドバーからは「モバイル ユーザビリティ」→「テスト済みのページを表示」→「スクリーンショット」で辿る事ができます (下図)。※下図ではスクリーンショットは表示されてません。

私はこの「スクリーンショット」が想定通りに表示されていなくて、 その理由は「スクリーンショット」の隣の「その他の情報」でJavaScriptのエラーが出ていました。 そしてなぜエラーが出ていたのかというと…

1. 日本のGooglebotはまだES6に非対応 (少なくともライブテストでは)

エラーが出る原因ですが、まず一番重大なのはライブテストで動いているGooglebotでは、ES6が動かないことでした。 GooglebotがES6をサポートしたと公式宣言されているけど、少なくともテストでは動いていません。 実際のクローラは動くのかも知れないのですが、 原文では既にChromiumが最新バージョンになっていると書いてあるから期待薄かも。

非対応と言っても、const, letくらいは動きます。IE11と同レベルくらいかな…。 私はもともとIE11で動くレベル以上はES6は書かないようにしているのですが、それでもいくつか注意点はありました。 例えばJavaScriptって最終行ならセミコロンなしでも実行してくれるんですが、それは駄目。 私はその書き方はしないんですが、コピペしてきたコードがエラーを出してました。 他にもES6の分割代入などの基本的な構文も動いていませんでした。 最初はなんで駄目なのかわからず、またわかってもES6のサポート状況がわからず、何度もライブテストを実行して挙動を確認してしまいました。 公開URLのテストも回数制限があるようなので割とキツイ。

2. GooglebotはJavaScriptがエラーで落ちるときちんとクロールしない

公開URLのテスト結果を見ていてもう1つ重要だと思ったのは、遅延実行されるコードのバグがあった場合に、JavaScript全体の処理が落ちるという事です。 例えばクリックされない限り使われる事のないコードにバグがあった場合、 それだけでエラーが発生し、最初のレンダリングで表示されるべきコンテンツもクロールの結果に表示されませんでした。

割と厳しいです。仮にバグがあってもサイト自体は動くケースもあると思うのですが、温情措置はないみたい。 このような仕様がある以上、本当にGooglebotがきちんとクロールしてくれるかは、公開URLのテストで必ずチェックしたほうが良さそうです。 特にJavaScriptの量が多いサイトを運用している方は確認したほうが良いでしょう。


公式宣言を鵜呑みにするのではなく、実際の挙動を見ないと駄目だなあと思いました。 米国でGooglebotの挙動が変わっても日本でそれが適用されるとは限らないですしね。 日本でもいずれは対応すると思いますが、2の特性がある以上、油断はできません。 きちんと確認したほうが良いです。

font-familyによる等幅フォントの指定方法まとめ

CSSによる等幅フォント指定でやたら時間を食ったので、現状をまとめておきます。

まずこのページでサポートしているのは、Windows、Mac、Ubuntu, Debian, iOS, Android, ChromeOSです。 Linuxデスクトップのフォントはディストリビューションごとに異なるので、 シェアの大きいもの以外は考えたくないため、Webフォントも利用しています。

いきなりまとめてしまうと、以下が良いと思う。

等幅フォント＋ゴシックの指定

font-family:
  'Liberation Serif', 'Noto Sans CJK JP',  /* Linux/Android/ChromeOS */
  'TakaoGothic', 'VL Gothic',  /* Debian/Ubuntu */
  'Yu Gothic', 'MS Gothic',  /* Windows */
  'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Osaka-Mono',  /* Mac/iOS */
  'Noto Sans JP', Monospace;

等幅フォント＋明朝の指定

font-family:
  'Liberation Serif', 'Noto Serif CJK JP',  /* Linux/Android/ChromeOS */
  'TakaoMincho',  /* Ubuntu */
  'Yu Mincho', 'MS Mincho',  /* Windows */
  'Hiragino Mincho', 'Hiragino Mincho ProN',  /* Mac/iOS */
  'Noto Serif JP', Monospace;

古いOSでも動くよう真面目に指定していますが、古いOSなど知らんという方は、以下の記述を削除すると良いです。 最近はWebフォントもあるので、Webフォントでカバーすればバッサリ切っても大丈夫です。 WindowsやUbuntuはもう数年待ったほうが良いと私は思いますが、Mac/iOSはそろそろ削除しても良いかも知れません。

OS	フォント指定
Windows 8.1以前	MS Gothic / MS Mincho
Ubuntu 18.04以前	TakaoGothic / TakaoMincho
MacOS 10.10 / iOS9以前	Hiragino Kaku Gothic ProN / Hiragino Mincho ProN

最後に雑多な話をまとめておきます。

ヒラギノ系の指定について

Hiragino Kaku Gothic ProNの指定はサイトによって異なる事が多いです。 Hiragino Kaku Gothic ProN W3でも、Hiragino Kaku Gothic Proでも良いですが、 ProNだと厳密な表示ができ、W3だとウェイトの指定をしている違いとなります。

Monospaceについて

Monospaceの指定は、固定幅の宣言みたいなものですが、フォントサイズの指定が使い物にならないので、これを使うくらいならWebフォント (Google Fonts)を使ったほうが良いです。 何を使っても良いと思いますが、Noto Sans系列がLinux/Android/ChromeOSで使われているので、私は類似系列の Noto Sans JP / Noto Serif JP を指定しておきました。

Liberation Serif について

英字も指定しておかないと割と表示が崩れるので、それを避けるおまじないです。 Liberation Sansが指定される事もあるのですが、これを指定すると数字が汚いので、私はLiberation Serifにしました。 Monospaceをsans-serifにして、Liberation Serifを消したりしてみると、効果がよくわかると思います。

tdewolff/minifyでWebサイトのビルド時間を1/100に

とあるサービスに1万ほどページを追加したのですが、改めてビルドツールは自作に限ると思いました。 理由はタイトルにあるように、ビルド時間を削減できるからです。 最近はNode.jsのビルドツール (Gulp, WebPack, Parcel, etc.) が流行っているのですが、 これらはページ数が増えると制御が大変になってきます。 高機能でSPAに便利なのは確かだけど、ビルドプロセスが複雑過ぎるし、リッチ過ぎる。

例えば数千ページくらいをビルドする時、JavaScriptのトランスコンパイルを1ページずつ実行とかは、ただの苦行です。 トランスコンパイルは使うべきではなくバージョンは固定すべきだし、 使ったとしても事前最適化しないといけない訳ですが、調整をしようとするとビルドプロセスがわかりにくいせいで、非常に面倒。 以前から感じていたのですが、ページ数の多いサイトを作っていると、改めてリッチ過ぎる事の弊害を感じました。


私は数千ページ以上のビルドには、以下の処理手順のビルドツールを自作しています。

1. UnCSS/DropCSS: 未使用CSSを削除 (事前処理→数千ページに一括適用)
2. tdewolff/minify: JavaScript/CSS/HTMLを圧縮
3. 自作: gzip/brotliで圧縮

まずSPAでよく使われるインライン化は非SPAページでは効率が悪い事が多いので、たいていはlinkタグで読み込みます。 ページごとに最適化するのではなく、使うべきCSSをすべて載せたテストページを作って未使用CSSの削除を事前に行い、文字列展開します。 たくさん読み込むと遅くなるので、ファーストビューとセカンドビューの2つだけにします。 そして次にコンテンツ圧縮していくのですが、ここで重要なのがtdewolff/minifyを使う事です。 以前紹介した事もあるけど、Node.jsのたいていのビルドツールの100倍ほど高速に色々なものを圧縮できる素晴らしいツールです。 最後にgzip/brotliで事前圧縮してビルドは完了。

割と簡単な上記の構成でも、1万ページくらいなら2-3分でビルドできます。 Node.jsのビルドツールだと数時間は軽く掛かるので、やはりtdewolff/minifyは凄いと思う。 その割に日本語の記事がほとんどないのは不思議です。SPA人口が多過ぎるのかなあ。

ところで本当は画像/SVGを自動でインライン化するような機能も自作してるんだけど、パースに時間掛かるしファイルサイズの14KB調整とかでビルドが遅くなるだけなので、最初から手作業でインライン化したほうが良いんじゃないかと最近は思ってる。 このようなビルドプロセスの最適化もとても大切だと思う。


tdewolff/minifyに唯一欠点があるとすれば、JavaScriptの圧縮率が平凡な事でしょうか。 本気で圧縮するなら他ツールを使うべきですが、1万ページあるとビルドに丸1日掛かりかねないので無理。 tdewolff/minifyがローカル変数をmangleさえしてくれれば間違いなく最強ツールになるので、今後に期待しています。 追記: 気付いたら速度も圧縮率も素晴らしいツールになっており、あらゆる面でほぼ最強になっていました。つよい。

BloggerのURL登録が神速になった

Google Search Consoleを触っていて気付いたのですが、 Googlebotの更新後くらいからBloggerのGooglebotによるインデックス化の仕組みが変わったように思います。 いくつかのブログで確認したので間違いないと思うのですが、おそらく記事を公開した瞬間にURLが登録されるようになりました。

ただURLがクロール対象として登録されるだけで、即座にインデックス化される訳ではないようです。 ようするに速攻でキューイングされる状態と思ってます。 更新が早いサイトはクロールも早いので、即座にインデックス化されるサイトもあるかも知れません。 更新頻度の多いサイトがもっと有利になったという認識で良いのでしょうか。

普通のサイトはGoogle Search ConsoleのURL検査からインデックス登録のリクエストが今でも必要です。 これをしないと平凡なサイトはなかなかインデックス化されない。 普段の更新頻度にもよると思いますが、この処理に1日くらい時間が掛かります。


実は最近作ったサイトで何ヶ月待ってもインデックス化が終わりそうにないサイトが手元にあります。 これが1日でインデックス化できればどんなに良い事か。 このように大規模なサイトだとインデックス速度は割と大きな問題になります。 何となくの経験論ですが、Googleはカバレッジが一定量ないと検索結果に全然表示されないと思っていて、 一定量カバレッジを溜めるための速度というのは割と死活問題です。

インデックス化の速度も改良されると良いなあと思っています。


2019-06-22: URL登録は一瞬だけどインデックス化は遅いことがわかったので文章を修正しました。