Programming主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。ブログを移転しました。Tecuration.comこのサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。この広告は、90日以上更新していないブログに表示しています。2013-04-11これは簡単!weinreを使い10の手順でスマホをデバッグする方法ツールはてなブログをスマホから見るとデフォルトではスマホ用表示がされる。これはスマホからのアクセスと判断した際に、専用のCSSを適用しているためである。(http://hatenablog.com/css/touch/blog-touch.css)このスマホ用CSSで気に入らない部分があったので編集を試みた。編集出来るが、スマホサイトのデバッグは初めてであったため色々調べてみた。いくつか良さそうなツールがあったのだが、Mac向けのものがほとんどでありWindowsユーザの僕は使うことが出来ない。そんな中よさそうなツールを発見!その名は「weinre」。使ってみた感想を最初に書いておくと、スマホの実機に対してリモートで快適にデバッグできた。いうわけで、Web開発において冷遇されがちな(被害妄想?)Windowsユーザ向けにweinreの使い方を書いておく。※スマホの実機に対してリモートアクセスするためには同一WifiにPC、スマホが接続されている必要がある。※Macでもあまり変わらない手順で出来ると思う。weinreのダウンロード以下のサイトからZIPファイルをダウンロードする。1.5.0は動作確認済み。僕はCドライブ直下に解凍した。weinreの起動コマンドプロンプトを立ち上げ、weinreを解凍したフォルダへ移動。(ここで取得したIPアドレスは以後、xx.xx.xx.xxとあらわす)コマンドプロンプトへ先ほどのIPアドレスを含めた以下コマンドを貼り付け、weinreを起動。(応答がないように感じるかもしれないが、それで起動OK。weinreにアクセス以下のURLへアクセス。weinreの画面が表示されればここまでは成功。http://xx.xx.xx.xx:8080こんな画面が出てくる。(IPアドレスをさらしたくないので、全体は写さない。interface]へアクセス。これがデバッグのためのステータス画面。http://xx.xx.xx.xx:8080/client/#anonymousこんな画面が出てくる。今はTargetsがnoneとなっているが、ここが後ほど変化する。weinreにアクセス以下のURLへアクセス。PC側同様、weinreのTop画面が表示されれば成功。表示されなければWiFi設定など調べてみてほしい。以下の赤枠内のJSコードをコピーして、ブックマークレットを作成する。ブックマークレット実行デバッグしたいサイトを開き、ブックマークレットを実行。これでスマホ側の設定は終了。先ほどnoneとなっていたステータスが、スマホサイトのURLに更新されていることを確認。デバッグ!あとはデバッグあるのみ。Chromeのコンソールと似ているのでまぁ大体操作方法はわかると思う。選択した部分がハイライトされてたりして、少し感動する。いうわけで、weinreについて書いた。簡単にiPhoneでもAndroidでもデバッグすることが出来て、今後の作業が捗りそうだ。余談であるが、冒頭で述べたとおり、はてなブログのスマホ用CSSをデバッグする目的でweinreを導入したがどうやらCSSは編集できないようだ。[デザインCSS]で"!important"を付けてみてもNGだった。一応はてなブログの開発者の方へ質問をしてみたので、回答をいただけたらその時に改めて「はてなブログのスマホ用CSS」についての記事を書こうと思っている。今日こんなニュースが報道されていた。僕はWordPressを運用した経験がある。»プロフィールid:akiok_jp主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。月別アーカイブPRはてなブログをはじめよう!akiok_jpさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。