備忘
Docker の mysql でMySQLサーバを起動して、Rails環境のほうが既存コードで開発環境でも一般ユーザを作ってDBアクセスする仕組みにしていたので、 MYSQL_DATABASE, MYSQL_USER, MYSQL_PASSWORD を使ってDBとユーザを自動で作らせようとしたのだけど…ハマった。
Rails側が app、DB側が db と思いなせぇ。
取り敢えずMigrationエラー出るのは承知でRails側を起動させ、アクセスしてみたところ、以下のエラーが発生。
app_1 | Mysql2::Error::ConnectionError (Access denied for user 'user'@'test_app_1.test_default' (using password: YES)):
もちろんパスワードとかは合ってる。アクセス拒否されたユーザ名のホスト名部分が test_app_1.test_default となっているのだけど、当初ここを「アクセス先」と誤認してしまい、 DBコンテナのホスト名がどこかで混線してる？？？ と考えてあちこち弄ったりデバッグコード仕込んでみたりして調べること、約1日。
ちがうよねー
これはアクセス元(app)のホスト名が、MySQL側に登録されていないので拒否られているのよねー。
で。気付いたので MYSQL_USER を user@test_app_1.test_default にしてみたり(これだと docker-compose run するたびにホスト名が変わるのでよろしくない)、 user@% にしてみたり(というか元々こうなる気がするんだが…)したのだけど、結局うまく行かず、面倒くさいので Rails 側のDBユーザ名を root に変えてしまいましたとさ。
どっとはらい。
…まあ、後々必要になりそうな気もするので、今度どのように書くのが良いのか、ちゃんと調べようかと(今はただRailsアプリの動作環境を作ってコーディングをせねばならぬ)
そんな平成最後の年度末。
発端
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版にしてみたところ、新たな謎エラーが出てしまったというオチがつきましたとさ。
解決手順
"gift": "^0.10.2"を package.json に追記npm install実行後、rm -rf node_modules/gulp-gh-pages/node_modules/giftとして gulp-gh-pagesのインストール結果内giftを削除(こうしないと v0.10.2 のほうを使ってくれない)
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でアカウント登録している場合は日本のエンドポイントを使う必要があります。
処理の流れ
- タイムスタンプを生成します。UTC～メソッド群を使用して、ミリ秒を含まないISO形式の日付を生成。getUTCMonth()が0～11を返すことと、1桁の値は右側に0が必要になることに注意
-
クエリを項目ごとに分割・格納したArrayを組み立てます →query
- AWSAccessKeyId
- アクセスキーID
- AssociateTag
- アソシエイトID
- Operation
- ItemLookup (今回は商品情報取得なので)
- ItemId
- ASIN
- Timestamp
- タイムスタンプ
- エンドポイントURLをバラします。Node.jsの場合
url.parse()でパースして、hostとpathを使用します。 - クエリをソートし、&で連結しておきます。 →sorted_query
- 'GET', エンドポイントのhost, エンドポイントのpath, sorted_queryを\nで連結し、
crypto.createHmac()で処理した後digest('base64')でBASE64形式で取り出し、更にencodeURIComponent()でエンコードします。 →signature - エンドポイント + ? + sorted_query(queryでもいい筈) + & + signature にアクセスします。後はレスポンスを適宜調理。
リクエスト制限は「1秒に1回」とされているのですが、試行しているときにコード修正で明らかに数秒以上経過してても制限にかかってエラーになったので、もう少し余裕持ったほうが良さそう。
ところでPAAPIってやっぱり「パァイ」って読めばいいんですかね。
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 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 -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年6月23日現在の状況ですので今後変わる可能性があります。利用規約等は最新版を確認のうえ、各人の判断にてご利用ください。解釈ミス、情報のもれについて当方は責任を負いません。
| サービス名 | 提供される内容(概略) | 利用制限 | 商用利用 | クレジット表記 |
|---|---|---|---|---|
|
https://developers.google.com/maps/documentation/api-picker?hl=ja
|
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/
| 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
- AWSのアクセスコード
サンプルコード
- 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_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がコンパイルエラーになって… ぐぬぬ。
1) ペイントソフトで1枚の画像ファイルに複数のアイコンを描いて 2) Google Map JavaScript APIで画像ファイルから各々のアイコンを切り出し、マーカーアイコンとして適用して 3) 同時にHTMLでも各々のアイコンを切り出し、凡例を表示する までの手順メモです。
取り敢えずメモなので説明画像も何もないですが、そのうち追加すると思いますよ、えぇそのうち…
用意するもの
- お絵かきソフト (アンチエイリアシング、透過PNG画像作成ができるもの)
- アイコンデザイン画
- HTMLとJavaScriptソースを書くためのツール
- 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>
実際には複数のアイコンを説明することになるはずなので、クラス定義はアイコンの数だけ用意し、表示位置を変えていくことで切り出し位置を定義します。