朝霞市在住のWEB系エンジニアかあさんのPHPメインの雑記帳

ITかあさん

最新記事

WP REST API と OAuth 2 認証をjQueryだけで実現

忘れてた!WordCamp Tokyo2016 ブログに書くの忘れてた

スクリーンショット 2017-01-13 12.10.13
そうなんですよ、自分WordCamp Tokyo2016に登壇させてもらって散々はしゃいで、JavaScript祭の準備で忘れてましたがちゃんとブログにも載せておきたいと思います。そのあと怒涛の案件ラッシュで年末も280時間ほど稼働してましたのでブログなんて全く関わる余裕がありませんでした。余裕が少しできたので自分のメモとしても大事に残しておきたいと思います。

WP REST API と OAuth 2 認証をjQueryだけで実現するお話

どんな内容だったかは、スライドを見ていただければと思います。

テストアプリケーション

補足解説と省略部分の追記

Gistにソースコードもあるし、テストアプリも登録含めて公開しているのでスライドと合わせて確認してもらえればOKかと思いますが、導入方法・セットアップの補足解説について解説します。

最低限設定しなければならないこと

スクリーンショット 2017-01-13 10.46.56

スクリーンショット 2017-01-13 10.59.52

有料版を導入するとClient IDとClient Secretが確認できるようになります

スクリーンショット 2017-01-13 11.16.44

どのサイトでOAuth 認証を使うかを設定できます。逆にここで設定していないドメインでは認証することができません。

スクリーンショット 2017-01-13 12.10.13

まだこの状態ではクロスドメインの問題でOAuth 2を設定したサーバーと違うドメイン環境で動くWordPressでは認証することができません。
headerに追記の必要があります。(詳しくはスライドのP41と42を確認してください。)WP OAuth Serverをインストールしている方のサーバーに記載してあげます。
もちろん全体に公開することもできるし、指定したドメインだけが使うことができるようにもできます。

WP OAuth Serverはすごいぞ

まだまだ知られていないプラグインなのが残念ですが、OAuth 2認証に対応しているプラグインとして素晴らしいクオリティです。
例えば今回はWP REST APIとの連携をやってみたのですが、あくまでWP OAuth Serverは認証の仕組みでしかありません。
故に、会員登録と認証の仕組みはWP OAuth ServerをインストールしたWordPressで行い、その会員情報を扱うのはWordPressですらなくても大丈夫なのです。
会員向けコンテンツ、グループサイトの共通認証の仕組みなどアイディア次第で色々なサイトを作ることができますね。
5000円と少しお値段がかかりますが、ぜひお試しアレ!

Marmaid.jsで書くシーケンス図

mermaid.jsで描くシーケンス図

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-0028-11-25-12-42-20

無料のシーケンス図作成ツールでかあさん史上最強(多分)

以前当ブログでも紹介したmermaid.jsが素敵すぎて今DFDやらシーケンス図の作成にはmermaid.jsを愛用。
自分はブログで紹介した通り、Atomエディタの中でパッケージ追加してエディタの中でプレビューして使ってますが、
オンラインエディタも用意されているのですぐ使ってみようという方はオンラインエディタもおすすめ。

もちろんオンラインエディタで作った図をPNGやSVGでダウンロードも出来ます。

何回かに分けてmermaid.jsで作れるUMLの紹介をしていきたいと思います。

今回はmermaid.jsで作るシーケンス図について。

基本のシーケンス図

2つのオブジェクトがあり、メッセージの送信とそれに対するレスポンスというシンプルなシーケンス図をサンプルに用意しました
シーケンスサンプル

オブジェクトは最初に定義するのではなく、
A->B というようにアロウを用意してあげるだけで2つのオブジェクトが画面上に用意されます。
ですからシーケンスを書く時はどこのオブジェクトに送るかを意識するだけでシーケンス図を書くことが出来ます。

オブジェクトとオブジェクトを繋ぐアロウの書き方

表示 表記 要素
A->>B: message メッセージ
A–>>B: message 応答
A–xB: message 応答 終了
A-xB: message メッセージ 終了
A-B: message 実線のみ(アロウなし)
A–B: message 点線のみ(アロウなし)
Note right of [A]: message [オブジェクト]の右側にメモ

データの送り先を自分自身にすることも出来ます。

複合フラグメント

複合フラグメントの種類とはループやif、ブレイク、処理の中断、相互作用などデータの流れだけでは表現仕切れない高度(?)な処理を表現するのに使います。
mermaid.jsで簡単に書くことが出来ます。

複合フラグメントをmermaid.jsで書く際注意することは必ずループやifの複合処理では終わりに必ずendで終わりを示してあげることです。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-0028-11-25-12-40-25

表示 表記 要素
loop loop … 〜 end 「…」はループ名 ループ
alt alt … 〜 else … 〜 end 条件分岐
opt opt … 〜 end オプション

複合フラグメントの入れ子

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-0028-11-25-12-42-20

mermaid.jsで実現できないこと

簡単なシーケンス図はmermaid.jsで作れますが、より厳密なUMLにのっとった書き方はできないようです。
例えば
・ライフラインの消滅
・同期/非同期
・ファウンドメッセージ
・ロストメッセージ

複合フラグメントに関してはメッセージの流れを囲ってあげるだけだから全て実現できる(はず。。全部やってないのであれですが)

作業ブランチ間違えた!git stashで退避の使い方まとめ

あ。作業ブランチ間違えた!git stashで退避の使い方まとめ

git

忘れてしまいがちなgit stash

commit checkout add が利用頻度高いgitのコマンドかな。
私はその次によく使うコマンドがgit stashでして、

ッアー!作業ブランチ間違えたー!

っていう時に使えます。

stashをして変更分を退避して移動したブランチでcommitをする

STEP1:git stashで一時退避

git stash

or

git stash save "message"

git stashだけでも良いですが、stashに名前をつけて複数 退避させたコードがあると管理しやすいです

STEP2(1):checkoutして退避したコードをマージ

git stash popで最後に退避させたコードをマージすることができます。

git checkout your-branch-name
git stash pop

STEP2(2):stash番号を指定して退避したコードをマージ

最新の退避コードではなく、複数の退避させたコードのうち、番号または名称を指定してマージする方法です

stash一覧を確認
git stash list
stash@{0}: WIP on your-branch-name3: 652br4e あああああ
stash@{1}: WIP on your-branch-name2: wwde12e いいいいい

stash番号を指定してマージ

git stash pop stash@{1}

基本的な使い方は、stashして退避させ、正しいブランチに移動してからstash pop で退避したものを戻します。

その他使いどころとして、まだ実装方法が明確に決まっていない時に仮で作ったものを一時的にとっておくという使い方もできますね。

その他 stashの使い方

退避コード一覧

git stash list

以下コマンドの【】の中はlistで表示されたstash番号を指定

退避のファイルの一覧

git stash show 【stash番号】

git stash show stash@{0}

退避の変更内容を表示

git stash show -p 【stash番号】

(git diffのように表示される)

退避の削除

//全削除
git stash clear
//全削除
git stash drop 【stash番号】

git stash drop stash@{0}

AtomエディタでシーケンスもDFDもガントチャートも書ける!?mermaid.js

AtomエディタでシーケンスもDFDもガントチャートも書ける!?

みなさんエディタは何使ってます?私はここ2年くらいはAtom使ってます。WindowsにもMacにもLinuxでも使えるから大好き。

シーケンスもDFDもガントチャートも書けるmermaid.js

mermaid.jsはJavaScriptで作られたシーケンスやフローチャート、Ganttもこれ一つで全部作れる素敵ライブラリです。

mermaid.js 記法

graph LR
A–>|text|B

untitled-mmd
けれども あろうことか私DFDなんかはエクセルで作ることに慣れてしまったため、astah* UMLみたいなドラッグ&ドロップでフロー図が作れるWEBツールを探してたんですが、
Atomのアドオンでmermaid.jsがプレビューできるパッケージがあるというので早速インストール。
(これアドオンにしようと思った人、天才なんじゃなかろうか)

Atomで使えるなら、mermaid.jsやるっきゃない!

まだダウンロード数それほど多くないようですが、使いやすいです

使い方

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-0028-11-09-14-13-13
パッケージ追加後、Atomエディタ上で右クリック→Mermaid Previewでプレビューが立ち上がります。
後の記法についてはmermaid.jsの公式を確認するのがいいです。

サンプル

untitled-mmd2

sequenceDiagram

participant Alice

participant Bob

Alice->John: Hello John, how are you?

loop Healthcheck

John->John: Fight against hypochondria

end

Note right of John: Rational thoughts prevail…

John–>Alice: Great!

John->Bob: How about you?

Bob–>John: Jolly good!

untitled-mmd3

gantt

dateFormat YYYY-MM-DD

title Adding GANTT diagram functionality to mermaid

section A section

Completed task :done, des1, 2014-01-06,2014-01-08

Active task :active, des2, 2014-01-09, 3d

Future task : des3, after des2, 5d

Future task2 : des4, after des3, 5d

section Critical tasks

Completed task in the critical line :crit, done, 2014-01-06,24h

Create tests for parser :crit, active, 3d

Future task in critical line :crit, 5d

Create tests for renderer :2d

Add to mermaid :1d

来月あたりからまた設計やドキュメントがメインの仕事になりそうなのでUMLツール調べていたけれど、
エディタで管理することに爽快感を感じるとは!
確かにエディタで管理することが容易だとgitでのバージョン管理も容易だし、
Atomでそのままマークダウンでドキュメントを書くのにも使いやすいかも!
mermaid.js 記法が独特だから今後ブログにもまとめて行こうっと。