タグ

ブックマーク / blog.webcreativepark.net (4)

  • Proxyデバッグソフト「Charles」がすごい

    Proxyデバッグソフト「Charles」がすごい 最近、色々な業務でMacのProxyデバッグソフト「Charles」が大活躍しています。 主に次のようなケースで利用しています。 番環境にあるJavaScriptCSSを修正して欲しい 番環境がASPだったりしてローカルで環境を生成できない際にチャールズを利用してJavaScriptファイルやCSSファイルだけローカルのファイルを参照することができます。 メニューのToolsからMap Localを選択、Map Fromにサーバー上のURLを、Map Toにローカルパスを記述します。そうするとPCからURLにアクセスする際にローカル上のファイルに差し替えられます。 URLは存在しないものでも大丈夫なので、Ajaxなどを実装するには架空のURLをローカルのファイルに向けておけば大丈夫です。 番環境にあるJavaScriptCSS

  • iOSシミュレータでWebインスペクタが利用できる「iWebInspector」

    iOSシミュレータでWebインスペクタが利用できる「iWebInspector」 「iWebInspector」はiOSシミュレータのiPhoneiPadでWebインスペクタを利用できるようになる画期的なアプリです。Macでスマホサイトを作っている人には必須なツールですね。 iWebInspectorを立ち上げるとこんな画面が表示されます。見た目はアレですがすごく使えるやつです。 まずは左上の「Open iOS Simulator」をクリックしてiOSシミュレータを立ち上げます。次は立ち上げたiOSシミュレータにサイトを表示します。 次にiWebInspectorにもどって「Load from Safari」をクリック。するとiOSシミュレータに表示したサイトのタイトルが表示されます。 最後にタイトルをクリックするとWebインスペクタが立ち上がります。 これでiOSシミュレータでデバッグ

    iOSシミュレータでWebインスペクタが利用できる「iWebInspector」
  • Google Chromeでスマホサイト制作

    Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記:最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ

    Google Chromeでスマホサイト制作
  • Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips

    Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips ネタ元:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips : アシアルブログ ちょっと気になるコードがあるのでツッコミを。 1.現在見ているページのナビゲーションをアクティブにする if (document.URL.indexOf("001.html") != -1) { $("nav a.top").toggleClass("on"); } else if (document.URL.indexOf("002.html") != -1){ $("nav a.list").toggleClass("on"); } class属性の付加にtoggleClass()を利用しているけどaddClass()のほうがシンプルでよいです。 if (document.URL.index

    Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips
  • 1