Webでのティザーが話題になっていました「おしい!広島県」。
公開前の段階でfacebook上、twitter上でも相当数の言及がありました。
県からの発表という事で、一見するとマジメそうな雰囲気の中に、タレントの有吉さんがチラホラ見え隠れするエンタメ感があり、何か面白い事が発表されそうな期待度を高めていたように思います。

結果としては、広島県のプロモーションサイトですが、香川のうどん県と競うようなPRになってほしいです。

hiroshimaken.jpg120327.jpg
「IETester」はWebサイトを問題児の旧IE達に対応させるための確認用ソフトです。
IE5.5, IE6, IE7, IE8での表示を同時に確認できるのでとても便利です。1つのソフトで同時に複数のIEの表示が確認できるという点で「multiIE」よりも優れています。

IETester

【IETester】
以下のサイトの「Download IETester vX.XX」をクリックするとダウンロードできます。
http://www.my-debugbar.com/wiki/IETester/HomePage


仕事で携帯サイトなどを制作すると、携帯端末でいろいろな確認を行うのは大変です。
そこで、PCからでも確認できるモバイル開発ツールを紹介します。


【User Agent Switcher】
文字通り、UserAgentを偽装すること事ができるアドオンです。
自分でUserAgentを調べて登録する手間がかかりますが、携帯だけでなく、ブラウザ単位でも指定できるので、いろいろな確認に役立ちます。
FirefoxのアドオンなのでブラウザはFirefoxが必須です。
https://addons.mozilla.org/ja/firefox/addon/59/


【FireMobileSimulator】
携帯端末のHTTPリクエスト、絵文字表示、位置情報送信機能などの動作をシミュレートすることができます。こちらはあらかじめ機種ごとの情報が登録されているので、そこから自分の好きな端末を選択して、表示を確認することができます。
お手軽さもあり多分現在ではこちらアドオンの利用が最も多いように思います。また、ブラウザでそのまま確認できるので、効率の面でも優れています。
ちなみにこちらもFirefoxのアドオンなのでブラウザはFirefoxが必須です。
http://firemobilesimulator.org/


【iモードHTMLシミュレータII】
docomoの提供するモバイルシュミレーターです。こちらも機種の選択と表示の確認や、HTTP通信のやり取りをチェックできます。モバイルサイト開発には必須のツールです。
http://www.nttdocomo.co.jp/service/imode/make/content/browser/html/tool2/index.html


Firefoxがシェアを伸ばしている理由は独自のadd-ons(アドオン)にあります。
add-ons(アドオン)とは拡張機能の事で、自分好みの便利な機能をFirefoxに追加できます。
アドオンはWeb制作者には欠かせない強力な拡張機能が満載です。今回はWebディレクター目線でピックアップしてみました。

All-in-One Gestures >>
Firefoxにマウスジェスチャを実装します。キーボードやクリックをしなくても良いので作業効率が格段にアップします。
ColorZilla >>
マウスカーソルを合わせた場所の色情報をRGB、16進数で表示してくれます。色情報は10進数、16進数など様々な形式でコピー可能で、パレットに記憶させ自分の好みのカラーパレットを作る事も可能です。画面上からそのまま色を拾えるので、とても便利です。
ColorZilla
JSview >>
ワンクリックで簡単に外部CSSと外部JavaScriptのソースを表示します。WebサイトのcssやJavaScriptをのぞきたい場合にはサクサクっと表示できて便利です。
JSview
LinkChecker >>
閲覧中ページのリンク切れ箇所をマークアップしてくれます。リンク先の合否までは分かりませんが、サイトのリンク切れチェックに使えます。納品前の最低限のチェックですね。
LinkChecker
MeasureIt >>
画面上で簡単に要素のサイズ計測ができます。ガイドラインに沿ったグリッドシステムが実装されているか確認したり、カラムがズレる際にサイズの確認をしたりと便利です。
MeasureIt
Tab Mix Plus >>
FireFoxのタブ機能をデフォルトから強化します。閉じたタブを復元したり、タブに対してのアクションを指定できたりと、かなり多機能なのでSleipnir等から移行しても安心です。

[ 日本語版サイト ]
http://mozilla-ext-ja.way-nifty.com/blog/tab_mix_plus/ >>
Tab Mix Plus
ViewSourceWith >>
閲覧中のページのソースファイルを自分で指定したエディタで開けるようにします。使い慣れたエディタで見ればそのまま編集もし易いですし、Firefoxのデフォルトビューワでは使い勝手が悪いと思うヒトはこれを使いましょう。
Web developer >>
Web制作をする方のほとんどが入れているWeb制作を補助する拡張機能です。以下は一部の機能です。詳しくは公式サイトでチェックして下さい。
* クッキー、Java、JavaScript、CSSなどを無効にする
* CSSをその場で編集する
* フォームの各属性値を表示する
* 画像を非表示にする
* ブラウザのウィンドウおよび表示領域の幅と高さを表示する
* HTMLおよびCSSの構文をチェックする
* W3C/WCAG 1.0 あるいは米国リハビリテーション法508条でアクセシビリティをチェックする

[ 日本語版公式サイト ]
http://www.infoaxia.com/tools/webdeveloper/ >>
Web developer
Download Embedded >>
閲覧中のWeb上にある埋め込みオブジェクトを簡単にダウンロードできます。
Download Embedded
Pearl Crescent Page Saver Basic >>
ブラウザ閲覧中画面のキャプチャを撮って、画像ファイルに保存できます(jpeg、png)。ページ全体(表示されていない部分)のキャプチャも取得可能なので、資料の制作時など、とても重宝します。「Pro」と「Basic」がありますが「Basic」で十分使えます。「Pro」は有料なので要注意。
User Agent Switcher >>
ブラウザのuser agentを自由に変更できます。携帯サイトの開発などにとっても便利です。各キャリアのuser agentは携帯電話会社の公式サイトで確認できます。
User Agent Switcher

ここでご紹介したアドオンは、動作確認はしていますが、万一の動作不良などに備え、導入は自己責任でお願いします。

カテゴリ

ウェブページ

Powered by Movable Type 5.12