y.okano blog: 3月 2014

2014年3月31日月曜日

Mac OS X：DigitalColor Meter で画面上の色を取得

Mac ではデフォルトでインストールされている DigitalColor Meter で画面上の任意の座標の色を取得できます。

Shift + ⌘ + C で色をクリップボードにコピーすることもできます。

CSS などで色を合わせる必要がある時に便利です。

2014年3月30日日曜日

記事修正しました（ドラッグ＆ドロップでファイルアップロード）

「HTML5 ドラッグ&ドロップでファイルをアップロード」
http://yokano-jp.blogspot.jp/2013/07/html5.html

上記の記事でプログラムが正しく動作しておりませんでしたので、
修正いたしました。GitHub にもコードが上がっています。

2014年3月29日土曜日

BootStrap：navbar-fixed-top するときに画面が隠れる

Twitter Bootstrap で navbar-fixed-top を使用すると画面の上に固定されるナビゲーションバーを作ることができるが、そのまま使うとコンテンツがバーの後ろに回りこんでしまい、一部表示されない。

この場合はコンテンツを少し下に下げる必要がある。

body {
    padding-top: 70px;
}

こに詳しく書かれている。
http://getbootstrap.com/components/#navbar-fixed-top

2014年3月28日金曜日

紹介：Google Play 春のアプリセール

Google Play でセールをやっているようです。
Android ユーザはチェックしてみてはいかがでしょうか。

2014年3月27日木曜日

PHP：コマンドラインでインタプリタ

php コマンドは -a オプションでインタプリタを起動できる。
直接 PHP のコードを入力して実行することができる。
PHP で関数の動作確認などしたいときに便利。

$ php -a
php > echo "Hellow World!\n";
Hellow World!
php >

参考
対話シェル - PHP
http://www.php.net/manual/ja/features.commandline.interactive.php

2014年3月26日水曜日

2014年3月25日火曜日

CSS：テーブルを角丸にするときは border-collapse: separate; にする

<table> を CSS で角丸にする場合は CSS の broder-collapse を separate にする必要があります。デフォルトでは collapse になっているため border-radius が効きませんでした。
Twitter Bootstrap などの CSS フレームワークや、その他のライブラリなどを使用しているとデフォルトで border-collapse: collapse; を指定している場合があるため注意が必要です。
こちらでだいぶはまりました。

2014年3月24日月曜日

PHP: 小数点数の切り上げと切り捨て

PHP で小数点数を整数に変換する時、
floor() を使うか ceil() を使うかで動作が異なる。

floor() は引数に渡された数を超えない最大の整数を返す
http://jp2.php.net/manual/ja/function.floor.php

ceil() は引数に渡された数の次の大きい整数を返す
http://jp2.php.net/manual/ja/function.ceil.php

そのため小数点以下を切り捨てたい場合は floor()、
切り上げたい場合は ceil() を使う。

2014年3月23日日曜日

Mac: MacPorts で PHP5.5 をインストール

Mac OS X 10.9.2 (Mavericks) へ MacPorts を使って PHP 5.5 をインストールしました。
こちらのブログの通りにやれば問題ありませんでした。

OSXに入ってるApacheを無効化して，MacportsのApache・PHPを入れる - 馬の骨
http://hiraro.hateblo.jp/entry/2013/08/25/024641

MacPorts でインストールした apache は
/opt/local/apache2
へインストールされます。

php55 は
/opt/local/bin/php55
へインストールされます。

デフォルトの apache を launchctl コマンドで、
自動起動しないように設定し、
新しくインストールした方の apache が自動起動するようにする必要があります。
詳しくは上記のブログに載っています。

PHP 5.5 をインストールした後は DateTime を使用するために php.ini で
timezone に Asia/Tokyo をセットしておく必要があるので要注意です。

また、ドキュメントルートはデフォルトでは
/Library/WebServer/Documents/
でしたが MacPorts からインストールすると
/opt/local/apache2/htdocs
になりますのでプログラムは移動させておきましょう。

2014年3月22日土曜日

PHP: 実行中のPHPを実行しない

クローリングシステムなど cron で定期的に PHP を実行している場合、
通信処理の遅延などが原因で予定通りの時間に終わらない場合がある。

cron で設定されたプログラムは以前のプログラムの実行が、
終わっているかどうかにかかわらず時刻通りに実行されるため、
以前の処理が終わっていない状態で次の処理が呼び出されてしまう。

前の処理が実行中に次の処理が実行されてしまうとまずい場合は、
現在同じプログラムが実行されているかどうか調べてから実行する必要がある。

PHP の最新バージョンではセマフォを使って実現できるが、
PHP 5.2 など古いバージョンの場合はセマフォの関数が準備されていない。

セマフォ - PHP
http://jp2.php.net/manual/ja/book.sem.php

そこで ps コマンドを PHP から実行して直接プロセスを検索する方法がある。
例えば、クローリングを行なう PHP ファイルが craw.php という名前であれば、
同じ名前のプログラムが実行されていないか調べることで重複起動を避けられる。

exec('ps ax | grep -e "crawl.php$" | grep -v grep', $processes, $result);
if(count($processes) > 1) {
    // 同じプロセスが既に実行されている
    exit;
}

ps ax コマンドで全てのプロセスを取得し、
grep -e "crawl.php$" で同じプログラムが実行されているか調べています。
さらに grep -v grep で、grep コマンド自体のプロセスを検索対象から排除しています。
上記のように PHP ファイル名でプロセスを検索すれば多重起動を避けられます。

参考
コマンドライン版php の簡易多重起動防止 - Softel メモ
http://www.softel.co.jp/blogs/tech/archives/2986

2014年3月21日金曜日

Linux: 複数の html ファイルの文字コードを一括変換

シェルスクリプトで複数の HTML 内の文字コードを一括で変換する。
ここでは Shift_JIS の html ファイルを UTF-8 にしてみる。
<meta> 要素の charset も変換する。

#!/bin/sh
for html in `ls *.html`
do
    iconv -f SHIFT-JIS -t UTF-8 $html > ${html}_utf8
    mv ${html}_utf8 $html
    sed -e "s/Shift_JIS/UTF-8/" $html > ${html}_utf8
    mv ${html}_utf8 $html
done

iconv コマンドでファイルの文字コードを変換し、
その後 sed コマンドで <meta> の文字コード指定を Shift_JIS から UTF-8 にしている。
シェルスクリプト実行時のディレクトリ内の html ファイル全てに適用される。

2014年3月20日木曜日

Linux: iconv で文字コードを変換

iconv コマンドで文字コードを変換できる。
例えば SHIFT-JIS から UTF-8 へ変更したい場合は

$ iconv -f SHITF-JIS -t UTF-8 index.html > index_utf8.html

のようになる。
iconv で指定できる文字コード一覧は以下で確認できる。

$ iconv -l

もちろん Mac でも使用可能。

2014年3月19日水曜日

紹介: Humble eBook Bundle3

https://www.humblebundle.com/

ゲームを好きな値段で購入できる Huble Bundle ですが、
電子書籍を好きな値段で買えるパック Humble eBook Bundle 3 がリリースされています。
Humble Bundle は本も売っていたんですね。

2014年3月18日火曜日

PHP: parse_ini_file() で ini ファイルを読み込む

PHP でアプリケーションの設定を保存しておくためには、
外部ファイルとして設定情報を保存しておいたり
データベースに設定値を保存しておいたりする方法がある。

外部ファイルとして設定情報を保存する場合は、
config.php のようなファイルを作って、
変数や定数として設定情報を定義しておき、
メインのプログラムから参照する方法がある。

データベースのパスワードやホスト名など、
インストールする環境ごとに設定値を変える場合には、
config_base.php などのテンプレートを準備しておき、
それをコピー・編集して config.php として保存してもらう方法などがある。

PHP では ini ファイルをロードする parse_ini_file() があるため、
こちらを使用してもよい。

parse_ini_file - PHP
http://jp2.php.net/manual/ja/function.parse-ini-file.php

parse_ini_file は php.ini と同じフォーマットの設定ファイルを読み込み、
連想配列として返してくれる。

たとえば以下の様な ini ファイルを読み込んだ場合

; データベースの設定
[db]
user = yokano
pass = password
host = localhost
dbname = mydb

; アプリの設定
[app]
path = /var/www/html/app
admin = yokano
debug = true

<?php

$config = parse_ini_file('config.ini', true);
var_dump($config);

?>

このように取得できる。

array(2) { ["db"]=> array(4) { ["user"]=> string(6) "yokano" ["pass"]=> string(8) "password" ["host"]=> string(9) "localhost" ["dbname"]=> string(4) "mydb" } ["app"]=> array(3) { ["path"]=> string(17) "/var/www/html/app" ["admin"]=> string(6) "yokano" ["debug"]=> string(1) "1" } }

2014年3月17日月曜日

PHP: 古いバージョンのソースコード置き場

PHP 5.2 以前はサポートが終了しているため Downloads 画面にデフォルトで表示されない。
右側の Old Archives をクリックすると過去のバージョンのソースもダウンロードできる。
古いバージョンでのテストが必要な場合に使用する。

ここから落とせる
http://jp2.php.net/releases/

2014年3月16日日曜日

PHP: PHP 5.2 の PDO から MySQL へ接続できない

サーバの都合上、サポートが終了している古い PHP を使わなければならない場合があります。

Apache モジュールとして PHP 5.5 を使用していたサーバへ、
CGI モードで PHP 5.2 をインストールして使用したところ、
PHP 5.2 から PDO を使って MySQL へアクセス出来ないエラーが出ました。

Fatal error: Uncaught exception 'PDOException' with message 'could not find driver' in ...

PHP 5.2 で phpinfo() してみると、
PDO の欄に MySQL が存在していませんでした。

PHP 5.2 をソースからインストールするときに、
configure で --with-pdo-mysql を付けないといけませんでした。
再度インストールしなおしたところ、
PDO で MySQL へアクセスできるようになりました。

こちらの記事が参考になりました。

さくらでPDOを使ってMYSQLを使う - わっふるわっふる
http://d.hatena.ne.jp/rnamiki/20080315/1205556755

JavaScript: サーバ上のログファイルを定期的に取得

PHP で時間が掛かる処理をやっている時に、どこまで進んでいるのかを調べる場合にはコンソールに進捗を表示すればよいが、Web ブラウザ上に表示したい場合もある。

リアルタイムに表示したい場合は ob_flush() などを使用して echo した文字列を定期的に出せばよいが、ログファイルに処理内容を出力して、それを画面に表示する方法もある。

例えばログファイルの末尾を表示するだけの PHP を作成する。

  1 <?php
  2 
  3 system('tail -n 100 log', $log);
  4 echo $log;

そして Web ブラウザから JavaScript でこのスクリプトをポーリングする。

JavaScript
  1 $(function() {
  2     var update = function() {
  3         $.ajax('check_log.php', {
  4             dataType: 'text',
  5             success: function(data) {
  6                 $('#log').html(data.replace(/\n/g, '<br>'));
  7 
  8                 if($('input').prop('checked')) {
  9                     window.scrollTo(0, $('html').height());
 10                 }
 11             },
 12             error: function() {
 13                 console.log('error');
 14             }
 15         });
 16     };
 17 
 18     var counter = 10;
 19     setInterval(function() {
 20         counter = counter - 1;
 21         $('#counter').html('ログの更新まで ' + counter + '...');
 22 
 23         if(counter == 0) {
 24             counter = 10;
 25             update();
 26         }
 27     }, 1000);
 28 
 29     update();
 30 });

HTML
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>ログ</title>
  6         <link rel="stylesheet" href="css/crawl.css">
  7         <!--[if lt IE 9]>
  8             <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  9         <![endif]-->
 10         <!--[if gte IE 9]><!-->
 11             <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
 12         <!--<![endif]-->
 13         <script src="js/crawl.js"></script>
 14     </head>
 15     <body>
 16         <div id="log"></div>
 17         <div>
 18             <label><input type="checkbox"> 自動的にスクロールする</label>
 19         </div>
 20         <div id="counter">ログの更新まで 10...</div>
 21     </body>
 22 </html>

2014年3月15日土曜日

Linux: zip コマンドでディレクトリを圧縮

Linux でディレクトリを zip にするときには以下のようにする。

$ zip -r hoge.zip hoge

-r を忘れると空っぽの zip ができてしまうので注意。

2014年3月14日金曜日

iOS: iOS7 の Safari でページ内検索

iOS 7 の Safari でページ内検索する方法です。
iOS 6 はわかり易い場所に表示されていたのですが、
iOS 7 で場所がわからなくなり放置していたのですが、
結構わかりづらい場所にありました。

検索したいページで、検索バーに検索する単語を入力します。

下に候補ページが表示されるので、
これをスクロールします。
一番下に「このページ」が表示されるのでタッチします。

画面下部にバーが出現して、ヒットした単語を順番にハイライトできます。

2014年3月13日木曜日

MacOSX: 光るXcode

Xcode をアップデートしたら光ってました。

2014年3月12日水曜日

Apache: ディレクティブのリファレンス

Apache 2.2 の httpd.conf を設定する際に、
わからないディレクティブがあったらここで調べられる。

ディレクティブクイックリファレンス - Apache HTTP サーバ
http://httpd.apache.org/docs/2.2/ja/mod/quickreference.html

2014年3月11日火曜日

PHP: preg_match() と mb_ereg_match() のパターン指定の違い

正規表現を使ってマッチングできるのは両方とも変わらないが、パターンに / を付加するかどうかが異なる。

preg_match() のパターンには / を付加した正規表現を渡す。

preg_match('/my name is (.*)/', $name, $matches);
$name = $matches[1];

mb_ereg_match() のパターンには / を付けない正規表現を渡す。

if(mb_ereg_match('my name is .*', $name)) {
    // マッチした
}

PHP の正規表現についてはこちらがとても詳しい。

[再掲載]PHPの正規表現のpreg_match()関数 - Nyakaman
http://nyakaman.sakura.ne.jp/tag/preg_match/

2014年3月10日月曜日

iOS: AirServer で iOS デバイスの画面を Mac へミラーリング

iOS デバイスの画面を録画する場合は、Windows や Mac へ画面をミラーリングして、デスクトップ側で録画をする。

自宅で iMac へ iPad の画面をミラーリングするためにソフトを探してみたところ、
Reflector と AirServer が見つかった。両方とも１週間無料でお試しできる。
どちらもミラーリングだけではなく録画機能も搭載している。

使い方は基本的に Apple TV へのミラーリングと同じ。
アプリを起動すると、iPad のミラーリング先として Mac が出現する。

両ソフトを試してみたところ AirServer の方が解像度が高く、
余計なフレームも表示されないため使いやすかった。

2014年3月9日日曜日

PHP: XPath で HTML の特定要素を取得 2

PHP の DOMXPath クラスを使うと HTML から特定の要素を取得することができる。
例えば HTML が以下のようになっているとする。

<html>
    <head></head>
    <body>
        <div id="target">Target Element</div>
    </body>
</html>

この場合は PHP の DOMXPath クラスで以下のように指定できる。

// HTML ファイル読み込み
$html = file_get_contents('target.html');

// DOMDocument オブジェクトを作成
$document = new DOMDocument();
@$document->loadHTML($html);

// XPath オブジェクトを作成
$path = new DOMXPath($document);

// 特定要素を取得
$path->query('/html/body/div');
echo $path->item(0)->textContent;  // Target Element

/ でパスを開始するとルートノードから辿って検索される。
// で開始するとドキュメント全体から指定したタグ名の要素を全て取得できる。

$path->query('//div');

id や class など、属性を使用する場合には @ 記号を使用して指定する。

$path->query('//div[@id="target"]');

他にも条件に引っかかる要素の内、X番目に出現したものを取得するなど、
柔軟に条件を指定することができる。

XPath についてはこちらのページがとても分かりやすい。
http://msugai.fc2web.com/java/XML/XPath.html

2014年3月8日土曜日

3DS: もぐらたたき for 3DS が遊べなくなっていた

久しぶりに以前 3DS の Web ブラウザ向けに enchant.js で作ったもぐらたたきを遊ぼうとしたところ、下のような画面が表示されました。

「申し訳ありませんが、リクエストされたページでは最新の技術が使用されているため、ご使用の携帯では利用できません。」

アプリは Google App Engine 上で動かしているのですが以前はこのような表示は出てきませんでした。

知らない間にこのような表示に変わっていたので驚きました。多分 App Engine 側で処理が追加されたのかなと思います。

あとで別のサーバ上にファイルを置いて試してみようかと思ったのですが、もともと App Engine 用に書いていたのでパスの指定部分など細かいところで書き直しが必要になるかと思います。放置していたためかランキングも動いていない模様・・・。

やっぱり LAMP 環境で動くもので書いたほうがいいかなと思いました。（なぜか App Engine + Go で書いていた）

2014年3月7日金曜日

vi: タブ表示幅の変更

vim でタブの表示幅を変更するときは

:set tabstop=4

XPath については明日へ・・・。

2014年3月6日木曜日

PHP: XPath で HTML から特定要素を抽出　１

PHP でスクレイピング（クローリング）をするときには、Simple HTML DOM Parser を使うと便利らしい。しかし、場合によっては外部ライブラリが使用できない場合もある。その場合は、PHP がデフォルトで使用することができる DOM Document クラスを使うことになる。

Simple HTML DOM Parser では jQuery のセレクタのように HTML 内の特定要素を指定することができる。PHP の DOM モジュールでは DOMXPath クラスを使って XPath 1.0 記法で HTML 要素を指定できる。

XPath 記法についてはこちらがとてもわかりやすい。
Java 入門 | XPath

具体的な記述法については明日記述する。

2014年3月5日水曜日

ゲーム: 好きな値段で Android ゲームが買える Humble Mobile Bundle 4

いつも紹介している Humble Bundle シリーズですが、Android 版の第４弾が販売されています。Web ページ上で好きな金額を入力して、その値段でゲームを買うことができます。支払った金額について、開発者に渡る分と、ゲーム関連団体へ渡る分の割合を設定することが可能です。

ご購入はこちらから
https://www.humblebundle.com

2014年3月4日火曜日

JavaScript: 日本語の文か英文かを判定する

正規表現を使って
「半角英数字・半角記号のみで構成されていたら英文である」
と判定するように書いてみる。

if(/^[0-9\s\t\w“”!"#\$%&'’\(\)\*\+,-\./\:;<\=>\?\[\]\^`\{\|\}~]+$/.test(text)) {
    // 英文
} else {
    // 日本語
}

その他、® や θ など必要に応じて英文にも含まれる記号を追記していくようにした。
もっといい方法があるかも。

2014年3月3日月曜日

jQuery UI: エフェクトだけをダウンロードする

jQuery UI にはいくつかのエフェクトが準備されています。
https://jqueryui.com/effect/

slide などはよく使用しています。
jQuery UI には他にも様々な機能があり、大きなライブラリとなっています。

そこで必要な機能だけを選択してダウンロードする Custom Download がオススメです。https://jqueryui.com/download/

例えば slide エフェクトだけ使用したいときは、
Effect Core と Slide Effect だけチェックを付けてダウンロードすればOKです。

2014年3月2日日曜日

Mac OS X: Git へプッシュできなくなった

バージョン管理は SourceTree + Bitbucket を使用しています。
無料で使えるプライベートリポジトリが少ないため GitHub は最近使っていません。

SourceTree でプッシュを試みたところ、
以下の様なエラーが発生して失敗するようになりました。

Pushing to https://******@bitbucket.org/******
fatal: unable to access 'https://******@bitbucket.org/******.git/':
SSL certificate problem: Invalid certificate chain
Completed with errors, see above

調べてみたところ以下の情報がヒットしました。

Mac OS X 10.9.2でGitHubにアクセスするとサーバー証明書のエラーが発生する場合の解決策 - orangain flavorhttp://orangain.hatenablog.com/entry/2014/03/01/mavericks-ssl-certificate

こちらへ書いてある通りにキーチェーンアクセスから、
DigiCert High Assurance EV Root CA

を削除したところ再びプッシュできるようになりました。

同じ名前の証明書が２つあり、

オレンジ色ではない方を削除しました。

2014年3月1日土曜日

紹介: 500円でサービスを売り買いするサイト「ココナラ」

ココナラは 500 円でサービスを売り買いできるサイトです。
パッと見た感じイラストと占いが人気のようですが、
ウェブページ作成なんかのサービスも出品されています。

また、依頼側のユーザが欲しいサービスをリクエストすることで、
募集をかけることもできるようです。

ココナラ
http://coconala.com/home

登録: 投稿 (Atom)