blog

1時間で新規WordPressを#getshifterするメモ

Shifter

クローズドベータから少し触っていたShifterをちゃんと使う機会がやってきたので、さくっと手順をまとめておきます。

慣れていれば1時間もあれば独自ドメインでShifterによって静的化されたWordPressサイトを立ち上げることができますよ。

※スクリーンショットは面倒なので撮ってません。

事前準備

※AWS Route53でもドメイン取得可能ですが、個人的にドメインの取得はお名前.comにまとめています。ドメイン登録できればどこでもOKです。

※独自ドメインを割り当てるので、Shifterのプランはpersonal以上を選択しましょう。月払いの場合$20/月、年払いの場合$15/月となります。

ドメイン取得・ネームサーバー設定

レジストラでドメインが取得できたら、ネームサーバーはとりあえずAWSのRoute53に設定しましょう。それが近道です。

お名前.comで取得したドメインをRoute53に設定するには以下の記事を参考に。

お名前.comで取得したドメインのネームサーバーをRoute53に変更しELB配下のWebページをドメインで引けるようにする – Qiita

取得したドメインでメール受信ができるようにする

Shifterでドメイン認証をする際にメール受信ができる必要があります。

わざわざメールサーバーを立てずとも、AWSのSESを使えば取得したてのドメインもすぐにメール受信ができますよ。

手順は以下。

  • Route53にドメイン登録
  • S3にメール受信用のバケットを作成
  • SESでドメイン認証
  • SESでメール受信設定(受信用メールアドレスは「admin@ドメイン」)

※SESは東京リージョンに対応していないので、バージニアリージョンあたりで設定しましょう。

今回はそれに伴ってメール受信用のバケットもバージニアリージョンにしておきました。

SESでメール受信してS3にメールを保存するには以下の記事を参考に。

[新機能]Amazon SES でメール受信が出来るようになりました! | Developers.IO

ちなみに、SESでメール受信するS3バケットには以下のようなバケットポリシーを設定しておかないと、SESで受信ルールを作成するときにエラーになりました。

{
 "Version": "2008-10-17",
 "Statement": [
 {
 "Sid": "GiveSESPermissionToWriteEmail",
 "Effect": "Allow",
 "Principal": {
 "Service": "ses.amazonaws.com"
 },
 "Action": "s3:PutObject",
 "Resource": "arn:aws:s3:::バケット名/*",
 "Condition": {
 "StringEquals": {
 "aws:Referer": "数字のAWSアカウントID"
 }
 }
 }
 ]
}

参考:Amazon SES に対する E メール受信に関するアクセス権限の付与 – Amazon Simple Email Service

Shifterにドメインを登録する

Shifterダッシュボードの、Project – Domainsにすすみ、取得しRoute53に設定したドメインを追加します。

なお、ドメインはネイキッドドメインではなくて、www.などのサブドメインを登録しましょう。

ドメインを追加すると、admin@ドメイン等のメールアドレスにAWSから認証メールが届きますので、SESでメール受信設定をしたS3バケットを確認します。

S3に保存されているメールのオブジェクト名はハッシュ値のような名前になっています。

テキストエディタなどで開いて、以下のような文章を探して下さい。

To approve this request, go to Amazon Certificate Approvals at
https://certificates.amazon.com/approvals?code=ここは認証コード
and follow the instructions on the page.

見つかったら、ブラウザにURLを貼り付けて開きます。

表示されているドメインが正しければ「I Approve」をクリックしましょう。

これで、AWSのACMのSSL証明書が使えるようになりました。

Shifterで初めてのWordPressプロジェクトを作成する

Shifterでは既存のWordPressをインポートすることもできますが、今回は新規のWordPressを作成します。

プロジェクトの作成が終わったら、Step 1: Start WordPress SiteでPHPのバージョンを選んで、StartをクリックしてWordPressを立ち上げましょう。

立ち上げるごとにURLが変わる編集用のWordPressで構築などを一通り終えたら、StopをクリックしてWordPressを止めておきましょう。

ShifterのWordPressを静的化する

Step 2: Generate your websiteより、Generateをクリックして編集用のWordPressを静的化します。記事の数にもよりますが、少し時間がかかります。

ShifterのCDNから配信する(完了)

Step 3: Publish websiteより、配信を行うCDNを選択します。

記事を書いている時点では以下の2つのCDNが選択できます。

  • Netlify
  • Shifter CDN

今回はShifter CDNを選択しました。

Shifter CDN CNAMEsに表示されているドメインを取得したドメインのCNAMEに設定すれば、独自ドメインよりShifterで静的化されたWordPressサイトの公開が可能となります。

Twitterのツイート時間がずれている?と思ったときに確認すること

Twitter

Twitterのミッションは、言語や文化などの障壁をなくして、思いついたアイデアや見つけた情報を一瞬にして共有する力をすべての人に提供することです。

https://about.twitter.com/ja/company より

つぶやいていますか?

私はここ数年、Facebookを使うことの方が増えました。

特定のツイートのタイムスタンプを知りたい

諸事情であるツイートがなされた時間を記録したいというケースがありました。

ツイートごとのタイムスタンプについては、「●●時間前」「●●分前」「●●秒前」と表示されているリンクをクリックすることで確認することができます。

ツイート時間がずれている?

そこで、ツイートの時間を見るとどうも時間が合っていない気がしました。

10数時間ずれています。

ツイッターアカウントのデフォルトタイムゾーン

ツイッターのアカウント設定を確認するとすぐに分かりました。

アカウント開設した直後だと、タイムゾーンは(GMT-7:00) Pacific Time(US & Canada)になっていました。

スクリーンショット 2016-08-09 14.19.51

タイムゾーンを日本時間に変更する

(GMT+9:00)Osakaか、(GMT+9:00)Tokyoにすることで日本時間となります。

 

誰かの参考になれば

 

 

 

[AWS] Lambdaで出力するCloudWatchログのログストリームURLをLambda内で取得する(Python)

contextオブジェクトにロググループ名とログストリーム名が渡ってきているので、マネジドコンソールのURLを組み立てているだけ。

エラー時にメールで飛ばしておけば、(割と)すぐに確認することができるかもしれません。

https://gist.github.com/mt8/2618e9db37145fb1ea09908a660f343c

実際の運用では、このURLをAmazon SNSに通知するなどしてメールやSlackに流しています。

Node.jsでも同じようなことができるはず。

 

参考:

Context オブジェクト (Python)

Context オブジェクト (Node.js)

 

 

[AWS] API Gatewayのリクエストステージ名をLambdaにパラメータとして渡す

とりあえず手順だけまとめておきます。

(各メソッド)統合リクエスト

  • マッピングテンプレートの追加
  • Content-Typeは、application/json
  • テンプレートに、{ "stage": "$context.stage" }

Lambda側(Python)

event['stage']で参照可能。

ちなみに

API Gatewayのテストボタンでのステージ名はtest-invoke-stageとなります。

参考

API Gateway API リクエストとレスポンスペイロードのマッピングテンプレートのリファレンス >> $context 変数へのアクセス

https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/api-gateway-mapping-template-reference.html

Hackers Champloo 2016現地レポート【DAY3】

Hackers Champloo 2016 3日目

沖縄県で開催されているHackers Champloo 2016に参加しています。

3日目、合宿最終日です。2日目のレポートはこちら

2日目は早めに寝ました。

朝焼けを見に行くために・・・(4時に起きました)

DSC05729

合宿最終日

ホテルに戻ったらすぐお仕事です。

皆さん3日目にしてこの集中!すごい。

DSC05848

ランチ

本日のランチも「情報を育てる」という視点で作られた、 自律的なチームのためのドキュメント共有サービスesaを開発・運営されている合同会社 esa様がランチスポンサーとしてご提供して下さっていました。ありがとうございます!

DSC05851

DSC05852

ランチ後

一部残っていた案件の調整を行い、目標としていた開発は80%終わりました。

そろそろ観光もしたくなってきたので、合宿開発はここで終了しました。

こんな景色を見にきました。沖縄いいですねえ。

DSC05927

開発合宿を終えて

ホテルに戻ってすぐに寝てしまい、合宿部屋のプチ打ち上げに参加できませんでした・・・申し訳ありません。

今回初めての開発合宿だったのですが、こんなに集中して作業できるとは思いませんでした。

何か成果を公開できる開発内容を持って来ればよかった・・・というのが唯一の後悔です。

実行委員の皆さん、合宿のお世話など本当にありがとうございました!

来年も参加したいと思いました!

最終日はカンファレンス

詳細はこちら→https://hackers-champloo.doorkeeper.jp/events/42325

フライトの都合上、昼過ぎには撤収しないといけませんが、最後まで楽しみにしています!

最終日もよろしくお願いします!

現場からは以上です。

 

Hackers Champloo 2016現地レポート【DAY2】

Hackers Champloo 2016 2日目

沖縄県で開催されているHackers Champloo 2016に参加しています。

2日目です。1日目のレポートはこちら

ウェルカムパーティの後はホテルの部屋で仕事の調整などを行いました。

明け方までいろいろやっていたら、外がいい感じの色になってました。

DSC05661

朝食

チェックイン時にもらっていた朝食チケットで食べました。

リゾート感のある朝食会場でした。

DSC05662

朝食会場がオープンしてすぐ(6:40)だったのですが、何名か合宿参加者の方がいらっしゃいました。

結構種類が多かったのですが、寝不足なので控え気味に。

DSC05664

今日も沖縄はいい天気です。

DSC05668

ひたすら開発:午前の部

朝食後、電話対応・オンラインミーティングといういつも通りの流れになり部屋に閉じこもって作業しました。

部屋からの眺めがよく、意外と集中できました。

一瞬、開発スペースにも顔を出したのですが、再度呼び出しで部屋に閉じこもる・・・

DSC05669

昼食

合宿参加者向けのSlackチャンネルに「ビュッフェデプロイされました!」と実行委員の方から通知がありました。

続々とランチがデプロイされていきます。

DSC05670

DSC05671

DSC05672

本日のランチは「情報を育てる」という視点で作られた、 自律的なチームのためのドキュメント共有サービスesaを開発・運営されている合同会社 esa様がランチスポンサーとしてご提供して下さいました。感謝!

今回の合宿のしおりにもesaが使われていましたよ。今度使ってみたいと思います!

DSC05673

ひたすら開発:午後の部

 

引き続き、あちこちに連絡したりとなかなか集中できない状況でしたが、もくもくと開発を進めました。

個人的な目標は40%程達成しました。

お腹が空いたなあと思った時には19時を過ぎていました・・・

沖縄の19時過ぎ、明るすぎる・・・

DSC05700

日没・夕食

日が落ちてきました。夕日が綺麗に見える部屋でよかった。

少し涼しくなってきたのでベランダでもくもく作業。

DSC05705

DSC05714

夕食に出かけようとも思ったのですが、集中していたのとルームサービスができるようなので、ピザを注文しました。

ホテル敷地内にあるピザ屋さんが20分ほどで届けてくれました。

DSC05716

そんなところで、ただの日記みたいになってしまいました。

今日はミーティングが多く、部屋に閉じこもっての作業になってしまったのでもったいなかった・・・。

 

現場からは以上です。

Hackers Champloo 2016現地レポート【DAY1】

Hackers Champloo 2016 1日目

沖縄県で開催されているHackers Champloo 2016に参加しています。

2013年から開催されていて、2015年からはカンファレンスだけでなく開発合宿があるということなので急遽参加してみました。

※急遽の参加で実行委員の方々にはご無理をお願いしてしまい申し訳ありませんでした。

那覇空港

私は兵庫県神戸市からの参加で、関西国際空港から那覇空港にやってきました。

本格的な梅雨を迎えた本州と打って変わり、ど快晴で沖縄が迎えてくれました。

DSC05520

1時過ぎに到着したので、腹ごしらえ。まあ、沖縄そばになりますよね。

DSC05521

集合 > シャトルバスでホテルへ

昼食後、空港の窓から「空綺麗だなー」とか思いながら写真を撮っていたら集合時間の14:30が迫っていました。

DSC05524

集合場所には、大きな水槽があって、沖縄のカラフルな魚たちが泳いでいました。DSC05531

目印を発見したので一安心です。ここでバスに乗るメンバーの到着を待ちました。

DSC05536

全員揃ったところでシャトルバスでホテルへ向かいます。

DSC05541

50分ほどで会場となるホテル「EMウェルネスリゾートコスタビスタ沖縄 ホテル&スパ」に到着しました。

DSC05547

開発合宿用のもくもく作業スペースは、このホテルのギャラリースペースを貸し切って行われます。

DSC05548

DSC05549

ホテルの部屋、いい感じ

事前にホテルについて調べてなかったのですが、このホテルかなりいい感じです。

DSC05550

ベランダからの景色が最高(ちょっとオーシャンビュー)

DSC05553

オリエンテーション

17:00からオリエンテーションが行われ、実行委員の方々からご挨拶がありました。

そこで、今回は学生の方が参加していることを知りました。

学生のうちからこういったコミュニティーに参加するというのは、とても素晴らしいことですね。

そして、それを受け入れるイベントも素敵だなあと思いました。

ウェエルカムパーティへ

17:30にホテルを出発し、30-40分ほどでウェエルカムパーティの会場である、北谷町のビアライゼ (Beer Rize)に到着しました。(地ビール・クラフトビール!)

DSC05555

そこからは、まあご想像にお任せします笑

たくさん飲んでたくさん交流をしました。

DSC05571

ホテルへ戻る

21:00にウェエルカムパーティが終了し、ホテルに戻りました。

ちなみに今日は満月だったようで、ものすごく綺麗な月が見れましたよ。

DSC05619

部屋のベランダからの夜景もいい感じです。

DSC05660

というわけで1日目終了なので、私の目標など

今回、このイベントは開催の1週間前に知りました。

いろいろ期限が迫っている中タスクを消化できない状況にありまして、とりあえず以下を達成することが今回の目標です。

  • 納期が迫っている案件のタスク消化(×3)
  • 公開しているWordPressのCIをいい加減導入する(本当はクライアントワークで作ったプラグインなのですが、日の目を見ることがなくなってしまい、放置していたらいつの間にかユーザーさんが増えて、ちょこちょこお問い合わせが来る様になったので、いい加減なんとかせねば・・・という訳です)
  • 沖縄の方と交流する

どれだけ達成できるか分かりませんが、集中モードで頑張りたいと思います。

最後に、今回参加を許してくれた妻に感謝の意を表して締めくくりたいと思います。

現場からは以上です。

(明日も酔っ払ってなかれば書きます)

ブラウザ(Google Chrome)に保存したパスワードを忘れた時に調べる方法

Google Chrome

使ってますか?Googleのブラウザ。最近もっさりしてきたと聞きますが、あんまり拡張を入れずに使っている私はとくにもっさり感は味わっていません。

速度も速いし、GoogleアカウントでログインしていればMac Book と、iPhone間で履歴やブックマーク(あんまり使わないが)を共有できるので便利ですよね。

要素の検証が便利

mt8では、いわゆるコーディングという作業は請け負っていないのですが、どうしてもフロント周りの動作を確認したり、デバックする時にはこのインスペクタ(デバッカー)がとても便利です。

パスワード保存も便利

最近ではログイン用のパスワードを1Passwordなどのツールを使うことで、極力パスワードを暗記したり使いまわしたりすることがないようにしていますが、クライアント様によっては、WordPressのログイン情報だったりを保存している方もいらっしゃいます。

当方で納品させて頂いたシステムなどであればよいのですが、引き継ぎ案件だったりすると調べようがなくて困っちゃいますよね。

保存されているパスワードを知りたい時はどうする?

たまに、こんな依頼があります。

いえ、よくあります。

パスワードって忘れがちですよね。

そこで今回は、Google Chormeに保存したパスワードを調べる方法について考えてみました。

答え:「検証」でいける!

できるかな?と思って試したら一発でいけました。

まずは、ログイン画面を開きます。(このログイン情報はダミーです)

スクリーンショット 2016-06-06 18.46.10

パスワードは、「**********」でマスクされているので、当然分かりませんよね。

そこで、パスワードの入力フォームで右クリックして「検証」を開きます。

スクリーンショット 2016-06-06 18.48.29

たくさんソースが表示されますが、パスワードの入力フォームにはtype="password"というコードがありますよ。

スクリーンショット 2016-06-06 18.51.37

このままでは「検証」でもパスワードが見れません。

そこで、type="password"を、type="text"に変えてみます。

そうすると、無事パスワードを確認することができました。

この場合は、「password」がパスワードでした。

※このログイン情報はダミーなのでアタックしないで下さいね。

スクリーンショット 2016-06-06 18.54.07

クライアント様に「ログインはできるんだけど、パスワードが分からなくて・・・」と言われたときはこの方法を教えてあげるか、実際にやってあげましょう。

よいパスワードライフを!

***FBでコメントをもらいました***

Chromeの設定 → 詳細設定を表示 → 「パスワードを管理」 → 保存したパスワード → 「見たいパスワードをクリックして」表示ボタンをクリック → OSのログインパスワードを入力

で簡単に見ることができました・・・。

PhpStormでLaravelのコード補完を有効化する

PhpStormでLaravel

VirtualBox + VagrantでLAMP環境を整えて、Laravel5.1でお試し開発をしようとしていたときのことです。

普段の開発はWordPressのプラグインや、ノンフレームワークなPHPシステムの保守なので、NetBeans IDEを使っています。(これで十分)

NetBeansのLaravelプラグインも、Laravel4に関しては見つかったのですが、Laravel5に関しては見つかりませんでした。

そこで、ライセンスを買ったまま特に使うことのなかった、PhpStorm IDEを使って見ることにしました。

 

コード補完がされない

lp

Routeファザードが、”Undefined class”となっています。

このままではいろいろ不便なので、IDEの恩恵を受けるべくコード補完の設定をしてみました。

 

laravel-ide-helperと、_ide_helper.php

Laravelのコード補完に必要なオブジェクトをIDEに読み込ませるPHPファイルがGitHubに公開されていました。

Gitのlaravel-ide-helperはComposerでインストールするようですが、今回はGistにある_ide_helper.phpを使ってみました。

 

_ide_helper.phpをダウンロード

PhpStorm内のターミナルを開きます。

pl3

ダウンロードするために、以下のコマンドを入力します。

(プロジェクト内のどこかにphpファイルを保存すればOK)

wget https://gist.githubusercontent.com/barryvdh/5227822/raw/4d4b0ca26055fa4753b38edeb94fad2396c497c0/_ide_helper.php

lp4

これで、クラスが認識され、コード補完もできました。