阿部寛のホームページ。 阿部寛の公式ホームページの運営会社はどこ?ダサい理由は更新がファン?

阿部寛のホームページがダサい?結婚相手も調べてみた

阿部寛のホームページ

の10日目の記事です。 「阿部寛のホームページ」はWEB高速化界隈のトレンド 先月、dev. toと阿部寛のホームページが非常に高速ということで、 インターネット界隈で話題になりました。 この一連の流れは、• dev. to あまりにも速すぎて全てのサイトが過去になってる mizchi あたりがブームのきっかけになったと認識しています。 自分もこれまでに無かった爆速っぷりに感動し、中でもこの記事には特に感銘を受けました。 もう最高です。 阿部寛のホームページの高速化については、• あたりで先人たちがいろいろと試されている模様でした。 と、そんな時にちょうど昨日社内勉強会の当番が回ってきたので、ネタとして阿部寛さんのホームページをPWA化してさらに高速化するというのにチャレンジしてみました。 自分は普段はほぼサーバサイド・バックエンドをやっており、恥ずかしながら最近のフロントエンド界隈のトレンドは追えておらず、ReactはおろかVue. jsすらもまともに触ったことがありませでした。 が、この記事内で紹介されているなら自分でもいけるかも、と。 PWA(Progressive Web Apps)とは PWAについてはこのあたりが参考になりました。 単に高速なだけでなく、オフラインでも動いたりネイティブアプリっぽく出来たりととても素敵な感じです。 公式ホームページを写経してコンポーネント化 PWAとはこういうものなのか、という雰囲気を掴んだところで、 いよいよのhtmlを眺めます。 伝統的なHTMLを修正していく 元がホームページビルダー製のHTML4なので、地道に修正していきます。 frameが使えなかったり• 閉じタグで怒られたり• 大文字のタグを小文字に置換していったり• menu. htm をコンポーネント化したり ひたすら地味に修正していきます。 慣れてない作業なのでここが一番時間がかかりました。 🤧 frameが使えないため、CSSで代替 自分はCSSもあんまり分からないので、この最高のChrome拡張 のCSS部分を参考にさせていただきました。 骨組みが出来たので、速度計測をしながら少し改良 速度計測には、以下のものを使わせていただきました。 jpgをWebP化 を使わせていただき、formatをautoにしてChromeではWebP、Firefoxではjpgになるようにしました。 さすがCDN、もうこれだけで十分速いです。 ついでにモザイクをかけたりもオンラインで出来るので超楽でした。 Cache-Controlを設定 静的なassetsにはCache-Controlを設定したりしました。 ちょっとだけレスポンシブに preactデフォルトのテンプレートだとPC viewは良いものの、スマホブラウザだと疑似フレームの箇所が結構崩れてしまうため、ちょこっとだけ微調整しました。 ただし、元のトラディショナルなホームページの雰囲気を残すために、メニュー等のベースはそのままにしています。 とりあえず完成 早速計測します Google PageSpeed Tools• 本家が93のところ、無事に97まで行くことができました。 webpagetest. org• Cache static contentのところはCache-Conrolとか入れていいのか分からなかったのでそのままにしておいてます。 😅 Lighthouse• Preact PWA abehiroshi さすがpreact、何も無い状態の100点からはちょっと落ちちゃいましたが、PWA面は素晴らしいスコアです。 まとめ これまでフロントエンド界隈はあまり興味を持っていなかったのですが、今回阿部寛さんのホームページを介してpreactを試してみて、PWAの可能性を体験することが出来ました。 これからはフロントエンド方面についても少しは勉強していかねばと思わされました。

次の

最高・最強のWebサイトは『阿部寛のホームページ』である|かじさん@旅するWebマスター|note

阿部寛のホームページ

阿部寛氏のホームページはなぜ速い? まずは分析から始めましょう。 阿部寛のホームページ のソースコードを見てみると、• CSSを読み込んでいない• JavaScriptファイルも読み込んでいない• 画像が少ない ということが分かります。 これがサイトが爆速な理由です。 見た目のスタイルは全てインラインで書かれており、 外部ファイルは1つも読み込まれていませんでした。 そりゃ速いよ それから画像もほとんど無く、backgroundの『ABE Hiroshi』という画像とプロフィール写真くらいでしょうかね。 恐るべし。 Fully Loaded Time• Total Page Size• Requests の部分を見るだけでもすごさがわかります。 それぞれの意味は割愛 サーバーリクエストが6って・・・この数字は小さければ小さいほど良いやつです。 気になる方は、試しにモダンでオシャレな堂本剛氏のホームページ と比べてみてください。 しかしhtml4の書き方は現在非推奨 『阿部寛のホームページ』はとにかく速いし、見やすい。 しかし、 html4の書き方なんですね。 現在はhtml5が使われており、4は非推奨となっています。 というタグはhtml5では廃止されています。 なので、 『新しくWEBサイトを作る』という事を考えれば、同じhtml構造ではSEO的にマイナスになりかねません。 ここに関しては注意が必要です。 【開発者 初級 向け】サイト高速化で役立ちそうな技術 この記事を書いている私は、現在マークアップエンジニア1年目です。 バックエンドやサーバ通信 ? などの難しいことはまだわかりません。 ググった中で、今の技術でできそうな範囲の 高速化のTipsを6つ 挙げていきますね。 参考に見た記事のリンクも貼らせていただきます。 記事主様、ありがとうございます。 pjaxで非同期通信する 非同期繊維だと何がいいのか ページ遷移の際に表示が早い、ページそのものを再描画するのではなく、大元のHTMLはそのままで必要な部分だけ差し替えるのでレンダリングが早いというのと、img,js,cssファイルのリクエスト数が減るのでその分高速になる。 pjaxといえば、私はbarba. jsを実案件で使ったことがあるのでなんとなくイメージしやすいです。 非同期通信すれば、何回もリクエストを送信しなくて良いので速いということですね。 Vanilla 素のJavaScript で書く jQueryやその他プラグインはとても便利ですが、かわりにそのファイルを読み込まなければいけません。 つまり遅くなっちゃいます。 ということで、 JavaScriptを使うのであればVanillaで書く。 近年は『脱jQuery』なんて言われていますし、素のJsで書くのに慣れて置いたほうが何かと良いでしょう。 JavaScriptの理解も深まります。 画像はcssスプライトつかう たくさん画像ファイルを読み込むのもそれだけ時間がかかるので、できそうな部分でcssスプライトを使う。 1枚の画像で、cssで見せる範囲を操作するやつです。 背景のあるボタンのホバーとかでよく見かけます。 ファストビューがきれいに見えるcssだけ先に描画されるようにする• pjax• VanillaJS• cssスプライト• ファーストビューのcssだけインライン• キャッシュ• gzip圧縮 調べごとするのって楽しいな! スキル面でいうとVanillaはあんまり書いたこと無いので、勉強してみます! 【おまけ】すぐできる画像圧縮 少し知識があればすぐにできるやつです。 画像のサイズを小さくする 画像のサイズは適切にしましょうってことですね。 デジカメとかiPhoneで撮った写真はファイルのサイズがかなり大きいです。 私がファイルの圧縮とリサイズにいつも使っているのは『』というWEBツールです。 無料で使えます。 例えば、 上記の花火の画像。 これは私がiPhone7で撮影した写真を 圧縮・リサイズしたものです。

次の

WEBサイトのページスピード選手権!表示速度が最も速いのはどこだ?|きにぶろぐ.com

阿部寛のホームページ

こんにちは!そらです。 今回は、阿部寛ホームページなぜ爆速で軽い?ファンの誰が作者かを調査!をお届けします。 以前から阿部寛さんのホームページが話題になっていますが、その理由には3つあります。 爆速につながる、めちゃくちゃ軽い。 そのデザインが素朴でダサい。 もともとは阿部寛さんのファンサイトだった。 一般的にホームページは、事務所がデザイン会社に依頼して制作してもらい運営するのが大半です。 しかし、阿部寛さんのホームページがもともと、ファンの方が作った応援サイトだとすると、なぜ阿部寛さんはご自身の公認ホームページにされたのでしょうか。 今回は、阿部寛さんのホームページについて、作者はファンの誰なのか、また爆速で軽い理由についても調べてみましたので詳しく紹介していきます。 阿部寛のホームページの作者はファンの誰? もともとはファンの誰かが作った応援サイト。 そのサイトが、後に阿部寛さん公認ホームページに昇格したそうです。 では、ファンの誰かとはいったい誰なのでしょうか。 あらゆる情報源を駆使して調べてみましたが、残念ながらその誰かを特定することはできませんでした。 分かった事は、モデル時代から阿部寛さんを応援されているファンの方だということでした。 自分が作った阿部寛さんの応援サイトが、大好きな阿部寛さんと事務所の方に認めてもらえるということは、とても幸栄なことですね。 ファンが作ったサイトを今尚変えることなく、当初のスタイルのままご自身のホームページとして運営されているところに、阿部寛さんの人柄の良さ、柔軟さを感じ取る事が出来、とても好感が持てました。 阿部寛のホームページはいつからあるの? 今から20年以上前、1996年あたりに開設されたのではないかと思います。 Windows 95 が発売され、インターネットが普及し、ウェブサイト作成ソフトのホームページビルダーも発売されているので、恐らくこのソフトを使って作成されたと思われます。 阿部寛のホームページの運営会社はどこ? 阿部寛さんのホームページの「・管理者」のページを開いてみるとこのような記載がありました。 写真の無断転載は禁止いたします。 これはどういうことなのでしょうか。 一般的には所属事務所が管理・運営していることが多いので、このような文章は掲載されませんし、外注制作だとしても管理・運営は所属事務所にしていることが大半です。 所属事務所の茂田オフィスが協力&公認しているという文言から、外部が運営しているということが分かります。 運営も作者であるファンの方がされている、という見方が妥当ですね。 その速さはクリックする前に開いてるんじゃないかってくらい早いです。 なんと、制限速度がかかったスマホでも難なくサクッと表示。 現代は回線の高速化が進んでいますが、それ故に、写真や動画を高画質に使う傾向にあり、そのためデータが重くなって、サイトによっては写真や動画が途中で表示されなくなることがあります。 なぜ爆速で軽いのか分析してみた• サイトのプログラミングがめちゃくちゃシンプル!• HTMLコードが9行299文字と、超少ない。 デザインが単純!• 写真はトップの1枚のみ。 カテゴリーは、たったの7個。 余計な広告など無し。 まさに、シンプルイズベストですね! 阿部寛のホームページの内容は? 構成がシンプルということは分かりましたが、その内容はどうなのでしょうか。 トップページ:写真とプロフィールと最近の出演情報。 カテゴリ:映画出演・ドラマ出演・舞台出演・写真集・出版本・管理者 なんと、中身もザ・シンプルでした。 それなのに出演情報などはとても細かく、ひとつひとつズラーッと作品が表記されています。 色鮮やかなページはひとつもありませんが、内容は非常に良いです。 阿部寛のホームページの口コミや評判は? たびたび話題に上がる阿部寛さんのホームページについての口コミをご紹介します。 そのまんますぎて、ちょっと笑ってしまいます! 背景については、ページごとに違うロゴが並んでいて、単純明快な背景になっています。 トップ「ABE Hiroshi」• 映画「Movie」• ドラマ「Drama」• 舞台「Stage」• 写真集「ABEHiroshi」• 出版「Essay」 カラフルで色鮮やかだったり、写真や動画など満載のホームページが現代の主流になっている中、阿部寛さんのホームページは、時代に乗り遅れたままの、まさに90年代の臭いがプンプンのデザインになっていますが、それが逆に新鮮だと、人々を癒していることは事実みたいです。 他の芸能人のホームページとどう違う? 他の芸能人のホームページは、ほとんどが時代に合ったオシャレなデザイン。 写真もカテゴリもたくさん並んでいて、シンプルなホームページでも、そのほとんどが表示されるまで早くても1秒〜2秒はかかりました。 阿部寛主演ドラマ『まだ結婚できない男』の公式ホームページも話題! 阿部寛さんは、10月から始まった新ドラマ『まだ結婚できない男』に出演されています。 桑野信介のページだけが、他の俳優さんたちのページは全く違うデザインになってました。 このネタと連動して、阿部寛さんのホームページが再び話題を呼ぶ結果になりました。

次の