Logical Rabbit.

さくらのVPS

備忘

gulp-gh-pagesを使おうとしてハマったメモ(おそらく今だけの一過性)。

発端

gulp-gh-pages を使おうとしたら、以下のような謎のエラー。

node_modules/gulp-gh-pages/node_modules/gift/lib/commit.js:145
      ref1 = /^.+? (.*) (\d+) .*$/.exec(line), m = ref1[0], actor = ref1[1], epoch = ref1[2];
                                                       ^

TypeError: Cannot read property '0' of null

エラー箇所のコードを読むと、gitのcommitログ解析でおかしくなっているように見えるのだけど、なんでcommitログの正規表現処理なんてやっているのかが不明だにゃー、と。

原因

ググると以下のページが見つかったので、取り敢えず gulp-gh-pages-will ではなくて手動で何とかする方法をとってみた。

gulpの「gulp-gh-pages」がエラー履くようになったときの対応

記事内の解説、およびgiftのissueとかを読んでみると、giftの過去バージョンに起因する問題で、gift自体では問題解決済みの版が出ている。しかし、gulp-gh-pagesのpackage.jsonが古いままなので、gulp-gh-pagesとしては問題解決できていない、ということらしい。

どうも gulp-gh-pages 本家もGitHub上では次バージョンのタグが出ていて、最新のpackage.jsonではgiftも最新版使うようになっているので、近々根本的な解決があることを期待したいところ。

なお、gulp-gh-pagesをGitHub版で使えばいいよね、と思ってやってみたところ、今度は gulp-gh-pages が依存する gulp に未リリース・GitHub版を要求され、仕方ないので gulp もGitHub版にしてみたところ、新たな謎エラーが出てしまったというオチがつきましたとさ。

解決手順

  1. "gift": "^0.10.2" を package.json に追記
  2. npm install 実行後、rm -rf node_modules/gulp-gh-pages/node_modules/gift として gulp-gh-pagesのインストール結果内giftを削除(こうしないと v0.10.2 のほうを使ってくれない)

Amazon Product Advertising APIについての備忘録。

JavaScriptベースで一通りつついてみたので、実装方法の備忘録。秘密鍵扱うので、クライアントサイドJavaScriptはNGですな。基本的にはプログラミングガイド読めば分かるものです。コーディングはお仕事しますよ? 的な。

必要なもの

アクセスキーID:
Amazonアソシエイト・セントラル →ツール →Product Advertising API で取得可能
秘密キー:
Amazonアソシエイト・セントラル →ツール →Product Advertising API で取得可能(認証情報生成時のみ表示されるようなので注意)
アソシエイトID:
Amazonアソシエイト・セントラルの右肩に出てるアレです

実装上のポイント

一先ず、ASINで指定した特定商品の情報取得を試しました。

  • エンドポイントは固定。シグネチャ生成時にhostとpathに分割することになります。
  • クエリは文字コード順でソートすることになるので、& で連結せずに扱ったほうが良さ気でした。ソートはArray.sort()のアルゴリズムで問題ない筈。
  • 各所の値はencodeURIComponent()でエンコード。
  • TimestampはISO形式の日付+時間ですが、ミリ秒以下があるとエラーになりますので(new Date()).toISOString()は使用できません。
  • シグネチャはbase64 エンコードの HMAC_SHA256です。Node.jsの場合 crypto.createHmac()が使用可能です。

うっかりハマる点として、各所に出てくるサンプルでのエンドポイントがアメリカ版ですが、日本のAmazonでアカウント登録している場合は日本のエンドポイントを使う必要があります。

処理の流れ

  1. タイムスタンプを生成します。UTC~メソッド群を使用して、ミリ秒を含まないISO形式の日付を生成。getUTCMonth()が0~11を返すことと、1桁の値は右側に0が必要になることに注意
  2. クエリを項目ごとに分割・格納したArrayを組み立てます →query

    AWSAccessKeyId
    アクセスキーID
    AssociateTag
    アソシエイトID
    Operation
    ItemLookup (今回は商品情報取得なので)
    ItemId
    ASIN
    Timestamp
    タイムスタンプ
  3. エンドポイントURLをバラします。Node.jsの場合url.parse()でパースして、hostとpathを使用します。
  4. クエリをソートし、&で連結しておきます。 →sorted_query
  5. 'GET', エンドポイントのhost, エンドポイントのpath, sorted_queryを\nで連結し、crypto.createHmac()で処理した後digest('base64')でBASE64形式で取り出し、更にencodeURIComponent()でエンコードします。 →signature
  6. エンドポイント + ? + sorted_query(queryでもいい筈) + & + signature にアクセスします。後はレスポンスを適宜調理。

リクエスト制限は「1秒に1回」とされているのですが、試行しているときにコード修正で明らかに数秒以上経過してても制限にかかってエラーになったので、もう少し余裕持ったほうが良さそう。

ところでPAAPIってやっぱり「パァイ」って読めばいいんですかね。

Vue.js+<input type="date">+初期値new Date()の場合

data() で初期値を定めるとき、new Date()の値をyyyy-mm-ddにしてやれば万事解決。←結論

細かく解説すると。

  • Vue.jsではコンポーネントの data() で初期値セットを返す
  • <input type="date" > はvalueとしてISO形式(yyyy-mm-dd)を与えないと初期状態として日付を表示してくれない(値があっても "yyyy/mm/dd" というユーザに大変お優しい表示となってしまう)
  • <input type="date" > に new Date() の値をそのままセットしても上記理由によりまともに表示してくれない

解決パターン。

Google Shortener(Google短縮URL) API。

Google Shortener APIで短縮URLを生成する処理をちょっと試してみたのでメモ的に残しておく。

  • APIキーは各自Googleアカウントで発行すること
  • fieldsクエリは全部乗せになってます
  • 正常に実行できると、アラートダイアログで結果が表示されます
  • エラー処理? なにそれおいしい?
$(function() {
  var apikey = <各自APIキーを入力>;
  var url = 'https://twitter.com/mami_tuchino'; /* これが短縮したいURL */
  $.post({
    url: 'https://www.googleapis.com/urlshortener/v1/url?fields=analytics%2Ccreated%2Cid%2Ckind%2ClongUrl%2Cstatus&key=' + apikey,
    data: JSON.stringify({ longUrl: url }),
    dataType: 'JSON',
    contentType: 'application/json',
    success: function(json) { alert(json.id); },
    error: function(error) { console.logt(error); }
  });
});
 

Rubyコードでパスワードを簡易生成したいとき。

ググってみると、大抵以下のようなコードが多数見つかる。

ruby -e 'p [*1..9, *"a".."z", *"A".."Z"].sample(8).join'

これ、

ruby -e 'p [*"!".."z"].sample(8).join'

でいいんぢゃねぇです? 文字コード的に半角スペース, "!" , …数字…大文字アルファベット…小文字アルファベット、と続くので。まあパスワードに半角スペース入れると入力が厄介なことになりそうだからその次の "!" から始めるとして。

あ、でも " とか ' とか ` あたりもパスワードに含めると扱いがアレ気になりそうだから、

ruby -e 'p [*"!".."z"].reject {|c| %w"\" '"'"' \`".include? c }.sample(8).join'

くらいで、どうですかね?

地図情報サービスAPIについてのまとめ (2017年版)

地図を表示したり、地図上のあれこれを検索したりする用途のAPIについて、使用条件などをまとめました。なお、2017年6月23日現在の状況ですので今後変わる可能性があります。利用規約等は最新版を確認のうえ、各人の判断にてご利用ください。解釈ミス、情報のもれについて当方は責任を負いません。

サービス名 提供される内容(概略) 利用制限 商用利用 クレジット表記
Google

https://developers.google.com/maps/documentation/api-picker?hl=ja

  • 位置の移動、拡大縮小など基本的な操作が可能な地図の表示
  • スマートフォン向けアプリケーション用API
  • プレイス(=概ね場所と解釈)、ユーザーのクチコミなどの検索
  • ジオコーディング、リバースジオコーディング
  • 複数点の緯度経度を指定して移動方法に基づいた距離、移動時間を計算(みちのりベースで計算)
  • 標高、経路
  • 機能としては未確認ですがたぶん気象情報取得、郵便番号検索あたりは可能と思います。店舗名名寄せはプレイス オートコンプリートで出来そう。
  • Google Street View

https://developers.google.com/maps/pricing-and-plans/?hl=ja

Google Maps Android API、Google Maps SDK for iOSについては制限なし。ただし「標準プランの利用規約で許可されている」との表記があるので、こちらも要確認。

Google Maps Embed APIについては無制限の無料利用。

地図表示については「1 日あたり最大 25,000 回のマップロードが無料」、Google Places API Web Serviceは「1 日あたり 150,000 回のリクエストが無料(クレジット カードによる本人確認が必要)」。その他のサービスはAndroidおよびiOS向けが「1 日 1,000 件」、Web Serviceが「1 日あたり 2,500 回」までのリクエストが無料。

無料に該当するもの以外は、少ないほうの数(スマートフォン系は1,000、Web系は2,500)で判断したほうが無難と思います。

https://developers.google.com/maps/pricing-and-plans/?hl=ja

有料サイトの場合は無条件に有料プランが必要と解釈しています。無料サイトの場合Yahoo!の「~ユーザーから利益を得ていると認められる~」のような言い回しは無いので無料プランで利用可能と思われますが、リクエスト回数の制限が厳しいので実質的に有料プランを選択することになると思われます。

その他「非営利組織、危機対応組織、および報道機関」向けに特別扱いがあるようなので、該当する場合は申請することで無料のまま利用できる可能性があります。

地図を表示させた場合は、地図画像自体にクレジット表記が埋め込まれています。

API利用の場合、基本的には「Googleが提供する地図と併用」となっていますので実質的にクレジット表記を表示することになります。PlacesAPI Web Serviceは「Google Places API Web Service のデータを Google マップには表示させず、ページまたはビューに表示するアプリケーションでは、データと一緒に「Powered by Google」ロゴを表示させる必要があります。」とあります。(https://developers.google.com/places/web-service/policies?hl=ja)

Yahoo!    

https://developer.yahoo.co.jp/webapi/map/

  • 位置の移動、拡大縮小など基本的な操作が可能な地図の表示
  • スマートフォン向けアプリケーション用API
  • 店舗(=概ね場所と解釈)、イベント、クチコミ情報などの検索
  • ジオコーディング、リバースジオコーディング
  • 2点間の緯度経度を指定して地球の楕円体に合わせた正確な距離を計算
  • 測地系変換(緯度経度を日本測地系と世界測地系で相互変換)
  • 気象情報, 郵便番号検索, 住所ディレクトリ, 経路, 施設内検索, ルート沿い検索, 業種マスター, 店舗名寄せ, 標高, カセットサーチ(YOLP独自機能(?))
1アプリケーションIDごとに1日50000回 (https://developer.yahoo.co.jp/appendix/rate.html)

Yahoo! Open Local Platformの利用方法; 2. YOLPでは、以下に列挙するもののいずれかに該当するとYahoo! JAPANが判断した場合、YOLPのライセンスを消滅させることがあります。 ; YOLPにより提供される情報の使用によりユーザーから利益を得ていると認められるサービス (https://developer.yahoo.co.jp/webapi/map/#policy)

商用利用不可、もしくは多少なりともビジネスで利用する意図があるならば一度Yahoo!へ問い合わせた方が無難と判断します。

有償プラン: YOLP Premier (https://map.yahoo.co.jp/promo/yolp/yolppremier.html)

Yahoo! JAPANの提供するAPIを利用するすべてのサイトやアプリケーションには、クレジットを表示する必要があります (https://developer.yahoo.co.jp/attribution/)

AWS SDK for PHPでAmazon S3へアクセスするコードのメモ。

ぶっちゃけ技術検証で途中まで書いたのだけど、当面使いそうに無いのでココという蔵に「お蔵入り」です。

必要なもの

サンプルコード

  • AWS SDK for PHPはComposer等を使用せずに直接展開、 lib/ 以下に配置しています。Composer使った方が楽ですが、シェルログインできない環境の場合は手作業で配置した方が状況把握できてよいので。
  • バケット名は aws-test.logicalrabbit.jp 。予め作成しておきませぅ。

認証

  <?php
    require 'lib/aws-autoloader.php';

    use Aws\S3\S3Client;

    $s3client = new S3Client( [
      'region' => 'ap-northeast-1',
      'version' => '2006-03-01',
      'signature_version' => 'v4',
      'credentials' => [
        'key' => [アクセスキー],
        'secret' => [秘密鍵],
      ],
    ] );
  ?>

オブジェクト一覧の取得

テーブル化して一覧にしています。

    <table>
      <tr>
        <th>Key</th><th>Size</th><th>Last modified</th>
      </tr>
  <?php
    $result = $s3client->listObjects( [
      'Bucket' => 'aws-test.logicalrabbit.jp',
    ] );

    foreach( $result['Contents'] as $content ) {
      echo '<tr><td>' . $content['Key'] . '</td><td>' , $content['Size'] . '</td><td>' . $content['LastModified'] . '</td></tr>';
    }
  ?>
    </table>

オブジェクトの追加

取り敢えず lib/ 内に展開前のaws.zipがあったので、それをアップロードしてみるなど。アップロード成功の有無確認として、ETagを画面に表示します。

  <?php
    $reader = fopen('lib/aws.zip', 'r');

    $result = $s3client->putObject( [
      'Bucket' => 'aws-test.logicalrabbit.jp',
      'Key' => 'aws.zip',
      'Body' => $reader,
    ] );
    fclose( $reader );

    echo '<p>Uploaded a file. ETag = ' . $result['ETag'] . '</p>';
  ?>

この後で再度オブジェクト一覧の取得を実行すれば、オブジェクトが増えているのが確認できる筈。

「さくらのレンタルサーバー」でPHPバージョンを変更してもpeclが使用するPHPバージョンが上がらなかった話(解決)

PHP_PEAR_PHP_BIN=/usr/local/bin/php を設定すればOK。←結論

どっとはらい。

…いや備忘録として残しておきたかったので。なお、PHP本体のバージョンはさくらインターネットの「コントロールパネル」にて変更可能です。

% php -v
PHP 7.1.4 (cli) (built: Apr 17 2017 11:51:56) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies
    with Zend OPcache v7.1.4, Copyright (c) 1999-2017, by Zend Technologies

PHPはv7.1になっています。

% pecl version
PEAR Version: 1.10.1
PHP Version: 5.6.30
Zend Engine Version: 2.6.0
Running on: FreeBSD www251.sakura.ne.jp 9.1-RELEASE-p22 FreeBSD 9.1-RELEASE-p22 #0: Wed Dec  3 15:24:48 JST 2014     root@www3304.sakura.ne.jp:/usr/obj/usr/src/sys/SAKURA17 amd64

しかし、peclは相変わらずPHP v5.6のまま。おかげでphp 7.xを要求するパッケージがインストールできなかったりします。

まずはphpコマンドの場所を確認。

% which php
/usr/local/bin/php

実際には /usr/local/bin/php-wrapper へのシンボリックリンクのようではありますが。

ログイン時、phpコマンドの場所を環境変数PHP_PEAR_PHP_BINにセットするようにします。その後取り敢えず現ログイン環境に反映。

% echo "setenv PHP_PEAR_PHP_BIN /usr/local/bin/php" >> .cshrc
% source .cshrc

再度peclが使用するPHPのバージョンを確認。

% pecl version
PEAR Version: 1.10.1
PHP Version: 7.1.4
Zend Engine Version: 3.1.0
Running on: FreeBSD www251.sakura.ne.jp 9.1-RELEASE-p22 FreeBSD 9.1-RELEASE-p22 #0: Wed Dec  3 15:24:48 JST 2014     root@www3304.sakura.ne.jp:/usr/obj/usr/src/sys/SAKURA17 amd64

これにて解決。

…したんだけど、肝心のmailparseがコンパイルエラーになって… ぐぬぬ。

Google Map JavaScript APIで任意のマーカーアイコンを使用する方法と、そのアイコンの凡例をHTML表示するメモ。

1) ペイントソフトで1枚の画像ファイルに複数のアイコンを描いて 2) Google Map JavaScript APIで画像ファイルから各々のアイコンを切り出し、マーカーアイコンとして適用して 3) 同時にHTMLでも各々のアイコンを切り出し、凡例を表示する までの手順メモです。

取り敢えずメモなので説明画像も何もないですが、そのうち追加すると思いますよ、えぇそのうち…

用意するもの

  1. お絵かきソフト (アンチエイリアシング、透過PNG画像作成ができるもの)
  2. アイコンデザイン画
  3. HTMLとJavaScriptソースを書くためのツール
  4. Google Map JavaScript APIのAPIキー

手順1. 画像ファイルの作成

アイコンをまとめた画像ファイルの作成については、古のスプライトとかビットマップ画像とかを見たことがある人なら何の説明も要らない気がします。要はアレです。

何はともあれ、画像ファイルにアイコン画像を描きこみます。この際、アイコンの形状に関わらず、四角形(正方形のほうが管理しやすいと思います)の中央に収まるようにします。

次に、アイコン形状的に余白となる部分をマジックワンド等で選択、透過部分となるように設定します。具体的には消去して透明にするとか、アルファチャネルいじるとか。

透過部分の指定が終わったら、透過PNG画像として保存します。ここでは marker_icons.png とします。たぶんGIFでもJPEGでも、透過できて一般的なWebブラウザで表示できる形式なら何でもOKと思います。まあJPEGは予想外のゴミが入りそうだから止めた方がいいと思うけど。

手順2. Google Mapで使用するマーカーへの適用

マーカー( google.maps.Markerクラス )へ任意の画像ファイルを指定する方法は、コンストラクタのmarkerOptionsに iconプロパティ を指定することで行います。iconプロパティへはSVGパスかオブジェクト( google.maps.Icon )を指定可能なので、今回は後者のオブジェクト指定を使用します。

iconオブジェクトでは画像ファイルのURL (url)、画像ファイル中でのアイコン開始位置 (origin)、アイコンの大きさ (size) を指定します。他にもアイコンに被せるラベル文字列の開始位置などを指定できるので、微調整が必要な場合はこれらで調整していきます。

origin プロパティは google.maps.Pointクラス、size プロパティは google.maps.Sizeクラスを指定します。

例: /images/makrer_icons.png を読み込み、画像左上から30×30ピクセルのアイコン画像を使用する場合

var pos = new google.maps.LatLng( lat, lng );
var markerOptions = {
  label: 'marker',
  position: pos,
  map:       window.map,
  icon: {
    url: '/images/marker_icons.png',
    origin: new google.maps.Point( 0, 0 ),
    size: new google.maps.Size( 30, 30 )
  }
};
var marker = new google.maps.Marker( markerOptions );

手順3. HTMLによる凡例の表示

凡例を表示する際、先述の makrer_icons.png をそのまま表示してしまうと、複数のアイコン画像がずらずら並んだモノが出てしまいよろしくありません。このファイル自体に凡例としての説明部を書き込んでしまうという手もありそうですが、なんだか無駄が多いので止めておきましょう。うん、止めよう(ちょっと企んだ)

凡例の構成としては 1) アイコン、 2) 説明文 の列挙となりますので、 <ul> タグを使用して、リストのヘッダにアイコン画像を表示することにします。この際 <li> タグの list-item-image 属性では画像のクリッピングができないので、:before を使用して背景画像として表示することにします。

例: /images/makrer_icons.png を読み込み、画像左上から30×30ピクセルのアイコン画像について凡例を表示する場合

<style>
.marker {
  list-style-type: none;  /* デフォルトのリスト接頭辞は非表示にする */
}

.marker:before {
  background: url('/images/marker_icons.png') no-repeat 0px 0px; /* 画像を読み込み、左上部分から表示 */
  width: 30px;   /* 画像の表示幅 = クリッピング領域 */
  height: 30px;  /* 画像の表示高さ = クリッピング領域 */
  top: 0;
  left: 0;
  display: inline-block; /* 幅を指定するのでblock、<li>の本文に並べるのでinline */
  vertical-align: middle; /* バランスを考えて<li>の本文が画像中央に来るようにする */
  content: ' ';
}
</style>

<ul>
  <li class="marker">これはアイコンの説明文です</li>
</ul>

実際には複数のアイコンを説明することになるはずなので、クラス定義はアイコンの数だけ用意し、表示位置を変えていくことで切り出し位置を定義します。

PHP関連のメモ。

仕事でのメイン開発言語がPHPになったので。今までPHPをメインに使うことは無かったので(敢えて選択する理由が無かった)。お約束的な部分が色々分からんので自分用にメモ。

MySQL(MariaDB)に接続できないとき

  1. Socketが見つかっていない可能性を疑う
  2. php --ri mysqli とか php --ri pdo_mysql でパラメータをチェック
  3. Socketが設定されていない、もしくは正しくない場合は php.ini を確認
  4. そもそも何処の php.ini を見ているのか、と言う点を疑う
  5. 何処の php.ini を見ているかは、 php -i | grep php.ini とでもすれば分かる
    • 自分しか使わないマシンだったらとりま /etc/php.ini を設定していけば良いのだけど、ソースコンパイルしたPHP (php.7.1.1)だとそもそも <インストールディレクトリ>/lib/php.ini を見ていましたとさ。どっとはらい。
    • sudo ln -s /etc/php.ini <インストールディレクトリ>/lib/php.ini としたところ、/etc/php.ini を見るようになりました