[ご案内] Development 開発/ 制作を一覧表示しています。(トップへ戻る)

PageSpeed Insights の結果について、他の有名サイトと当ブログをザッと比較だけしてみた件。      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/81882362.html

PageSpeed Insights の結果について、他の有名サイトと当ブログをザッと比較だけしてみた件。

PageSpeed Insightsとは、
ページの読み込みスピードを診断してページの最適化を提案してくれる
Googleのサービスです。

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

sai1
まず、ウチの結果です。
モバイルが良い結果になっていますが、
これはこのブログを運用している、さくらのブログのモバイルテンプレートが
軽量なためだと思われます。
PCサイトはオレンジ色です。少し改善の余地がある意味を表しています。
元々赤色でやばかったのですが、先日最適化処理をしたので、
これでも少しだけよくなってます。
私のブログをずっと見てくれている人がどれだけいらっしゃるのかは不明ですが、
以前と比べると表示が速くなったと思います。
※最適化処理については、気が向けばまた別に書ければと思います。

sai2
気になる情報がいっぱい。イケダさんのブログです。
パソコンはオレンジになっているものの、高いスコアで良い結果だと思います。
モバイルが赤判定になってました。
みたところ、どうも読み込まれているjsファイルが沢山あって
それが赤判定につながっているみたいです。

sai5
いつも人気のlanderblueさんのブログです。
PCサイト、モバイルサイトともに、あまり良くない結果でした。
ただ、個人的に見に行ったときに
ページが重いような印象は受けないような気はします。

sai3
趣向を変えて、パズ速です。
パズドラ情報でいつもお世話になっているサイトです(笑)
PCサイト、モバイルともにオレンジ色になっているものの、
両方70程度のスコアが出ているので、良い結果だと思います。

sai4
ブログから離れて、Yahooはどうでしょうか。
モバイルは低めの評価ですね。。
PCサイトはオレンジになっているものの、良いスコアだと思います。

他ページの解析結果はこのあたりで…。

元々、自分のブログが重いことが以前からずっと気になっていて、
理由もだいたいは分かっていたのですが、
修正が面倒でほったらかしでずーっと最近まできていたんですが、
先日思い立ってページの最適化(軽量化)を試したことが
この記事を書くキッカケとなりました。

色々参考になるので、
ブログやってる方でも、そうでない方でも
気になるURLをこのツールで調べてみると面白いですよ。

あなたのページはどういう結果になったでしょうか?

さいごに、個人的に思うことですが、
あくまで機械的判定結果で、何が何でも
高スコアにしないとヤバイということは無いと思います。
一番重要なのは良質なコンテンツだったり、
サイトを運用している人が何を一番大切に考えているかだと
思うので。。。

(うちは気ままな運用が第一優先です(´-`).。oO)

とはいえ、google様に余りにも低いスコアを出されると
なにか危機感すら感じてしまいますが…。

またGoogleさん以外の同種のサービスでも
よさげなとこがいくつかありましたのでご紹介だけしておきます。

GTmetrix | Website Speed and Performance Optimization
http://gtmetrix.com/
英語ですが、よさげでした。
こちらで詳しく紹介されてます。
http://www.akagami.jp/seo/webpage-read_speed-checker.html

Website speed test
http://tools.pingdom.com/fpt/#!/
見やすいです。

まとまりませんが、以上です。

テスト環境:Windows7 Home Premium



「この結果をツイートする」や「この商品についてツイートする」のようなかんじのツイート機能を実装する方法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/59386169.html

「この結果をツイートする」や「この商品についてツイートする」のようなかんじのツイート機能を実装する方法

ウェブページのネタ系の診断をしたあとに、
「この結果をツイートする」なんて機能があったり、
オンラインショップの商品画面で「この商品についてツイートする」
とかいう機能がありますが、ああいうのをどうやるのかというお話です。(たぶん)

「Web Intents」でTwitterの機能をサイトに埋め込む[to-R]
http://blog.webcreativepark.net/2011/04/20-051058.html
<script type="text/javascript" src="http://twitter.com/intent/tweet?http://platform.twitter.com/widgets.js"></script>
http://twitter.com/intent/tweet?original_referer=a要素を設置するURL&url=シェアするURL&text=シェアしたいテキスト
こちらのページを参考に試してみて、できました!

ポイントは、シェアしたいテキストにあたる部分に来る日本語処理ですかね。

日本語をそのままURLに乗せることは基本的にできないので、
事前にURLエンコードをしなければならないのですが、
ウェブアプリのように動的に組み込むのであれば
エンコード処理を挟む必要があります。

あと一応textのみ指定すれば、つぶやき自体はできるっぽかったです。

適当ですが、以上です。

iPhoneで、ウェブページのソースを見る方法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/58028722.html

iPhoneで、ウェブページのソースを見る方法

iPhone/iPadのSafariでページのソースを表示 - メモ用紙
http://d.hatena.ne.jp/scientre/20120903/view_source_on_mobile_safari

試してみましたが、便利でした♪(´ε` )

IE8を、IE7にする方法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/57338532.html

IE8を、IE7にする方法

F12 -> ブラウザモード -> IE7 を選択。

取り急ぎの、備忘メモです。

テスト環境:Windows7 Home Premium, Windows XP

メディアクエリでとりあえずスマホ対応したときに諦めたことを2つほどサラっと。      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/56979990.html

メディアクエリでとりあえずスマホ対応したときに諦めたことを2つほどサラっと。

・adsense※。。 phpが必要そうだから。さくらのブログでは基本的に導入不可か。
 参考:http://www.yoheim.net/blog.php?q=20120630
 
・画像の扱い。流体型のブログでの画像の扱いは、うわさどうり難しい。
 レイアウトにあわせて自動的に可変させる場合、
 やってみると分かるがIEが障害になる。
 まぁこのブログではIEをかなり捨ててはいますが…。アクセスは多い(・_・、

以上2つ。
あと、特筆するなら、流体(リキッド)レイアウトという性質上、
pixcel単位の精細な指定は、もはや無理です。(たぶん)
これからはそういう時代になるんでしょうね。。
まぁ適当な自分にはこのあたりは嬉しいですが:(;゙゚'ω゚'):ブルルルルr・・・

※メディアクエリとは…
[CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例 | コリス
http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html

※adsenseとは
http://e-words.jp/w/Google20AdSense.html

CSS編集の点において、IEの開発者ツールをfirebugみたく使う方法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55523889.html

CSS編集の点において、IEの開発者ツールをfirebugみたく使う方法

firebugってweb制作者、開発者にとってすごく便利なツールというのは
言わずもがなだと思うのですが、いかんせん“firebug”っていうくらいですから、
基本的にはfirefoxしか使えません。
(最近はChromeでLite版なんかも出ていますが。)

firebugの便利な機能のひとつには、
任意のタグを選択して、それにどういったCSSがかかっているのかを
調べることができることだと思います。
調べるだけではなく、リアルタイムに編集を加えて
プレビューに反映しながら、調整もできます。
このあたりについては、だいぶ前に記事にしていました。

【図解】今更ながらfirebugによるCSS調整のし易さについて。 | kimihiko Tech
http://tech.kimihiko.jp/article/18755744.html

ですが、一般的に利用者の非常に多いIE(Internet Explorer)で
検証できればいいな、という場合は結構多いと思います。

でも、IEではfirebugは使えません。

ただ、最近のIEには、開発者ツール、と呼ばれるfirebugに似た
検証ツールが組み込まれています。
ご存知の方は多いと思うのですが、
あまり使われていない方も多いような気がします。

そこで、CSS編集の点において、
IEの開発者ツールをfirebugみたく使う方法について
少しだけ説明をしたいと思います。

まず、タグを選択して適用されているCSSを調査します。
さらに、CSSのリアルタイム編集&プレビューをします。

そうなんです。実はfirebugと同じようなことができちゃいます!(笑)

ff1
F12を押すと、下にfirebugのようなウインドウが出現します。
これがIEの開発者ツールです。なんとなくfirebugと似てますね。

ff3e
1.矢印を選択し、
2.プレビュー上で、任意の要素を選択し、
3.トレーススタイルを選択します。
すると、選択中のタグに適用されているCSSを知ることが可能です。

ff4
CSSを少し、いじってみます。
クリックすると、編集できますので、変更してみましょう。

ff5
確定すると、プレビューにも反映されました!

ちなみに、これは一時的なプレビューですので、
リロードすれば表示は元に戻りますし、
実際のコードへの影響は何もありません。

トレーススタイルの編集ですが、今回試した、既存プロパティの編集は可能でしたが、
firebugのように、新たにプロパティを追加したりすることは
できないように思いました。

ff7
ただ、htmlタブのほうで、属性の追加、というのができるので、

ff8e
そちらでたとえば、styleプロパティを追加して
CSSを直接書き込めば、その場で色々調整できるように思いました。

私も開発者ツールについては、それほど使い込んでませんが
ぜひ、活用してみてくださいませ。

以上です。

テスト環境:Windows7 Home Premium, IE8


jQuery Mobileを使った国内スマホサイトまとめ      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/54252914.html

jQuery Mobileを使った国内スマホサイトまとめ
http://bit.ly/AcrD9h
勉強用メモ。
こちらもあわせて↓

「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね
http://bit.ly/dM0SjJ

スマートフォンのフォームボタン(inputタグ)を使いやすいサイズにする方法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/53376245.html

スマートフォンのフォームボタン(inputタグ)を使いやすいサイズにする方法

参考にしたサイト
http://symple.jp/120.html

●iPhone
width、height属性でボタンのサイズ調整ができる。
marginプロパティを使うとボタンに余白をつくることが出来る。

●アンドロイド系
width、height属性でボタンのサイズ調整はできない。
marginプロパティを使うとボタンに余白をつくることが出来る。

とっても参考なります( ´ ▽ ` )ノ

国内のiPhone / iPad最適化対応をしたサイトを集めています「iShowcase」      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/43362943.html

国内のiPhone / iPad最適化対応をしたサイトを集めています「iShowcase」
http://www.ishowcase.jp/
へえ 参考なる
via eri sama

ちなみに、当ブログもiPhoneに対応しております。
レンタル鯖側で勝手に対応してくだすってます。


ゆっくりと確実に変化するWeb制作のルール      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/43151040.html

ゆっくりと確実に変化するWeb制作のルール
http://www.motoharusumi.com/ゆっくりと確実に変化するweb制作のルール
私もあとで読ませていただくとします。
いつになるのだ。。

ハイパーリンクうまくいってなければ
手動こぴぺ願います。

ファイルパスをサーバパスにしておいたほうがよい理由      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/42128215.html

ファイルパスをサーバパスにしておいたほうがよい理由

ホームページやウェブアプリに改修が入り、
ディレクトリ構造が変わっても、
file pathの変更が明快かつラクだからです。
これは長期的運用を考えると非常に有用です。

例)

○サーバパス
"/home/xxxxx/www/app/test/data/tmp.txt"

×サーバパス
"../data/tmp.txt"
"data/tmp.txt"

サーバパスは長くなりがちですが、
その手間を惜しまなければ、メンテナンスは楽になります。

細かい説明は省きますが、以上です。


…たとえばDreamweaverなんかで、サイト全体を管理してるなら
自動更新なんて便利な機能があるんですが
勝手に書き換わったりするのが個人的には嫌なので
テキストエディタで一枚一枚丁寧に管理しているときのお話でした。

…こういうソフトは便利なんですが、
あまりこういった便利ソフトに頼りすぎていると、
自分が何をしているのか、分からなくなりがちで、
私個人的にはおすすめしないですね。

まぁ、とはいえ、臨機応変ですかね。。長い余談でした。

サイト運営は「農業」よりも地味なのに、「楽して儲けてる」と思われる理由      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/41877668.html

サイト運営は「農業」よりも地味なのに、「楽して儲けてる」と思われる理由
http://invizi.net/:/subject:71
サイト運営に限定せず、
PC・ネット系の仕事が楽して儲けていると思われる理由というのは、
私個人が思うには、
椅子に座ってキーボードをカタカタさせているだけの仕事が、
重いものを運んだり体を動かす畑仕事と比べれば
体力的に“ラク”というところなんじゃないですかね。

その点だけで考えれば確かにサイト運営は
農業より、遥かにラクでしょうね。

ただ、私もウェブ系の仕事をしていますし、
もちろん、決してサイト運営
(に限りらず、広義にPC・ネット系仕事全般)
がラクな仕事とは思ってません。

座りっぱなしで腰も肩もメリメリいいますし、
目を酷使しドライアイになるわ視力は低下、睡眠時間は短いし、
電磁波浴びまくりで、生活も乱れ、肌は荒れますし。。
精神的にも辛い局面も多いですしね。。

「成果がある程度確定している」
というのは、うなずけます。
色々な観点があると思います。

ただ、私個人的には
農業のほうが、遥かにしんどいと思ってます!
色々大変そうですもん。。やっぱ。
あくまで、個人的に、ですよ!

ブラウザのキャッシュ機能を、制作者側で制御する、手っ取り早く確実な、たったひとつの方法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/41543815.html

ブラウザのキャッシュ機能を、制作者側で制御する、手っ取り早く確実な、ひとつの方法

通常、ウェブページの表示データはキャッシュとしてローカルに保存され
次回の表示の高速化などに役立てています。

しかしながら更新の多いページなどは、サーバで更新したはずが
閲覧者側では更新が反映しない、といった自体がよくあります。
制作者なら誰もが何度も経験しているのではないでしょうか。

そこで今回はキャッシュ機能を
情報発信者側で制御する方法をひとつだけ語紹介します。

Ajax?文字化け対策とブラウザキャッシュ対策: Script雑感
http://zombiebook.seesaa.net/article/27148814.html
URL 後ろのパラメータクエリに毎回違う値をくっつける。だけ。
http://www.hogezou.com/hogeru.cgi?hoge=*
物理的にurlが違うからキャッシュもされない、という単純さ。
この方法、いいですね!
※当方、未検証ですが。信じます。

ただ弊害もあって、ページ更新したのにキャッシュで更新されない、
ということはなくなっても、urlが違うがために
新規キャッシュがどんどん溜まっていく、という問題があるかもしれません。
※検証はできてませんが、参考サイトのコメント欄で指摘があるようでしたので。

コレに関してはキャッシュにも容量制限がありますので
HDDリソースを食い散らかすという危険はなさそうです。

もう一点、キャッシュが全て該当ページのもので埋め尽くされてしまう!という
懸念もあるかもしれませんが、よほど頻繁にアクセスされるページでもない限り
そこまで懸念することもないのかな、と思っています。
※あくまで私の主観的想像ですが。

やはりこの対策が一番手っ取り早く かつ 確実な方法だと思います。

手っ取り早い、という意味には、パラメータ付与以外の理由もありまして。
そのほかの方法だと、キャッシュ対策用のコードをいれ、
(それもhtml、php、perl、そのほかファイルなどにより異なる指定が必要)
キャッシュ対策がちゃんとなされているかの検証作業も必要になってきますが
この方法だとそんな作業も基本的には要らないから、手っ取り早い、というわけです。


他には、urlが一定にならないのがなんとなくイヤ。。
とかいう意見もあるかもしれません。

そういう方でも、同様の方法で
画像だけでもキャッシュ対策されてはいかがでしょうか。
画像のキャッシュも困りますしね。

続:ブラウザのキャッシュを無効にしたい!...IEだけ? - こまちドーナツ
http://www.comachi.com/2006/07/ie.html
みんなが困っているこのとてもやっかいなIEのブラウザキャッシュの問題ですが、確認画面で出力するIMGタグのURLの後ろに「?任意の数字」を付加し、いかにもファイル名が異なっているかのようにブラウザに思い込ませることで解決するようです。例えばこんな感じです。

echo "<img src=\"imgfilename.jpg?". time() ."\">";

これで、出力するたびに、imgfilename.jp?1153032707とか、imgfilename.jp?1153032726とか、微妙に値が変化するため、確認画面でキャッシュに影響されません。

私はtime()関数を使いましたが、アクセスするたびにことなる文字列を出力してくれる関数であれば、time()関数に限らなくても良いようです。
これも前述の対策と基本は同じです。
いいですね!

ただこの場合もキャッシュで埋め尽くされる危険性はあるかもしれませんが、
前述の通りここでは気にしないこととします。


。。。。最後にふと思ったことが。
皆がみな、キャッシュ対策をしだしたら
キャッシュの意味がなくなってしまうな、ということですが。。
まぁそんなこと気にしてたらこちらもやってられないですし、
実際はそんな自体にはならないと思います。おそらく。
なぜならこれを実践する人がどれだけいるか?そんなにいないだろう。。。
と思うからです。

以上です。


●参考にしたサイト

Ajax?文字化け対策とブラウザキャッシュ対策: Script雑感
http://zombiebook.seesaa.net/article/27148814.html
感謝!

ブラウザ のキャッシュを制御する/no-cache
http://tech.bayashi.net/pdmemo/browsercache.html
基本的な対策法がかかれており、勉強になります。

続:ブラウザのキャッシュを無効にしたい!...IEだけ? - こまちドーナツ
http://www.comachi.com/2006/07/ie.html
とくにIEの画像キャッシュは問題が多そうと認識させられましたね。
関連する記事(広告含む)
2 3 4 5 6 7 
 
2018年11月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  
各記事へのコメント
月別記事
お問い合わせ
Powered by さくらのブログ