Macローカル環境でスマホサイトの実機テストを行う方法（３） - フロントエンドとかPCとかスマホとか
前回は、「MacのローカルフォルダをWebサーバーにする」でした。 charlie.hateblo.jp 今回は、「iPhoneやAndroidからアクセスしてみる」です。 iPhoneやAndroidからアクセスしてみる MacのIPアドレスを固定にする まず、MacのIPアドレスを固定にします。 システム環境設定 - ネットワークと進み接続済みの有線LANを選択します。 まだ、Macを有線LANに接続し、さらにwi-fiアクセスポイントにしていない方は、 Macローカル環境でスマホサイトの実機テストを行う方法（１） - フロントエンドとかPCとかスマホとか を参考に設定しよう。 この画面の「IPv4アドレス」と「ルーター」をメモしておき、設定時には最後のオクテットを253以下の十分に大きな数値にします。 ここでは、192.168.0.99を設定値としますが、192.168.0の部分は各
Macローカル環境でスマホサイトの実機テストを行う方法（２） - フロントエンドとかPCとかスマホとか
前回は、Macをwifiアクセスポイントにするところまででした。 charlie.hateblo.jp 今回は、「MacのローカルフォルダをWebサーバーにする」です。 MacのローカルフォルダをWebサーバーにする Macには、ApatchというWebサーバー機能がある。 これを利用する方法だ。 1.Apache設定ファイルの編集 編集するファイルは３つ。 /private/etc/apache2/httpd.conf /private/etc/apache2/extra/httpd-vhosts.conf /private/etc/hosts finderを開き、メニューバーの「移動」から、「フォルダへ移動」を選択。 フォルダの場所として、 /etc を入力し、「移動」 apache2フォルダの中に、httpd.confがある。 念のため、編集前にバックアップをとっておこう。 http
Macローカル環境でスマホサイトの実機テストを行う方法（１） - フロントエンドとかPCとかスマホとか
スマートフォンサイトを作っていると、chromeのスマホプレビュー機能がとっても便利。これがないと仕事ができないと言ってもいい。 参考： wayohoo.com chromeのスマホプレビュー機能を使いどんどん制作をすすめていく。 やったーできた！！ さてさて、テストサーバにアップして実機でみてみましょう。 うんうん、いい感じ。 あれ？？ こんなはずじゃないんだけどな。 なんか全体的にイメージ違うし。。。 なんてことがあるから、実機テストはこまめに行いたい。 でも一々テストサーバにアップして。。ってめんどくさいな〜。 そんな時、Macならローカル環境で作成したサイトを簡単に実機で見ることができるんです。 ここからが、本題。 MacをWi-Fiアクセスポイントにするところまで （１）では、MacをWi-Fiアクセスポイントにするところまでを説明する。 有線LANをMacを使って無線化するイメ
じっくり解説SublimeText：ExportHtml コードカラーリング状態で印刷 - フロントエンドとかPCとかスマホとか
わお！ コードを印刷するとき、コードカラーリングした状態で印刷するとすげー見やすい！ 普段コードを印刷なんてしないぜ！ ま、だいたいそうなんですけどね。 寝転んで眺めたいなとか、 何か書き込みながらデバックしたいなとか、 たまーにたまーに、だけど印刷したいことあるよね。 そしてどうせ印刷するんなら、見やすい方がいいよね。 ということで、 ExportHtmlパッケージのご紹介。 インストール いつものようにパッケージコントロールで簡単インストールです。 パッケージコントロールがまだの方はこちらをみてください。 Sublime Text 2 に Package Control をインストールする - フロントエンドとかPCとかスマホとか Install Packageで、"expo"と入力すると出てくると思います。 ExportHtml パッケージを選択してインストールしてください。 キーバ
TABROIDのうるさい「CMer」をブロックしてみた - フロントエンドとかPCとかスマホとか
TABROIDっていう、スマートフォン系の情報サイトをよく閲覧します。 ただ、最近そこに、大嫌いな「CMer」っていう許可なく大音量を流す広告が貼られるようになってしまって、毎回びっくり！ これ、音量オフにしても、ページが更新されるとまた大音量で流れるんだよね。 パソコン自体をミュートにはしたくない！ Flashをオフにはしたくない！ 対策してみた。 普段使っているブラウザは、Google Chrome。 これにひとつアドインを入れます。 Chrome Web Store - tinyFilter これは、urlの一部や、ページ内のフレーズとかを設定しておくと、そのサイトを表示しないってことができるプラグイン。 CMerは、iframeで「socdm.com」 ドメイン内のコンテンツを表示しているので、この、「socdm.com」を拒否しちゃいます。 tinyFilterの設定 アイコンを
使っていないCSS記述を削除できる Dust-Me Selectors - フロントエンドとかPCとかスマホとか
使っていないCSS記述をピックアップし削除もできる Dust-Me Selectors サイトの一部のページのみ切り出して使う 拡張を重ねたサイト プチリニューアルした後 そんなとき、CSSファイルには、要らない記述がいっぱい。 そんな不使用のCSS記述を見つけてくれる、ありがたいツールがこれ、「Dust-Me Selectors」 Dust-Me Selectorsは、FireFoxプラグインです インストール方法 FireFoxのプラグインですので、FireFoxで、「ツール」-「アドオン」で、アドオンマネージャを開きます 「Dust-Me Selectors」を検索し、インストールします。 使用方法 使うのは簡単！ FireFoxで目的のページを開き、右上のホウキのボタンを押すだけ 読み込まれているCSSごとに、使用されていない記述が行番号とともに表示されます これをCSVに書き出し
おれのさぶらいむてきすと：＜新機能あり＞Emmetのver1.1(bata)登場！ - フロントエンドとかPCとかスマホとか
この記事は、おれのさぶらいむてきすと Advent Calendar 2013の24日目です。昨日はquattro_4さんの おれのさぶらいむてきすとのしょーとかっと動画 - quattro_4's diaryでした。 みんな大好き Emmetのver1.1(bata)が登場しました。 インストール方法 http://emmet.io/blog/beta-v1-1/ から、 https://github.com/sergeche/emmet-sublime/archive/v1.1.zip をダウンロードします。 展開してできた emmet-sublime-1.1 フォルダの名前を Emmetに変更し、 Sublime TextのPackagesフォルダに配置します。 この時、元のEmmetフォルダは、念のため他の場所に退避しておくとよいでしょう。 主な新機能 Can I useデータベー
じっくり解説！おれのさぶらいむてきすとInputSequenceプラグイン - フロントエンドとかPCとかスマホとか
この記事は、おれのさぶらいむてきすと Advent Calendar 2013の19日目です。昨日は@jugyoさん、だったのですが、すごいことになっています。。 さて、 Sublime Textは、マルチカーソルが便利ですよね。 そんなマルチカーソルで便利な、InputSequenceプラグインを紹介します。 このプラグインは、マルチカーソルのそれぞれの位置に連番を入力するものです。 パッケージのインストール インストールは、いつものように、Package Control - Install Package で、 InputSequenceを選択するだけ。 使い方 まずは、cmd+クリックなどの方法で、連番を記入したいところにカーソルを置きます。 次に、[shift]+[control]+[0]を押します。 シーケンスタイプ入力欄を編集して、連番のタイプを指定し[enter] $0は、１
ナビ部分を共通htmlにした上で、各ページごとにactiveな項目を明示する方法 - フロントエンドとかPCとかスマホとか
グローバルナビにDreamweaverのライブラリを使用したいが、class="active" を付けなきゃいけないからなー メニューが一つ増えたり、ナビの内容が変わるたびに、全ページにナビ部分のソースをコピーして、該当するページのところに、class="active"を付けていく？？ それめんどくさい！ JSで解決している人も多いようですが、こんなふうにCSSで解決している人も多いはず。 全ページの body 要素に 個別のIDかClassを付けます。 わかりやすいように、ファイル名やディレクトリ名とか、ページ名を想像できるものがいいです。 htmlはこんな感じです。 : <body class="product"> : <nav> <a class="nav1" href="index.html">HOME</a> <a class="nav2" href="product.html"
Photoshop：Generatorより便利かもしれない Breeezyでレイヤーを書き出し - フロントエンドとかPCとかスマホとか
Photoshop CC 14.1 の新機能「Generator」いいなうらやましいな。 「Generator（生成）」について – Photoshopの使い方 | Adobe Photoshop Magazine - 書き出したいレイヤーの名前の最後に、「.png」をタグ付けします。タグは、レイヤーグループにも付けることができます。 必要に応じてGIF、PNG、JPGを使い分けてください。Generator はそれらのタグに応じて画像を生成します。 - レイヤーでもレイヤーグループでも、書き出せるんだ。いいなー。 CS5やCS6の人は、 「ファイル」-「スクリプト」-「レイヤーをファイルへ書き出し...」 って感じですね。 自動でレイヤーやレイヤーグループを書き出してくれるのもいいけど、指定したレイヤーやレイヤーグループを指定した時に書き出せたら便利だよね。 それを実現できるのが、Bre
これで解決！「iPadを復元できませんでした。不明なエラーが発生しました(17)」 - フロントエンドとかPCとかスマホとか
iPadを復元しようとして、こんなエラーがでた。 なぜ復元しようとしたかは、下記を参照。 海外版iPad mini Retina(A1490) で、MVNO SIMでLTE使えたよ！ - フロントエンドとかPCとかスマホとか Appleのサポートサイトにも(17)のエラーは、掲載されていない。 iTunes：アップデートおよび復元時の特定のエラーメッセージと高度なトラブルシューティング 困り果てて、Appleのサポートに連絡。 この機種は国内での修理はできないので、最悪の場合は、購入したアメリカのApple Storeに持って行ってもらうことになるとのこと。。 えええーーー！！！ ※ 2013.12.18 追記 Appleのサポートに再度確認したところ、 Apple直営店や認定店等の実店舗では対応できないことがあるが、サポートに連絡し郵送等の手段で修理に出せば国内でも修理対応はできる。 と
海外版iPad mini Retina(A1490) で、MVNO SIMでLTE使えたよ！ - フロントエンドとかPCとかスマホとか
ハワイに行く友人に、iPad mini Retina セルラーモデルを買ってきてもらいました。 なんたって、キャリアに24ヶ月縛られたくないし、安いMVNO SIM使えたほうがいいもんね。 もちろん、wifiモデルも考えたけど、iPad miniってカーナビ代わりに使いたいサイズ！ GPSが使えないwifiモデルはちょっとね。。 MVNO SIM 今回使用したSIMは、so-netのもの。 So-net モバイル LTE | 高速モバイル | インターネット接続 | So-net 別でwifiルータも使っているので、1契約で複数枚のSIMが使えるのがうれしい。 普通にできると思っていた SIMを挿して、APNの設定をすればすぐに使えるものだと思ってた。 実際にそれで使えてる風のブログなんかも見かけたしね。 でも、3Gは使えてもLTEは掴んでくれない。 ああーー、もう諦めようかなって思った時
Sublime Text：保存するとブラウザを自動で更新、Sass使用でもOK！ - フロントエンドとかPCとかスマホとか
Sublime Text便利ですよね。 マークアップ作業中に、 ＊Sublime Textで書き換え＋保存 ＊ブラウザをアクティブにして、更新 って、何度やっているでしょう。。 ということで、、 Sublime Textの上書き保存とChromeの更新をワンタッチで行う方法 Browser Reflesh をインストールする Sublime Textに「Browser Reflesh」というパッケージをインストールします。 パッケージのインストール方法は、下記の記事中に解説がありますのでご覧ください。 じっくり解説！Sublime Text 2 プラグイン 「ColorPicker」 - フロントエンドとかPCとかスマホとか キーバインディングを設定する 次に上書き保存と同時にブラウザを更新するためのキーバインディングを設定します。 Sublime Textで、Preferences >
Sublime Text：ドット「.」で始まるファイルをサイドバーのプロジェクトに表示する方法 - フロントエンドとかPCとかスマホとか
Sublime Text 便利ですよね。 Webの仕事をしていると、.htaccessとかドットで始まるファイルを編集する事がよくあります。 そんなとき、Sublime Textのサイドバー（Project）に、これらのファイルが表示されると便利ですよね。 macの場合、裏技じゃないと思うけど、こんな方法があります。 参考： Macの隠しファイルや隠しフォルダを表示する裏技 / Inforati これで、Sublime Textのサイドバー(Project)にも表示されますが、デスクトップに .DS_storeとか表示されてうるさいですよね。 Sublime Textには、ちゃんとこれを表示するオプションがありました。 OSの設定をかえることなく、サイドバー(Project)に、ドットではじまる隠しファイルを表示できます。 さて、設定方法です。 プロジェクトが保存されている事が前提ですので
Sublime Text：サイドバーのProjectの名前を変更する方法 - フロントエンドとかPCとかスマホとか
Sublime Text 便利ですよね。 フォルダをドラッグして、プロジェクトとして管理できたり。。。 でも、いくつものプロジェクトを同時に開いているとき、 フォルダの名前がプロジェクト名になるのって困りませんか？ 同じような名前のフォルダを使いますよね。 ということで、プロジェクトにちゃんと名前をつける方法です。 まず、現在の状態を保存します。 開いているファイルも一緒に保存されるので、閉じておくとか開いておくとかは判断してください。 Project > Save Project as.. 保存場所はどこでもいいです。あとから切り替えるときは、 Project > Switch Project in Windows で簡単に切り替えられますので。。 保存した、＜名前＞.sublime-project ファイルを編集します。 { "folders": [ { "path": "projec
Windows8.1のテスト環境をMac上に構築 - フロントエンドとかPCとかスマホとか
IE11のテストをしなくては、 ってことで、Windows8.1のテスト環境を構築した。 基本的には、act2さんのブログのお世話になりつつ構築したが、その通りではない部分もあり、メモとしてシェアしておきます。 お世話になった、act2さん ブログ。 [http://act2blog.blogspot.jp/2013/06/vmware-fusion-5-windows-81.html:title=act2 ブログ: 速報&Tips：Windows 8.1 プレビュー版を FUSION 5 で実行 ] 元々、VMware Fusionで、Windows7環境を作っていたので、そこに新しい仮想マシンを追加していく感じだ。 仮想マシンライブラリで、右上の追加ボタンを押すところからスタート。 あとは、参考ブログの通りに進めていくわけだが、ここで、先に進めないエラーに遭遇する。 そんな時は、こちら
Sublime Text 3 に Package Control をInstallするのが簡単になったよ - フロントエンドとかPCとかスマホとか
前の記事で、Sublime Text3はまだまだな感じと書いたけど、いろんなパッケージが対応してきたので改めて記事にします。 まずは、 Package Controlの導入。 https://sublime.wbond.net/installation に書いてある Sublime Text3用の文字列をコピーします。 Sublime Text3を起動し、View > Show Console で、Consoleを表示します。 Consoleに貼り付けて、Enter。 あとは、Sublime Text2のときとおんなじ。 各種パッケージのインストールは、 Preferrence > Package Control のあと、 Install Package を選択し、お好みのパッケージをインストールするだけです。 次回は、Sublime Text3 で使えるパッケージを紹介していこうと思いま
フロントエンドとかPCとかスマホとか
もうスノーシーズンはほぼ終わりだけど、スノーシューの改造をした話 ２５年前？に購入した MSR DENALI Clasics。最近はスプリットボードばかりなのでほとんど活躍しない。 これヒールリフターが付いてなかったってのもある そこでヒールリフターつけちゃお！ 買ったのは、この２つ G3 クライミングヒール8mmベース https://www.niceedge.biz/products/detail.php?product_id=700 G3 タルガクライミングワイアー ロング https://www.niceedge.biz/products/detail.php?product_id=165 あと固定用のビス これステンレスのが欲しかったけど近所のホームセンターにはちょうどいいサイズがなかったのでこれで 穴あけちゃう 5mmの穴２ヶ所 ビスのサイズに合わせて5mm ビスで止める 取り
Goto-CSS-Declaration
Sublime Text 2 での作業楽しいですね。 そんな作業をもっともっと楽しくするプラグインの紹介。 今回は、本当に便利なプラグイン「Goto-CSS-Declaration」です。 htmlを編集中に、ショートカットキー一発でcssの該当idやclass、要素にジャンプできるという、ほんとに便利なプラグインです。 例えば、htmlのid="head"のところにカーソルを合わせ、ショートカット一発で、cssの#headに飛んでいくことができます。 条件は、該当するcssファイルを開いておくことです。 classや要素の場合はcss中に何度も記述されますがそれでも大丈夫！ショートカットを押すだけで、次々とジャンプしてくれます。（行きすぎたら戻るショートカットもあります） そして、なんと、scssにも対応です。Sass使ってる人にもとっても便利です。 では、インストールから始めましょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これで解決！Chrome のアドレスバーで検索ができない - フロントエンドとかPCとかスマホとか
