jquery.colorbox.jsを本当にレスポンシブ対応させる

レスポンシブと言っても色々ある。

PCでもスマートフォンでも同じように、コンテンツをモーダルウィンドウに表示する場合

高さ、幅の最大値を指定してあげることで、スマートフォンでもモーダルウィンドウがはみ出すことなく表示できる
jQueryプラグイン「Colorbox」をレスポンシブに対応させる方法! | Web Design Magazine

PCはモーダル、スマートフォンでは新しいウィンドウで開くようにする場合

ユーザーエージェントをみて色々な方法があります。
スマホで閲覧した時だけJavaScriptを一部無効化したり有効化したりする - Qiita
スマートフォンで閲覧する時にjQuery Colorboxを無効化する (WordPress) | Zafiel

レスポンシブと言ったらCSSメディアクエリの場合

そんな時は、画面幅をみて挙動を変えるわけです。
そんな時例えば、こちらが参考になりました。
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い | BlackFlag

例えば、html、jQueryはこんな感じに

<a href="contents1.html" class="colorbox01">1番目のコンテンツ</a>
<a href="contents2.html" class="colorbox01">2番目のコンテンツ</a>
<a href="contents3.html" class="colorbox01">3番目のコンテンツ</a>
$(function(){
  if(window.matchMedia('(min-width:600px)').matches){
    $(".colorbox01").colorbox({rel:'group01'});
  } else {
    $('.colorbox01').on('click',function(){
      window.open(this.href,'_blank');
      return false;
    })
  }
});

しかし!

レスポンシブと言ったら、PCでウィンドウサイズを変えたら、それにあわせて挙動が変わらなくちゃダメでしょ!っていうケースもある。
そのため、ウィンドウサイズのリサイズを検知して挙動を変えてやる必要がでてくる。
PCとスマートフォンで画像も入れ替えたりすることが多いので、ここはよくコピペさせていただいている。
jQueryでウィンドウサイズによって画像を切り替える | Tips Note by TAM

さらにしかし!

これだけだと、ウィンドウを大きくしたり小さくしたりしているうちに、「on('click'」と「colorbox」が重なってきたりしてとても具合が悪い。
そして、スマートフォンで一瞬PCの画像が表示されてりしてなんか美しくない。
ってことで、最終的なjQueryはこんな感じに。

$(function(){

	///////////////////////////////////////////////
	// PCとスマートフォンの切り替え

	var mw = '(min-width:600px)';

	function viewSwitch() {
		// 非対応ブラウザの場合は何もしない
		if( !window.matchMedia ){
			return;
		}
		if(window.matchMedia(mw).matches ){
			// PCの場合
			var src1 = '_sp'; // 切り替える画像ファイル名の末尾
			var src2 = '_pc';
			$('.colorbox01').off('click'); // スマートフォンの場合に追加したイベント削除
			$(".colorbox01").colorbox({rel:'group01'}); // PCの場合はColorboxで表示
		} else {
			// スマートフォンの場合
			var src1 = '_pc';
			var src2 = '_sp';
			$(".colorbox01").colorbox.remove(); //PCの場合にセットしたColorboxを削除
			$('.colorbox01').off('click'); //重複して追加されないように一度イベントを削除
			$('.colorbox01').on('click',function(){ //スマートフォンの場合は新規ウィンドウで表示
				window.open(this.href,'_blank');
				return false;
			})
		}
		// 画像の切り替え class="imgchg"として要素の画像ファイルを入れ替える
		// ロード時に画像のチラツキを抑えるため、cssで、img.imgchg {visibility : hidden;} としておく
		$('img.imgchg').each(function() {
			var spsrc = $(this).attr('src').replace(src1,src2);
			$(this).attr('src',spsrc);
			$(this).css('visibility','visible'); 
		});
	}

	viewSwitch();

	var resizeTimer;
	$(window).on('resize', function() {
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function() {
			viewSwitch();
		}, 200);
	});

});

jquery.colorbox.jsで外部htmlをグループ化する方法

久々にjQueryのモーダル系プラグインColorboxを使う場面があった。
今回のリクエストは、外部htmlをモーダルで表示して、さらに画像のようにグループ化してギャラリー表示するというもの。

公式サイト
http://www.jacklmoore.com/colorbox/

jQuery Colorboxを読み込む

<link rel="stylesheet" href="css/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>

htmlがこんな感じだとする

<a href="contents1.html" class="colorbox01">1番目のコンテンツ</a>
<a href="contents2.html" class="colorbox01">2番目のコンテンツ</a>
<a href="contents3.html" class="colorbox01">3番目のコンテンツ</a>

jQueryでこんな風に書く

$(function() {
  $(".colorbox01").colorbox({rel:'group01'});
});

Macローカル環境でスマホサイトの実機テストを行う方法(3)

前回は、「MacのローカルフォルダをWebサーバーにする」でした。
charlie.hateblo.jp
今回は、「iPhoneAndroidからアクセスしてみる」です。

iPhoneAndroidからアクセスしてみる

MacIPアドレスを固定にする

まず、MacIPアドレスを固定にします。
システム環境設定 - ネットワークと進み接続済みの有線LANを選択します。
f:id:fushimik:20160310164612p:plain
まだ、Macを有線LANに接続し、さらにwi-fiアクセスポイントにしていない方は、
Macローカル環境でスマホサイトの実機テストを行う方法(1) - フロントエンドとかPCとかスマホとか
を参考に設定しよう。
この画面の「IPv4アドレス」と「ルーター」をメモしておき、設定時には最後のオクテットを253以下の十分に大きな数値にします。
ここでは、192.168.0.99を設定値としますが、192.168.0の部分は各自の環境にあった値にします。
f:id:fushimik:20160310165105p:plain
IPv4の設定:手入力
IPアドレス:<先ほど決めたアドレス>
サブネットマスク:通常は、このまま255.255.255.0でよい
ルーター:<先ほどメモしたアドレス>
最後に「適用」を押したら、MacIPアドレスは固定されたことになります。

iPhoneからアクセスする

設定したアクセスポイントにアクセスするのですが、この時に、iPhone側で追加の設定が必要です。
wi-fiアクセスポイント(Macで設定した)の左側の(i)マークをタップします。
f:id:fushimik:20160313130153p:plain

一番下の、HTTPプロキシを設定します。
f:id:fushimik:20160313130212p:plain
サーバ:固定したMacIPアドレス
ポート:8080

ここまで設定できたら、iPhonesafariを開き、アドレス欄に設定したローカルフォルダのURLを入れてみよう。
http://local.oreore.com

無事にローカルフォルダをiPhonesafariで開くことができたはずだ。

Androidからアクセスする

Androidからでも同様に追加の設定が必要です。
f:id:fushimik:20160313130226p:plain
wi-fiアクセスポイント(Macで設定した)を長押しします。
f:id:fushimik:20160313130238p:plain
「ネットワークを変更」
f:id:fushimik:20160313130249p:plain
「詳細設定項目」
f:id:fushimik:20160313130312p:plain
「プロキシ」を「手動」にセットし、さらに下にスクロールします。
f:id:fushimik:20160313130324p:plain
プロキシのホスト名:固定したMacIPアドレス
プロキシポート:8080 (デフォルトで表示されていますが、入力しないと保存できない)
ここまで設定したら、「保存」

これで、AndroidでもMacのローカルフォルダを表示することができるはずだ。

Macローカル環境でスマホサイトの実機テストを行う方法(2)

前回は、Macwifiアクセスポイントにするところまででした。
charlie.hateblo.jp

今回は、「MacのローカルフォルダをWebサーバーにする」です。

MacのローカルフォルダをWebサーバーにする

Macには、ApatchというWebサーバー機能がある。
これを利用する方法だ。

1.Apache設定ファイルの編集

編集するファイルは3つ。

/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万円のオフグリッドな太陽光発電に挑戦!

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

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

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

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

接続図

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ほど購入した。

防水用ボックス

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

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

固定用金具

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

設置

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

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

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

運用

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

Macローカル環境でスマホサイトの実機テストを行う方法(1)

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


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

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

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

ここからが、本題。

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

(1)では、MacWi-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パーソナル
  • パスワード:8文字以上の任意の文字列(あとで使うので忘れないように)

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

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

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

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

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

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

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

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

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

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


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

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

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


SublimeText/ElasticTabstops · GitHub


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

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