Logical Rabbit.

さくらのVPS

備忘

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 を見るようになりました

CentOS 7でBB無線ルータを組んだ時、無線LANから有線LANへWoL信号を飛ばしたい。

CentOSでイチからBB無線ルータを構築した際、ポートを越えてWoL(Wake on LAN)信号を飛ばす方法がようやく分かったのでメモ。…これでいいんだよ…ね?

前提条件

  • CentOS 7を2ポート有線LAN+無線LANのマザーボード(MSI製 Z97I AC)にインストールしてBBルータを構築
  • 有線LANの1つ目をインターネット側光ケーブルのOSUに接続、有線LANの2つ目と無線LANはイントラネットとして設定
  • イントラネットは基本的にdhcpdによるIP払い出し、主要なマシンのみIP固定
  • 有線LAN(イントラ)と無線LANは同一セグメント

方法

  1. /etc/dhcp/dhcpd.conf にて、DHCPにおいてMACアドレスとIPアドレスを固定で紐づける
  2. arp -s <IP address> <MAC address> としてARPテーブルにおいてMACアドレスとIPアドレスを固定で紐づける
  3. firewall-cmd --add-port=9/udpとしてWake on LANが使用するポート番号9(UDP)を解放する
  4. Wake on LANするときは対象マシンのIPアドレスとポート番号を指定して送信する(同一ポート上で実行する場合はブロードキャストモードで送信するか、IPアドレスとしてブロードキャストアドレスを指定して送信している筈)。

firewalldでMACアドレス指定の信号をポート間で通すとか、ブロードキャストを通すとかできれば済むような気はしていたのだけど、私の実力じゃ調べきれず、結局この方法で解決できたのでまあ良しとしたい。ポート9(UDP)がフル解放されている気がしないでもないが…うぅむ?

arpテーブルに気付いたのは、対象マシンを止めた直後であればWOLが通るので、もしかしてIPアドレスが誰に割り振られているのか分からなくて迷子になってるんぢゃね? と。マシン停止直後だとDHCPのリースとか生きてるだろうから、その辺を固定化してやればいいんぢゃね? という具合。

なおCentOS 7だとarpではなくip neighを使うべきらしいのだけど、Blogに纏めるにあたり試してみたもののこちらのコマンドでテーブルに追加する方法がうまくできず断念したなど。

本当はWake on LANのマジックパケットの仕組みとかから調べ始めていたのだけど(うまく通過できないから専用のサーバ立ててしまえばいいんじゃね、とか思った)、この辺りって軽くググった程度だとうまく見つかりませんね…? まあ結局無駄なこと調べていたっぽいけど。

購入検討中の書籍メモ (2016.09)

…という名目のアフィリエイトリンク集。実際に買うか、いつ買うかは未定だけど気になっている本。全て電子版あり。実際に買ってレビューする気になったら別記事に分けると思われ。

ユーザーストーリーマッピング

実装技術というよりその1段上、ハンドリングとかディレクション系の本と理解。個人事業もしくは零細企業規模の職場でシステム開発をすると、どうしても発注主の意図を汲みつつ方向性をまとめたり調整したりする必要が発生するので、たぶんまとめて全体を把握した後、後々まで読み返すような使い方になるんじゃないかなー、と期待してます。

未購入(物理書店で軽く内容把握)、AmazonのほかオライリーのEbook Storeで販売中。

開眼!JavaScript

発行はかなり前なんだけどそういえば未読だったし、JavaScriptはどうしても「なんとなく」で使って覚えてしまっている部分が多いので、たまに基本を読み返すのに良いかな、と思った次第。ページ数も少なく、気になるところだけ流し読みするのにも良さそうだし。詳細は「JavaScript」とかをあたることにして、全体の復習はこちらで随時行う方向で。

未購入(物理書店で軽く内容把握)、AmazonのほかオライリーのEbook Storeで販売中。

現場でかならず使われているjQueryデザインのメソッド

個人事業やるようになって、やはりjQuery等でお手軽かつ見目良くWebサイト開発する需要は高いなぁと思うと同時に、自分自身のデザインバリエーションが少ないことを痛感してます。なにせ今まで「動けばよい」の世界というか「チェックマトリックスでテストできることが最優先のデザイン」の世界だったので「画面幅によってデザインが変わる」ような一般的な設計とは縁遠かったわけで(設計書どおりのデザイン配置にならないのはバグなので、画面幅を強制固定するのが正道、TABLEレイアウトこそ至高、の世界)。

デザイン(動き)さえ分かれば技術的には自分で考えて実装できると思うのですが、まあ使えるスペアタイヤがそこに転がっているのに使わない手も無いだろうと。

ということでサンプル集的な用途を期待。Webで色々見つけてくるのも、技術検証とか著作権確認とかが面倒になってきたから。

未購入(物理書店で軽く内容把握)、Amazon kindle版あり。