20191214-thumb

関連記事

デフォルト画像
2018.10.18
開発者ツールの「Audits」とかいう便利ツール

実に便利な機能 前々からChromeの開発者ツールにはページスコアを測る機能がついてたんですが、久々に見たらめっちゃ進化してました。 今日会社で言われて気づきまして、尋常じゃないほどに便利になってたんですよね。 確か前まではせいぜいスコアが出る程度で、詳しくやろうとすると外部Webツールなどを使っていました。 そっちは大抵どこがどう悪いのかが表示されますからね。 それがですね、Google先生が重い腰を上げたのか、スコアだけでなく「何をしたらいいのか」を書いてしまっているんですよ。 これはもはや革命ですよ!革命! 一部の客層で少しWebに詳しくなると、SEOに詳しくなり始めるんですよね。 そんで、スコアツールとか使ってどうこう言い出すと本当に地獄。 中には「Amazonは80点超えてますよね」とか言い出す始末。 お前自分がAmazon並のコンテンツ力持ってるとでも思ってるのか? 流石に言いませんけど、結局どんだけSEO力高めてもコンテンツがコンテンツなら意味はねえんだよ! というのは置いときまして、とにかくスコアを上げてくれと言い出すんですよ。 それは仕方ねえと取り組むんですが、どこをどうやっても変わらない箇所とか出てきてもうほんと地獄。 慣れてくると何したら良いのかなんとなくわかりますが、ほとんど手探り。 そもそも大体がGoogle先生基準な癖して奴らその辺の情報を出したがらないと来たもんで。 これまではそうした中で一応スコアツールに書いてあることやってきたんですよ。 んで、今日見つけたこれですね。 こんなんもう最高。 何が嬉しいって、想像以上に事細やかに「ここをこうしろ」ってのが書かれてあることですかね。 残念なことに日本語ではありませんが、なんとなくわかるでしょ。 ちなみに上のスコアはこのページ(index)のスコアです。 静的ページでなおかつ画像とかも圧縮したりしてるので流石に良いスコア出てますね。 ちなみにスコアの雑な説明としては Performance: (多分)CSSとかHTMLとか画像の圧縮とかしろってやつ(地味に面倒) Progressive Web App: PWA化しろ Accessibility: 多分W3C準拠な書き方すればスコアが上がる(class=""とかやってると下がる) BestPractices: 見た感じJSの書き方とかSSL対応とかその辺を見てるっぽい? SEO: viewportだとかレスポンシブだとかやってれば上がりそう(Twitterカードの設定とかも) 多分こんな感じ? ぶっちゃけこれで見るべき点はPerformance, BestPractices, SEOだと思います。 特に上と下の2つ。 PWAに関してはぶっちゃけ自己満足だと思ってます。 アレ活用するとなるとそれこそニュースサイトとかそこそこの企業じゃないと無理。 Google先生の罠。 個人的に嬉しい点としては、W3Cに沿わない書き方とかをHTMLの行数とかで指摘してくれる点。 多分これで書かれてあることを実施すれば大抵のスコアツールで良い点取れると思う。 ただ、Performanceに関してはWP使ってる場合良い点数取るのは難しいと思います。 それこそ圧縮バッチリキメて使ってるPHPの処理をなるだけ軽くする必要があるんで。 ウチが点数高いのはHexo使って静的なページにしてるからですね。 WP使うと、PHPで動的に記事引っ張ってくるので時間が掛かる、それはしゃーない。 Hexoの場合は、ローカルで生成したHTMLをWeb上にアップロードしてるだけ。 つまり生成に時間が掛かっても、それはHTMLの読み込みに一切影響しない。 キャッシュすると余計に速くなって超スピード!?って感じです。 本気の記事サイト作るとなるとHexoとかでは力不足な点が出ますが、そうじゃないなら便利なんですよ。 結局世の検索システムを牛耳ってるのはGoogle先生なので、こういう公式ツールで良い点取ろうね。 ここで点数高いとGoogle先生にしゅきしゅきされるので。 ぼくはSEO100点取れてるのでもうこれ以上しないです。 PerformanceはAnalytics入れてる時点で確定で数点下がるのでどうでもいいです。 それでは今日はここらでサヨウナラー

デフォルト画像
2019.10.06
サークルチェックサポート完成したので、早速使いはじめた

完成しました 前回の日記で話題に出したM3サークルチェックサポーターですが、完成しました。 これhttps://saikofall.com/m3list/ 最終的な機能としては以下。 1.色メモ多分メイン機能。サークルカード内にマウスを持っていくと左上に☆マークのなにかが出現。クリックすると色メモ画面が表示されるので、クリックすると色メモできます。 2.色メモ絞り込みページ一番上の「色で絞り込み」からそれぞれの色のメモを絞り込んで表示。正直なんで動いてるのか理解してないので多分何かしらバグがある。 3.リンクの既読リンクをクリックすると、リンクアイコンの上にチェックマークが出現。そのサークルの全リンクがチェック済になるとサークルカードの右上に済マークが出現。ちなみに、チェックマークにマウスを当てるとバツボタンが出現、クリックすると既読を未読状態に戻せる。 これだけです。20時間ぐらいかかった気がします(体感)。もうちょいかからないと思ったんですけど…。いや、ひとつ機能拡充するだけであんな頭おかしくなるくらいぐちゃぐちゃになるとは思ってなかったので…。 使ってみた 思ったよりもちゃんとできてるって感じです。とりあえず元々予定してた機能は実装できたので十分満足!個人用なのでバグがあっても気にしないスタイルではありますが、使ってみるとバグが怖くなってきますね。これもし後半まで行ってダメになったら絶望感が半端ないことになりそうです。 万が一ですが、使ってる人がいたら必ず途中で別途外に保存しましょうね。メモ帳でもなんでもいいんで。どうなっても知らないぞ☆ ちなみにですが、今回ので使ってる技術で「webStorage」というものがあります。これは主に「リンクをクリックした」とか「色が付いた」とかの情報を保存するのに使っています。これらの情報はテキスト情報としてまとめているのですが、もしそのサイズが5MBを超えるとそれ以上はエラーが出て保存ができなくなると思います。つまりそれ以上色メモを付けたりすることができなくなります(多分)。保存してる情報は極小さいテキスト情報なのでそうそうそんなことになるとは思いませんが、ありえない話ではないので注意しましょう。 本来はこういうのはPHPとかで管理するとか、jsonでサーバーに保存するとかしないといけないとは思うんですがね…。まあ今回は全部クライアント側で完結させたかったのでこういう実装になっています。要はあなたのパソコンが壊れたり、不可思議なエラーが出ると全部吹っ飛ぶので気をつけてねって話です。 ぼくもある程度まで行ったらどっかに別途保存する予定です。初使用するwebシステム(システム?)なので念の為というのが一番大事です。やっぱこえーなー、結構便利に使えてるけどこえーなー。 とりあえず今回はこれで完成ということで、システムに手を加えることはないと思います。次の構想とか練ってるから、M3終わったら色々頑張るゾイ。 それでは今日はここらでサヨウナラー

デフォルト画像
2018.10.25
秋M3の気になるサークルリストできた!!!!

イエーイめーっちゃ疲労感 ぼくのM3チェックリスト http://event.saikofall.com/m3/2018-autumn/ 数日かけて作りました、チェックリストです。 まさかここまで時間が掛かるとは思いませんでした。 先日カタログを買って、まだ1週間あるし余裕やろと思ってたんですが、思いの外手強い。 全サークルをチェックしてたのが原因なんですけど。 だけどそのおかげでしっかり見れたゾ! 今回の事前調査では26のサークルに当たりをつけました。 当日はガンガン狙っていきますよ~~~~。 まだ行く順番とかは決めてないです。 通販とかデジタルで良いのでは!?と最初は思ったんですが、結局行きたくなるんですよねぇ。 定期的にこの手のイベント(即売会)は行きたくなるからしょうがないです。 そもそもほとんど現場の雰囲気を味わうために行ってる節がありますね。 しょうがない。 サークルリスト リンクで上げてますが、今回はちょっと頑張りました。 最近流行りだって会社で聞いたのでUIkitを利用しています。 英語で書かれたコンポーネントを見ながら作るのは結構手間やんな…。 それでも簡単にカードタイプのリストを作れたので上々なんですが。 ドメインはこのブログに使ってるやつをサブドメイン切って使ってます。 新規取得したり、どっかのサーバーの初期ドメインはあまり考えたくなかったので。 別にWordpress入れて管理するわけでもないのでいいかなーと。 リストの生成にはjsonを使っています。 jsonに記述した要素をjsで引っ張ってきて出力してるって感じ。 なので実はHTMLのファイルはほとんど記述がなかったりします。 リストは全部jsで出力してるからですね。 とても便利。 正直わかる人ならWordpressとか必要ないってことになりますね。 まあ大規模なものはまた別ですが。 というこって、なんだかんだであまり利用したことのない技術を使ってるわけですよ。 主にjsonとUIkitらへん。 前者は会社で使うこともありますが、UIkitは趣味の範囲内のものですね。 なんでかって? この手のはそれを使う前提でデザイン起こしてもらう必要があるからだよ!!! 基本的に自由度が失われるので、ちゃんとデザインも各コンポーネントに沿って作ってもらう必要があるんですよね。 といった感じで作りましたが、実はまだ完成形ではありません。 なぜかと言えば、このままだとスマホでは見づらいからです。 カード型の弱点だと思ってます。 現在実装中の機能としては、ページ右上にあるアイコンですね。 これを押すと「リスト型」と「カード型」に切り替えができるって寸法です。 jQueryでゴリゴリ開発中です。 ぶっちゃけそんなプログラム部分は終わってるんですが、リスト型のデザインで手間取ってる感じです。 実はjs部分は終わってたりして。 目標は明日の終わりぐらいには作り終わってるってところです。 そうしないと間に合わないからね。 当日はこれと紙とスマホに保存したチェックリストを臨機応変で使っていくことになります。 楽しむぞ。 それでは今日はここらでサヨウナラー