Macローカル環境でスマホサイトの実機テストを行う方法（２）

mac フロントエンドエンジニア 仕事効率化 iPhone Chrome スマートフォン

前回は、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を開き、メニューバーの「移動」から、「フォルダへ移動」を選択。
f:id:fushimik:20160223161449p:plain
フォルダの場所として、

/etc

を入力し、「移動」

apache2フォルダの中に、httpd.confがある。
念のため、編集前にバックアップをとっておこう。

httpd.confを右クリックして「このアプリケーションで開く」-「その他..」
テキストエディット.app を選択することで編集できる。
普段使っているテキストエディタがあるならそれを選択してもよいだろう。

テキスト「httpd-vhosts.conf」を検索

#Include /private/etc/apache2/extra/httpd-vhosts.conf

の頭の#を削除して保存。

同様に、httpd-vhosts.confも編集する。
/private/etc/apache2/extra/httpd-vhosts.conf

一番下に下記の行を追加しよう。


    DocumentRoot "/Users/user_oreore/www.oreore.com"
    ServerName local.oreore.com

DocumentRootには、Webサーバにしたいローカルフォルダをフルパスで指定しよう。ここでは、/Users/user_oreore/www.oreore.comとした。
ServerNameには、ローカルディレクトリにつけるサーバー名を指定する。ここでは、local.oreore.comとした。
複数のフォルダを別々のサーバー名で使うためには、これを繰り返して記述しよう。

最後に、hostsを編集する
/private/etc/hosts
一番下に下記を追加しよう。

127.0.0.1 local.oreore.com

127.0.0.1 は、変更の必要はない。
local.oreore.comは、httpd-vhosts.confで定義したサーバー名だ。
複数のフォルダを別々のサーバー名で使うためには、これを繰り返して記述しよう。このとき、すべての行で、127.0.0.1は同じだ。

ここまでできたら、Apatchを起動しよう。
ターミナルを起動して、以下のコマンドだ。

$ sudo apachectl start

（$は入力しない）
Passwordには、普段Macを起動するときのパスワードを入力しよう。

もし、
/System/Library/LaunchDaemons/org.apache.httpd.plist: Operation already in progress
というメッセージが出たら、Apatchはすでに起動ずみなので、先ほど編集した設定ファイルを有効にするため、以下のコマンドを入力する。

$ sudo apachectl restart

これで、準備は完了。
Macでブラウザを起動して、設定したサーバー名をURL欄に入力してみよう。
http://local.oreore.com

次回は、いよいよ実機からの接続です。
charlie.hateblo.jp

予算2万円のオフグリッドな太陽光発電に挑戦！

DIY 太陽光発電

再生可能な電力を自力で少しでも。。そういう考え方もあったが、非常時の電源確保とか、車中での電源として利用しているサブバッテリーの充電がしたくて太陽光発電には興味はあった。

特に震災の直後は、早くやらねばと焦っていたが、同じような考え方の人も多かったのだろう。ソーラーパネルや関連機器の価格がとても高く、ひとまず保留していた。

最近、ソーラーパネルがとても下がっていると知り、改めて検討してみると、手持ちの機材を上手く活用すれば、2万円もかからずそこそこの発電量を持つシステムを組めることがわかった。

ほとんどのものがネットで入手可能なので、早速注文、構想から１週間ほどで完成した。

接続図

f:id:fushimik:20160221175846p:plain
チャージコントローラに全てを接続すれば、あとはうまくやってくれる。
ただ、各機材の容量は気をつけたほうがいい。

必要機材

必要な機材は、

  1. ソーラーパネル
  2. チャージコントローラ
  3. バッテリー
  4. DC-ACインバータ
  5. ケーブル
  6. 防水用ボックス

という感じだ。

ソーラーパネル

ある程度実用的な発電量が欲しかったが、設置スペースの問題とのバランスを考え、今回は100Wのパネルとした。
18,000円以下で買える。

ヤフオクでうまく買えば、送料込みで1万円ちょっとで購入できるだろう。

チャージコントローラ

バッテリーの過充電防止、負荷の放電時の過放電を防止するために必要なものだ。
人間がバッテリーの充電状態を監視し、接続を切ったり入れたりするのでは実用的な運用ではない。
今回、パネルが100Wなので、余裕をもって20Aのものを購入した。

バッテリー

今回は以前から車中泊用で使用していたものを流用した。
年末年始を含め寒時時期の車中泊には必須なので、来年の冬になる前に購入する必要がある。
長期間安定的に使用するなら、ディープサイクルバッテリーがよい。
105A程度の大きさがコストパフォーマンスがよい。そして、100Wのソーラーパネルにもバランスがよいサイズだ。
バッテリーはamazon等の通販サイトでの購入がほぼ最安値だ。

DC-ACインバータ

これも今回は以前から車中泊用に使用していたものを流用した。
今回、スマートフォンやタブレット、その他のモバイル機器の充電と、ノートパソコンの仕様なので、150W程度で十分だが、ファンレスのものが音がしなくてよい。

ケーブル

十分な太さ（容量）があるケーブルなら十分だと思うが、ソーラーパネルからチャージコントローラまでのケーブルは、太陽光発電用のものを準備した。

その他、チャージコントローラとバッテリー、チャージコントローラとインバータを接続するためのケーブルは、ホームセンターでVCF-FKの2mmのケーブルを余裕を見て10mほど購入した。

防水用ボックス

今回、バッテリーとチャージコントーラは屋外に置き、インバータは室内に置くことにした（理由は後述）。そのため、バッテリーとチャージコントローラが入るプラスティックケースをホームセンターで探した。後からバッテリーを２つ入れることも考え少し大きめのものを用意した。

ホームセンターで1,500円くらいで購入した。

固定用金具

ソーラーパネルをベランダの手すりと、壁面に固定するための金具もホームセンターで購入。ここは設置する場所ごとに工夫してガッチリと固定したい。台風が来ても絶対に飛ばないように固定するために必要なものを購入した。
イレクターパイプ

設置

f:id:fushimik:20160221174047p:plain
今回ソーラーパネルを設置するのはベランダ。手すりにパネルの下部をイレクターパイプを使って固定し、上部は物干しアームの土台に固定した。

モバイル機器の充電は12Vから

インバータによるロスは、インバータ自体の稼働電力と、変換ロスが考えられる。
そのため、スマートフォンやタブレットの充電には12Vからそのまま充電できるシガレットタイプの充電アダプターを利用することにした。
インバータを使うのはノートPCを使う場合だけだ。
今回はインバータを室内に置き、インバータは仕様するときだけ電源を入れる運用を考えた。

運用

f:id:fushimik:20160221165121j:plain
日が陰ってからも、チャージコントローラのChargingランプは点灯している。直射日光がなくてもわずかに発電しているということか？
実際にはまだ設置したばかりで、どのように運用できるかはわからない。
ある程度運用したらまた、レポートしたい。

Macローカル環境でスマホサイトの実機テストを行う方法（１）

Chrome iPhone mac スマートフォン フロントエンドエンジニア 仕事効率化

スマートフォンサイトを作っていると、chromeのスマホプレビュー機能がとっても便利。これがないと仕事ができないと言ってもいい。
参考：
wayohoo.com


chromeのスマホプレビュー機能を使いどんどん制作をすすめていく。
やったーできた！！
さてさて、テストサーバにアップして実機でみてみましょう。
うんうん、いい感じ。
あれ？？　こんなはずじゃないんだけどな。
なんか全体的にイメージ違うし。。。

なんてことがあるから、実機テストはこまめに行いたい。
でも一々テストサーバにアップして。。ってめんどくさいな〜。

そんな時、Macならローカル環境で作成したサイトを簡単に実機で見ることができるんです。

ここからが、本題。

MacをWi-Fiアクセスポイントにするところまで

（１）では、MacをWi-Fiアクセスポイントにするところまでを説明する。

有線LANをMacを使って無線化するイメージだ。
f:id:fushimik:20160217143830p:plain

Macを有線LANに接続

これは簡単。MacのLANポートにLANケーブルを接続します。
LANポートがない機種の場合は、Apple Thunderbolt - ギガビットEthernetアダプタ MD463ZM/Aを購入しよう。

Macの有線LANを共有する

システム環境設定 ー 共有を開く
f:id:fushimik:20160217143145p:plain

  • 共有する接続経路：有線LANのポート名
  • 相手のコンピュータが使用するポート：Wi-Fi

続いて「Wi-Fiオプション」を開く
f:id:fushimik:20160217143153p:plain

  • ネットワーク名：Macの名前
  • チャンネル：空いてそうなチャンネルを選ぶ
  • セキュリティ：WPA2パーソナル
  • パスワード：８文字以上の任意の文字列（あとで使うので忘れないように）

ここまで設定できたら、最後に右側の「インターネット共有」にチェックを入れる
f:id:fushimik:20160217143201p:plain
開始を押す。
これで、Macをアクセスポイントにすることができた。

スマートフォンから接続してみよう

iPhoneの場合、設定 ー Wi-Fi を開き、先ほど設定したネットワーク名に接続する。パスワードも先ほど設定したものだ。
Androidの場合も同様、Wi-Fi設定を開き、同様にネットワークを選択し、パスワードを入力する。

どうだろう、インターネットに接続できたでしょうか？
当然、Macが接続している有線LANがインターネット接続できていることが前提だ。

次回は、MacのローカルフォルダをWebサーバーにするです。
charlie.hateblo.jp

SublimeTextで垂直に揃えるインデント：ElasticTabstopsパッケージ

Sublime text 2 Sublime text 3 フロントエンドエンジニア

SublimeTextで垂直に揃えるインデント：ElasticTabstopsパッケージ

最近こんな記事を読みました。

【翻訳】私がコーディングで垂直方向にそろえるインデントをとる理由

【翻訳】私がコーディングで垂直方向にそろえるインデントをとる理由 | POSTD


もっともだと思うし、いままで、手作業で垂直方向に揃えるインデントしていました。

特に行末にコメント入れてる時とか、めんどくさいんだよね。

ん！これ、SublimeTextのパッケージであるのでは？？
と思ったらあっけなく見つかりました。


SublimeText/ElasticTabstops · GitHub


パッケージコントロールでインストール可能です。
パッケージ名は、そのまま、ElasticTabstops ！

インストールするだけ！
これでますますSublime Text快適です。

修理：アストロのリアゲートが開かなくなった

DIY

アストロから荷物を下ろして、リアゲートを閉めた。
下ろし忘れた物があったから、もう一度リアゲートを開けようと鍵穴のついたボタンを押すと。。。

げげっ！開かない！
右側のロックははずれているようだが、左側がロックされたまま。
右側だけがかすかに動く。

燃費も悪いし、車検やらいろいろで何かと金がかかる車。
お金かけずに、自分で直してみよう。
グーグル先生に聞いてみたけど、写真付きの修理方法が見つからなかったので、メモ。

結論：楽勝！30分で治せます。

必要工具：プラスドライバー、ボックスレンチ

車の中から、内張りを浮かせます。

f:id:fushimik:20140907160438j:plain
両サイドのプラスネジを外します。
次にセンターの取っ手を外します。
＊プラスチックのカバーは細いマイナスドライバー等で丁寧にやれば傷をつけずに外せます。
内張りはセンター部分を思い切って引っ張るとガバッと浮き上がります。

手動でロックを外します。

f:id:fushimik:20140907160943j:plain
内張りが浮いた（センター部分はほぼはずれた）状態で、外から誰かにボタンを押してもらい、ロックを外す動作をします。
このとき、左右に伸びた細い金属の針金状の棒が中央に引っ張られる動きをします。
今回はこのうち外から見て左側の棒が引っ張られていませんので、手で中央方向に引きます。
これで外からゲートを開ける事ができます。

外れてしまっている棒の先端を、元の位置にもどします。

f:id:fushimik:20140907161330j:plain
これは簡単、ゲートを開けた状態で下から覗くと、ハズレているのがよくわかりますので、元の位置にカチッとはめます。Eリングとかはなく、カチッとはめるだけです。

内張りを戻して、完了！

今回は、とても簡単に治りましたが、別の原因で開かなくなる場合もあるようです。

じっくり解説SublimeText：ExportHtml コードカラーリング状態で印刷

Sublime text 2 フロントエンドエンジニア Sublime text 3

わお！

コードを印刷するとき、コードカラーリングした状態で印刷するとすげー見やすい！

f:id:fushimik:20140514163216g:plain

普段コードを印刷なんてしないぜ！
ま、だいたいそうなんですけどね。

寝転んで眺めたいなとか、
何か書き込みながらデバックしたいなとか、

たまーにたまーに、だけど印刷したいことあるよね。
そしてどうせ印刷するんなら、見やすい方がいいよね。

ということで、

ExportHtmlパッケージのご紹介。

インストール

いつものようにパッケージコントロールで簡単インストールです。
パッケージコントロールがまだの方はこちらをみてください。
Sublime Text 2 に Package Control をインストールする - フロントエンドとかPCとかスマホとか

Install Packageで、"expo"と入力すると出てくると思います。
ExportHtml パッケージを選択してインストールしてください。
f:id:fushimik:20140514164341g:plain

キーバインド

印刷するときのキーバインドの設定をします。
設定方法は、こちらの記事をご覧ください。
じっくり解説！Sublime Text 2 プラグイン 「ColorPicker」 - フロントエンドとかPCとかスマホとか

Key Bindings - User に以下の行を追加します。
他にも設定されている方は、区切りのカンマ（,）忘れずに(^^)

{
    "keys": ["ctrl+alt+n"],
    "command": "export_html",
    "args": {
        "numbers": true,
        "wrap": 900,
        "browser_print": true,
        "multi_select": true,
        "color_scheme": "Packages/ExportHtml/ColorSchemes/Print-Color.tmTheme",
        "style_gutter": false
    }
}
参考

ここの、
"wrap"の数値を小さくするとページ幅が小さくなり、１行あたりの文字数が少なくなります。
＝文字が大きくなる
逆に大きくすると、１行あたりの文字数が多くなり、文字は小さくなります。

使ってみよう！

コードを開いて、
[ctrl]+[alt]+[n]
うわー、ブラウザが開いて印刷画面になった！
f:id:fushimik:20140514163227g:plain


さらに詳しく知りたい方は、こちら。
facelessuser/ExportHtml · GitHub


さらに快適な、sublimeライフを。

じっくり解説。SublimeText3にEmmetをインストールする

Sublime text 2 フロントエンドエンジニア Sublime text 3 Emmet

f:id:fushimik:20140414145217p:plain
sublime text3 emmet というキーワードで検索されている事が多いようなので、じっくり解説です。
画面はmacのものですが、windowsでも同じような操作でインストールできます。

SublimeTextは、パッケージで機能追加

SublimeTextは、2も３も、パッケージと呼ばれるプラグインで必要な機能を追加していくことができます。
Emmetもパッケージとして配布されています。

パッケージは、パッケージコントロールで。

パッケージコントロールを導入すると、パッケージのインストールが簡単です。
パッケージコントロールの導入方法は、
Sublime Text 3 に Package Control をInstallするのが簡単になったよ - フロントエンドとかPCとかスマホとか
を参照してください。

Emmetのインストール

f:id:fushimik:20140414145240p:plain
Mac：[Sublime Text] - [Prefernces] - [Package Countrol] の順に選択します。
Windows：[Prefernces] - [Package Countrol] の順に選択します。

f:id:fushimik:20140414145511p:plain
[Install Packages]を選択します。

f:id:fushimik:20140414145551p:plain
[emmet]と入力すると、選択肢に emmet が出てきますのでそれを選択します。

f:id:fushimik:20140414145829p:plain
このように出てきたら、インストールは完了です。

html5のデフォルトlangをjaに

ここで、html5文書を作るときのデフォルトのlang設定をjaに変更しておきます。

f:id:fushimik:20140414145926p:plain
[Preferenes] - [Package Settings] - [Emmet] - [Settings-User]を開きます。

開いたファイルに、下記を貼付けてください。

{
	"snippets": {
		"variables": {
			"lang": "ja"
		}
	}
}

これで、SublimeTextに、Emmetをインストールし使えるようになりました。
新しくファイルを作り、拡張子 html で保存するか、右下のファイルタイプで HTMLを選択し、

html:5>head>ul>(li>a)*3

として、[Ctrl]+[E]キー（または[tab]）を押してください。
下記のように展開されているはずです。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<head>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</head>
</body>
</html>

Emmetには、html,cssコーディングに役立つたくさんの機能があります。
これで、コーディングも捗りますね。