Kindle版どの話も丁寧に作ってあるなぁと感じる短編集だった。キャラも独特だけど現実離れしてなくて良かった。このマンガがすごいオンナ編2位おめでとうございます。落語もの最近は色々出ている中でも、落語描写も丁寧な一方で、キャラクターの設定は少女に化ける豆狸の女の子だったりしてそれがまた良い。ストーリーテリングも良くて感動したので読んでください。『すうの空気攻略』の福井セイ先生の新作で、前作同様にいい感じに気が抜けてる主人公を眺める感じでゆる〜く読めて便利。周りがドンドン巻き込まれて緩んでいくのも良いですね。Kindle版アサダニッキ先生のマンガってこれまでなんだかんだで読んだことなかったんだけど、掛け合いがテンポよくサクサク進んで良いですね。百合かどうかは怪しいと思う。最近のわたモテ、めっちゃ百合というか気付いたら智子に友だちがめっちゃ出来ててスゴい。1巻からは想像がつかない登場人物と相関図の複雑さ。その他の2019年の良かったマンガたち買った単行本の一覧から選んでいる結果、ウェブだけで読んでいるのが抜けがちなので、貼っておきます。サマータイムレンダ[asin:B07YQW31ZK:detail]最近謎が解けてきて1から読み直したい気がしてきているけど少し我慢している。純情戦隊ヴァージニアスヒーローでもなんでもないやんって感じだけど、登場キャラが全員チョロくて週2更新ありがたいってなってる。Kindle版パルノグラフィティこれをやるのがズルい。今年のサッカー漫画です。あと、この記事には載せなかったけど、良かった作品たち紹介しているので、余力があったら読んでください。00:45はてなブログおみくじ2019Tweetもっと読むコメントを書く2019-12-31僕が2019年に読んだマンガから今年1巻が出たものまたは短編集だけを抽出しておみくじ出来るやつ作った2019年に読んだマンガの感想をまとめているんですが、年内に終わりそうにないので代わりに、僕が2019年に読んだマンガから今年1巻が出たものまたは短編集だけを抽出しておみくじ出来るやつ作りました。今年読んだマンガは全部Spreadsheetになっているので、そこから1巻っぽいのを抽出しておみくじにしました。昨日寝る前に思い立って、朝起きて昼前くらいに書き始めたら高速に出来た。作品を読んだ感想を聞きたい場合は結果を僕にmentionしてくれたら答えます。今年のマンガの感想まとめる活動は今から開始します。映画館で観た映画それぞれの映画館の会員情報ページとかをパースして調べた。個々の作品の感想は個別に聞いてください。響け!ユーフォニアム~誓いのフィナーレ~』が9回でした。均すと週に1回という感じだけど、MOVIX京都の爆音映画祭のときは1日に4本観たりとかしてたし、基本的に1回で2本とか観ていてそういうペースだった。映画館で観た映画Tweetもっと読むコメントを書く2019-12-20ウェブページの表示を遅くなくしたい時の道標このエントリは以下のアドベントカレンダーの19日目の記事です。先日行きつけのビアバーの店主が使っているPCが遅いという話があり、様子を聞くとどうやらHDDで且つメモリも4GBという雰囲気で、触ってみると、たしかにWindowsのホームメニューを出すのに数十秒とかかかっていて、これで暮らしているのは大変だろうと思い、HDDをSSDに、メモリは16GBに増強するということをしました。その結果見事に体験は改善されました。このときにふと思ったのは、速くなったねとは思うものの、遅かったものが普通くらいのパフォーマンスになっただけで、じゃあ他と比べて速いかというとそうではないよねということです。ウェブアプリケーションでもこういう話はあるなと思っていて、パフォーマンスチューニングと言っても、遅い状態から普通くらいにまず一旦持っていきたいよねと思うことがあります。何の話かというとウェブアプリケーションを開発していると初期は素朴なので、HTMLもシンプルでJSも少なく、また画像なども必要最低限だけだったりして、阿部寛のウェブサイトのようにシュッとロードしてレンダリングが完了するのですが、ウェブアプリケーションの開発も進んでいくと、徐々にあれもこれもと徐々にHTMLも肥大化し、JSも大きくなり様々なモジュールがくっつき、場合によってはルーター的なのを内包し、ウェブページの中にも画像がドンドン登場したりして、いつの間にか雪だるま式にロード時間やレンダリングまでの時間が延びることになります。今日は、この雪だるま式に膨らんでしまったロード時間やレンダリングまでの時間を短くしていくまでのことを紹介したいと思います。Paintまでを短くしようという話です。受け取ったコンテンツの最初の部分をレンダリングするタイミングのことです。初歩的なものを中心に紹介しますが、ウェブアプリケーションが大きくなっていく過程でこういったものは見落としがちで意外とシュッと出来る上に効果を感じられたりすると思うので、今一度皆さんのお手元のウェブアプリケーションにそういった箇所がないかチェックする際の指標になればと思っています。スローガンのご紹介この活動をやっていくときのスローガンを紹介します。読み込まない実行しないそれぞれもう少し具体的なテクニックも踏まえて見ていきましょう。読み込まない、そして実行しない「読み込まない」は(そのときの表示に)必要なもの以外は読み込まないということです。ウェブページの上部を表示している時にウェブページ最下部に埋め込まれているYouTubeや、列んでいる画像を読み込まないということです。指定することで遅延ロードをさせることが出来ます。使ってpolyfillできるので、こういったことをすることで簡単に画像の読み込みを抑制することが出来ます。意外とページ内を見渡してみると表示範囲外に要素が沢山あるもので、それらの読み込みを削ることで本当に表示に必要なものにネットワークリソースやレンダリングコストを集中させることが出来ます。InsightやLighthouseなどで簡単にチェックできるので一度やってみてください。画像やJSやCSSなど削減できるものが見つかると思います。画像の遅延ロードを設定してまわることをもう少し大枠で捉えるとそもそもHTML自体も最初は削ってしまって、必要なタイミングで組み立てたり、fetchしてきて挿入するということも考えることが出来るかもしれません。一方で、不要なものは読み込まない一方で必要なものは少しでも高速に読み込みたいものです。APIで取得することが分かっている場合はpreloadやprefetchを使用することでリソースの先読みをすることが出来ます。ここで読み込まない対象として一番しっかり考えたいものとしてJavaScriptのファイルがあります。言っても現代的なウェブアプリケーションにJavaScriptは切っても切れない関係ではあり、Reactなどを使ってSPAにしている場合にはいつの間にか巨大な1つのbundle済みファイルになっていることも少なくないと思います。読み込まないというわけにはいかないという前提で、どう削っていくかということを考える必要があります。ここでもまずは最初のレンダリングに必要なJavaScript以外を読み込まないというのが鉄則になってきます。実行しなければ読み込むのは良いのでは?という方に向けて、ここでJavaScriptのファイルサイズに関する1つのグラフを紹介したいと思います。)これによって分かるようにJavaScriptのファイルサイズを削減することは画像のサイズを削減すること以上の意味を持っています。JavaScriptは読み込まれるとそれがパースされ、コンパイルされ、実行されます。この間にかかる時間は画像のデコードよりも遥かに大きくウェブページの表示までのパフォーマンスに大きな影響を与えます。Reactなどを使っていればJavaScriptを実行するまでが短くなればなるほどレンダリングが早くなるのは当然という感じでもあります。Splittingは1つの強力な選択肢になります。importを利用することで、JavaScriptを複数のChunkに分割してくれます。このことによりエントリポイントになるJavaScriptファイルは小さくなり、パースや実行の時間を短く出来ます。importをすることになってしまい結果的にJSの実行中にファイルの取得とパース等が起きてしまい終端のJavaScriptを実行するまでの時間が結果的に長くなり、レンダリングまでの時間が延びるということもあるので気をつけたいですね(この辺の上手いやり方があんまり掴めてないのでオススメ情報あったら教えて下さい)。現代的なウェブページの場合、ウェブページ内にSNSのシェアボタンや埋め込みのためのJavaScriptや場合によってはアナリティクスや広告のためのJavaScriptなど数多くのJavaScriptが読み込まれていると思いますが、これらも例えば必要な位置にユーザーがスクロールするまでJavaScript自体を挿入しないということも考えることが出来ると思います。JavaScriptの実行は1つのフレームに対して1つのスレッドしかないので、これらの読み込みからの実行を抑制することでメインで提供・実行したいJavaScriptの実行時間をセーブすることにも繋がります。読み込んだ際も、JavaScriptのそれぞれの関数などの実行を極力しないということも重要です。JavaScriptを書いているとメインのことをやりつつ、イベントをリッスンする形にしたり、Promiseなどの形にして、並列に複数のタスクをこなそうという風に記述したくなることがあると思いますが、こういったものを我慢して実行を遅らせるということもメインのレンダリングに必要なJavaScriptの実行時間を守るという観点で考えてみても良いかもしれません。色々なハンドラを初期化時に設定していることでいつの間にかメインの表示に必要なJavaScriptの実行を阻害している可能性があります。あるJavaScriptの(関数の)実行が長いことがPerformance計測などにより分かっている場合はrequestIdleCallbackのようなものの利用を検討してもいいでしょう。JavaScriptの実行に関してはこれまた素朴にやっていると、ひとまずエントリポイントをdocument.addEventListener('DOMContentLoaded')に引っ掛けていたりするかもしれませんが、script要素のasyncと組み合わせて読み込み完了後即実行させていてもこれだと効果薄になってしまうので、DOMがなくても準備できるもの、例えばglobalに何かをexportするとか、Sentryの初期化をするとかはそれまでにさっさと終わらせておくみたいなのも地味に効いたりするので見直してみてください。JavaScriptの実行がウェブページのレンダリングに与える影響に関しては過去にまとめたりしているので、そちらも手前味噌ですが参考になるかと思います。まとめウェブページの表示の高速化の遅くなくすための道標として、考え方のヒントになればと思って書いてみましたが、いかがでしたか?若干本文中は具体例に欠けるような感じにはなってしまいましたが、こういったテクニックや考え方を持って今年一年ははてなで提供しているGigaViewer(はてなで提供しているマンガビューワです)でのマンガ表示部分が表示されるまでの高速化などに取り組んでいたので、ブログ記事の形でざっと考えていたことを書いてみました。株式会社はてなでは一緒にウェブページ表示の高速化をやっていく人を募集しています。京大マイコンクラブではこういったトークを僕が極稀に合宿などで行ったりしているので、興味がある人は入部してみてください身近な人はお声掛けいただいたら一緒にPerformance計測などをしながらこの辺の話を伝授するみたいなことも多分出来ると思うのでお声掛けください。さんと:tofu_on_fire:さんです。02:56ウェブページの表示を遅くなくしたい時の道標Tweetもっと読むコメントを書く2019-12-02好きなウェブサイトにmasawadaを表示できる<masawada-3d>を作りましたこんにちは!!!みなさんmasawadaさんをブログに埋め込みたいですよねそういう皆さんのために<masawada-3d>をCustomElementで作成しましたわいわい!!!!!詳しくはGithubのリポジトリを見てください!!!!!!!!!!!!!詳細は省きますが、Three.jsで描かれていて、カメラとmasawadaの向きを与えることで任意の角度のmasawadaさんをウェブサイト上に描くことが出来ます。canvas').toDataURL()とかでも出来ます!!!!属性をrequestAnimationFrameで書き換えるとかも良いですね。欲しい機能や属性があったらissueやPRで教えて下さい。Adventarの2日目の記事でした。この記事はネタが被ったのでJSConfJP中に発想から実装を行いました。間に合って良かったですね。皆さんも自身のブログやウェブサイトなどでご利用ください。良い作例あったら紹介したいと思います。はてなブログPro京都、学生、エンジニア。漫画を読んだりインターネットをしたり。好きな飲み物はビール。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。