シンプルなウェブページであれば、ヘッダー部分でmetaタグのviewportを指定すれば、簡易的なiPhoneやAndroidなどのスマホに対応したページにすることできます。
そこで、JavaScriptとPHPの二通りの方法でUserAgentを判別し、iPhoneやAndroid(タブレットは除く)であれば、viewportを書き出すソースを書いてみます。
自分で指定したUserAgentの端末のみviewportが書き出されますので、例えばiPadなどにはviewportは書き出されず、シンプルな一種の振り分けとなります。
JavaScript
|
<script type="text/javascript"> var d = window.document; if(navigator.userAgent.indexOf('iPhone') > -1){ d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />'); }else if(navigator.userAgent.indexOf('iPod') > -1){ d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />'); }else if(navigator.userAgent.indexOf('Android') > -1 && navigator.userAgent.indexOf('Mobile') > -1){ d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />'); }else if(navigator.userAgent.indexOf('Windows Phone') > -1){ d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />'); } </script> |
PHPの場合はこちらから
お気に入りのYouTube動画のリストを自分のブログに簡単に貼りつけられるブログパーツを作りました。
iPhoneにも対応しています。
例えば「猫 かわいい」の動画なら、以下のようになります。
上のブログパーツはiframeタグで貼りつけています。
ソースはこんな感じです。
|
<iframe src="https://wtpmj.com/tube/?keyword=%E7%8C%AB%20%E3%81%8B%E3%82%8F%E3%81%84%E3%81%84&width=320&height=180" width="400" height="400" frameborder="0">iframe対応のブラウザでご覧ください。</iframe> |
表示したい動画の検索キーワードは、keyword=の後ろに、UTF-8でURLエンコードした物を入れて下さい。
例:猫 かわいい → %E7%8C%AB%20%E3%81%8B%E3%82%8F%E3%81%84%E3%81%84
ちなみに、検索キーワードがない場合は、おすすめ動画が表示されます。
また、お分かりかと思いますが、動画サイズはwidthとheightのクエリで指定可能ですので、サイトのデザインに合わせることも可能になっています。
このブログパーツでは、各動画のタイトル、インライン再生できる動画、動画の説明、再生時間、再生回数、★で表した人気度などがシンプルに表示されます。
1ページに10個の動画が表示される仕様です。
このブログパーツは予告なく変更、終了する可能性があります。
予めご了承下さい。
PHP版もあります
Google AdSenseで分からない用語が出てきました。
CTR CPC RPM とは何なのでしょうか。
CTRとは
Click Through Rate(クリックスルーレート)の略。
ページ表示数に対して、広告がクリックされる割合のこと。
1%であれば、100回のアクセスにつき1回程度クリックされているという意味になる。
通常は0.2%~2%程度と言われている。
続きでCPCとRPMを解説!
せっかくSVG形式で書き出した綺麗なベクター画像。そのSVG画像にリンクを貼るにはどうすればいいのでしょうか?
|
<a href="http://www.yahoo.co.jp"><object data="./logo.svg" type="image/svg+xml" width="100" height="100"><embed src="./logo.svg" type="image/svg+xml" width="100" height="100"></embed></object></a> |
..って感じで書ければいいのですが、そううまくはいきません。
どうやらSVGファイル内にリンク先を記述する必要があるようです。
続きで詳しく解説しています
Twitterなどでは文字制限があるため、貼りつけたいURLを短縮すると文字数が節約できるいうことで、短縮URL変換サービスを使う人が増えています。
んで、作ってみました。その名も「ググレカス.com」!
なお、iPhoneにも対応しています。
続きはこちらからご確認下さい
最近のコメント