はてなブックマーク

スマートフォン用ページの制作工程として ・まず「PC上でコーディング」してから ・表示を「実機スマートフォン」で確認する という流れがあります。 制作途中でちょっと表示を確かめたい・調整したいときなど、PCと実機スマホを何度も往復していては時間がかかってしまいます。 作業中はPCブラウザの幅を縮めたり、何かしらのツールを使って、PC上でスマホ画面に近い環境を作って表示をチェックしているのではないでしょうか。 今回はPCブラウザでお手軽にスマホページを表示する方法を紹介します。 主要ブラウザをリストアップしました。 Firefox Google Chrome Safari Internet Explorer Opera それぞれ自分の使いやすいブラウザや開発ツールがあると思いますので 各ブラウザでの方法をまとめます。 【UA（ユーザーエージェント）の変更】 【ブラウザ幅・サイズの変更

今回は、グーグルアナリティクスで自社サイトに設置したソーシャルボタンを計測する方法を、 ご紹介したいと思います。 1.最新のトラッキングコードを取得 2.ソーシャルトラッキング用のJavaScriptを設置 3.Twitter用トラッキングコード 4.Facebook用トラッキングコード 5.GoogleAnalyticsで確認 ※以下はサイトにソーシャルメディアボタンが設置されている事を前提として説明しております。 ソーシャルメディアボタン設置の方法に関しては、下記の記事を参考にしてください。 ≫【WordPress・Movable Type】ソーシャルメディアボタン設置方法のまとめ 1.最新のトラッキングコードを取得 グーグルアナリティクス新バージョンの画面から、最新のトラッキングコードを取得して、 ＜/head＞タグの直前に貼り付けます。 <!-- Google Analyt

マークアップをする人で、使ったことがない人はいないであろう「clearfix」。 「floatした要素が親要素からはみ出してしまうのを回避する」ためのものですが、 人によって、記述の仕方に若干違いがあります。 記述に多少の違いはあっても、ちゃんとfloatは解除されているので 特に問題はないのだと思いますが、どうして様々なバリエーションの「clearfix」が 存在するのか、そもそも「clearfix」とはいつから存在したのか、 使われているプロパティにはどんな意味があるのか、 実際のところよくわからないまま使っていたので、この機会にいろいろ調べてみました。 clearfixが初登場したのは2004年5月8日。 オーストラリア人のTony Aslettという人が考えたものです。 それまでのfloat解除の方法といえば、floatを解除したい位置に、 HTML 4.01で

キャプションつきのギャラリーを作りたいときが多々あります。 ・指定した時間で、自動的に画像やテキストが切り替わる ・サムネイルをクリックしても切り替わる ・切り替わるエフェクトはクロスフェード JQueryを使用して、この全てを満たすJavascriptを作ってみました。 イメージとしては以下のようなものです。 【HTMLはこちら】 <!-- images--> <div class="g-inner clfix"> <div id="view"> <p><img src="images/image1.gif" alt="" width="240" height="150"></p> <p><img src="images/image2.gif" alt="" width="240" height="150"></p> <p><img src="images/image3.gif" a

以下のようなデザインの商品紹介ページを運営していましたが、 頻繁に商品の差し替え・追加・削除があるため、 そのたびに連番画像の並べ替えをするのがとても大変でした。 そこで、jQuery を使用して 左上から順番に、連番画像を自動的に表示させるようにしてみました。 ※商品はダミーです。（クリックで拡大します。） （1） リストでコーディングする <ul id="item"> <li> <div class="icon"><p class="no"></p></div> <div class="image"><a href="#"><img src="images/cushion.jpg" alt="TAMクッション（手編み）" width="168" height="168"></a></div> <div class="spec"><p><a href="#">TAMクッション

サイト共通で使用するヘッダーやフッター。全ファイルに同じソースを記述してもいいですが、 サイト管理を考えると外部ファイルで一元管理しておきたくなります。 通常はPHPやSSIを使いますが、環境によっては使えない場合があり、JavaScriptを選択する場合もあります。 document.writeで簡単に実装できますが、jQueryで使って外部ファイルを読み込むという方法もあります。 ■headタグでjQueryを読みこんで、loadします。 <script type="text/javascript" src="jquery-1.5.2.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#include").load("include.html"); }); // --> </scrip

FacebookアプリからFlashを使って写真を投稿してみます。 作成してみたものはこちらです。 （ログイン、認証が必要です。） http://apps.facebook.com/sampleapp_kano/img_upload/ Flashの実作業に入る前に、facebook上でアプリを作成しておく必要があります。 詳しい説明は割愛させていただきますが、作成後、アプリIDのみが必要となりますので、控えておいて下さい。 Adobeから公式にFacebookのGraphAPIを使用するためのライブラリが配布されていますので、 そちらを使用します。 facebook-actionscript-api ・初期化 基本、kayacさんのこちらの記事を参考にさせていただきました。丁寧な説明があり、わかりやすいです。 そろそろFlashからFacebookできるようになっておこう

jQuery Mobileはまだアルファ版ですが、今後のモバイルサイト開発において出番が増えてくるのではないかと思うので、サンプルを作り、その過程を短くまとめてみました。 ■jQueryMobileとは？ jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。 スマートフォン用のサイトを作成する際の手段として、今後ひとつの手段として使われていくのではないかと思います。 大きな特徴としては、以下が挙げられます。 ・モバイルサイト構築用のフレームワーク。 ・iOSやAndoroid、WindowsPhoneなど、多くのデバイスに対応。 ・画面の遷移やUIの提供 これだけでは分かりにくいので、実際にサンプルを示していきます。 ■使い方＆サンプル (1)公式サイト（http://jquerymobile.com/）のdownloadから必要なファイルを

前回の記事（iframe版 Facebookページのスクロールバーを消す方法）では コードの紹介だけで JavaScript SDK については何も触れなかったので、 JavaScript が得意なスタッフと改めて検証した上で、まとめてみました。 具体的には以下のように指定しています。 head内 ・JavaScript SDK を使うための準備（初期化） ・iframe のサイズを変更するための記述（FB.Canvas.setSize） body内 ・iframeのサイズを指定 【head内】 <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> <script language="JavaScript"> FB.init({ appId: 'XXXXX

Facebook ページで「いいね！」してもらった人と、まだの人。 違うコンテンツを表示したいことがありますよね。 PHP での切り分けをご案内します。 ムツカシイ と思ったらコピペでも OK。 まずはやってみよう。 Facebook ページの作成は↓こちらから。 http://tam-tam.co.jp/tipsnote/javascript/post1097.html http://tam-tam.co.jp/tipsnote/cms/post1485.html ■ファイル構成 / ├ index.php ├ parse_signed_request.php ├ error.html ├ iine_mada.html └ iine_sumi.html ■ index.php <?php include_once('parse_signed_request.