便利ツール ITかあさん

ITかあさん

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にのっとった書き方はできないようです。
例えば
・ライフラインの消滅
・同期/非同期
・ファウンドメッセージ
・ロストメッセージ

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

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 記法が独特だから今後ブログにもまとめて行こうっと。

ER図作成のWebアプリwwwsqldesignerが素敵!

ER図作成の神ツール!wwwsqldesigner

wwwsqldesigner

みなさん ER図作成って何使ってます?何か有料で有名なソフトありましたけど何だっけ?思い出せないや。

テーブルの設計書は未だエクセル使われているケース多いと思いますけど、エクセルで設計書作っただけだとテーブル同士のリレーションがわかりにくのでER図、かあさん欲しいです。できれば無料のツールがいいです。

ありました

GitHubで配布もされてるー

JavaScriptベースで動いているからダウンロードしたらindex.htmlをブラウザから開けばすぐ使えます。(何その素敵仕様)

wwwsqldesignerざっくり使い方

wwwsqldesigner

Add tableボタンでテーブル追加。フィールドの追加と削除、もちろんキーの追加、削除もできる

wwwsqldesigner外部キー

もちろん外部キーの追加も。postsテーブルのidに外部キー追加の場合、postsテーブルのidフィールド選択した状態で、 Create foreign keyボタンを押して、外部キー追加したいテーブルをクリックするだけ

出来上がったER図はSQLの生成も可能!

SQLの生成

保存とロード

保存はSave in Browserボタンを押し、呼び出しはLoad from Browserを押します。幾つか保存してある場合はList from Browserボタンを押して一覧表示します。

楽しいし、便利だし、直感的なER図!多分あたし 次ER図書く機会あったら徹底的にこの子使うかも!

JSON のインプット&アウトプット「json-editor」が神すぎる件

JSON スキーマとHTMLフォームの連動が神すぎるjson-editorが神すぎるぞ

スクリーンショット 2016-01-14 15.35.49

jsonのスキーマをWEB上でformでリアルタイムに変更する仕組みを自分のサイトに導入する方法ないかなあ。作るのはめんどいなあ

奥さん、ありましたよ!

こちらがダウンロード直後のキャプチャ

JavaScriptベースで動いておりますゆえ、ダウンロードしたらすぐにブラウザから確認出来ます。
スクリーンショット 2016-01-14 15.41.29

スキーマ入力するフォーム側 もちろんスキーマの項目追加も思いのまま!

スクリーンショット 2016-01-14 15.41.37

フォームで入力されたスキーマが反映た結果(JSON)

おもしろいのが、フォームでスキーマ入力→JSON表示だけではなく、逆もOK!っていうところ。
JSONを修正して、updateボタンを押すとスキーマ入力のフォームまで変更されるっていうこと。

gitからダウンロードしてdemo.htmlを直接JSONのデフォルト値を変更してあげればすぐに自分のWEBサイトにも取り込めそうですね

ITかあさんが今年お世話になったツールなど

今年も一年ありがとうございました

このロゴを全く活用しないまま、今年も終わろうとしています
気づけばITかあさんも初めて4年以上経過しているのですね。大した更新数でもないにもかかわらず、気づけば「いいね」数が350件を超えていて、本当にありがとうございます。来年も のんびり頑張りたいと思います。

今年お世話になったツールなど

そんなわけでITかあさんが今年お世話になったツール等を紹介しておきたいと思います。

vagrant 仮想環境構築

Vagrant

ああ、もうこれ無いと開発出来ませんから。。

VirtualBoxとセットで使う、仮想環境構築ツール vagrant。自分でvagrantファイルをゴリゴリ書いたりするわけではないものの、公開されているvagrantファイルを使って仮想環境を作ってます。外付けHDDに何個仮想環境作っているんだろう。ブログのバックアップもクライアントからの案件の環境も、今はvagrantを使っているし、これがないと今は生きて行けないくらいマストなツールになりました。

comporser PHPのパッケージ管理

君は何ていい子なんだ..comporser

cakePHPもWordPressも今やcomporserでインストール出来る時代だし、フレームワークのプラグインの管理はcomporserがやはり一番楽。よく使うcakePHPのプラグインリストは同じcomporser.jsonにまとめておいて、追加したいプラグインは後からcomporser.jsonに追記すればOK。vagrantとセットで無くてはならない存在になりました。

Selenium IDE WEBアプリケーション テスト自働化

なぜ今まで自分自身が必要とする現場に居合わせなかったのか、むしろナゾ・・

かあさんこう見えて20歳からIT業界におりますのん。なのに存在自体を知っていながら、全く触れる機会がなく割と最近まで生きてきました。。
Selenium IDEはFirefoxのアドオンとして提供されており、導入も非常に簡単。WEBアプリのテスト自働と言わず、例えば画面のキャプチャを自働で撮ったりも可能なので、実はWEBデザイナーにもオススメです。(今度活用方など記事に書きます)

prezi プレゼンテーションスライド作成ツール

秋のjavascript祭で使ったスライド。preziの有料版を使って作りました。

円安の影響で年間利用料金18000円くらいになったんですが、それなりにクオリティの高いスライドが作れるようになり、スライド中に動画の埋め込みも出来るので個人的にはかなりオススメです。おそらく今後の勉強会のスライドもこれで作っていきたいなあとおもっています。
もう少しお手頃な価格のプランもあったはずなので、ぜひ。

まとめ:今年を振り返って

気づけばフリーランスエンジニアになって2年目が終わろうとして、ようやく自分のワークスタイルが決まって来た感じです。
ありがたい事に仕事の半分は勉強会や、コワーキングスペースで知り合った方から頂いている感じです。
来年は受注業務だけでなく、自分の媒体を作って運用していくことをしたいなあと思います。
来年もITかあさんをどうぞよろしくお願いします

ドラッグ&ドロップでPhoneGapベースのスマホアプリが作れる Intel® XDKが何かもうすごすぎる件。

PhoneGapベースのスマホアプリが作れる Intel® XDKがすごい

なんかもうすごすきるIntel XDK

ブログをまともに年内更新せず、ついに年が明けてしまいました。
明けましておめでとうございます〜今年もよろしくお願いします

去年末に紹介したTopCoatについて調べものをしていた時に偶然見つけたIntel® XDK。ドラッグ&ドロップでPhoneGapベースのアプリケーションが作成出来るIntel® XDKというすんごいツールを見つけました。

Intel® XDKのすごPoint

ドラッグ&ドロップだけでUIが作れる

XDK ドラッグ&ドロップ
パーツをドラッグ&ドロップだけで配置。HTMLのコードを書かなくてもアプリ側のUIを作ることが出来ます。
去年、TwitterBootStrapのWEBツールで同じくドラッグ&ドロップでUIを作成出来るツール、JetStrapを紹介しましたが、それと同じような感じです。

ソースコードからの編集もOK

人気のCSSフレームワークを選べる

有名どころのCSSフレームワークが選べる!

  • App Framework
  • Twitter Boot Strap (ver3)
  • TopCoat
  • jQuery Mobile

有名どころ、流行りどころのCSSフレームワークから基本のスタイルを選ぶことが出来ます。ドラッグ&ドロップのデザインの基本もここで選んだスタイルが適用されます。私が個人的に大好きなTopCoatがドラッグ&ドロップで選べるのが嬉しいです!

もちろんエミュレートも出来る!

デバイスを選んでエミューレート
作ったアプリはXDKのエミュレート内で再生可能!デバイスが色々選べますが、基本的には画面の幅のみが違うだけのようで、OSによる違いまでは再現していないようです。
HTML5のLocationのデバッグ機能ががが!

スマホに専用アプリをインストして、ビルド前にテストが出来る!!

HTML5のLocationのデバッグ機能ががが!

サーバーにアップして、ビルド前にテストが出来る
アカウントを作れば、サーバーアップまえにスマホに専用アプリをインストすれば、なんとビルド前に実機チェックも出来る!
専用アプリを通して実機で確認した様子

専用アプリを通してのデバックなら、iOS Developer Programを登録しなくても実機チェックが出来ます。
ちょっと試しにテストしてみたいけど、まだiOS Developer Programの有料登録してないや〜っていう時に大変便利。

もちろんビルドだってXDKから出来る

ビルドはスマホアプリだけじゃない

ビルドはスマホアプリだけじゃない….ってFacebookとかChromeとかAmazonとかソレ以外にもってもうわけわからん!

あれもこれもなんでもビルドできます。XDKだけで。

そんなわけで、XDKすごすぎのまとめ

PhoneGapでアプリ制作に興味のある方、WEB UIのさくっと流行りのレスポンシブCSSフレームワークで作りたい方、絶対オススメです!
今のところ利用に関しては無料っぽいです。超オススメ!

Macでマルっとサイトをダウンロードする方法


読んで字のごとくMacでサイトをマルっとダウンロードする方法をメモしておきます。

かあさんはよく過去に自分が作ったサイトのコピーを静的にダウンロードして、CSSをカスタマイズすることがあるんですが、Win環境でwebサイトエクスプローラーを愛用していたものの Macでもあるかな〜と思っていたら便利なものがありましたよ。

SiteSucker


使用感はほぼwebサイトエクスプローラーと違いはありません。URLを指定してEnterキーを押して、読み込みが終わった段階でDownloadボタンを押すだけ。しかも無料です。

読み込みの途中でもダウンロードを開始することが出来ます。

こんな感じで静的なファイルとしてサイトをダウンロード可能

Setting


Settingから、サイトのダウンロードファイルの保存先を指定することが出来ます。私の場合、デフォルトで「ダウンロード」フォルダになっていました。

さくっとダウンロードしたい時に、今後もぜひ活用したいと思います。

ドラッグ&ドロップでレスポンシブサイト!TwitterBootstrapBuilder Jetstrapがすごい!

エディタ不要!ドラッグ&ドロップでTwitterBootstrapを使ったレスポンシブWEBサイトが作れるJetstrap

ITかあさんです。もう私のことは忘れてしまいましたか、無理もありません。ここまでブログ放置したのは開設以来初めてで、独立してからめっちゃくちゃ忙しい数ヶ月をようやく乗り越え、やっとブログに向き合う時間が出来ました。放置した数ヶ月分の知識を吐き出していきたいと思います。

TwitterBootstrapは便利だよね

元WEBデザイナのくせに今や一切デザインしたくないITかあさんとしては、下手にデザイン考えるくらいならTwitterBootstrapを始めとしたおしゃれなCSSフレームワークを使ってデザイン及びコーディング時間を削減して、プログラミングに時間を費やしたいです。

ドラッグ&ドロップでTwitterBootstrapのサイトが作れる!

TwitterBootstrapは便利だしおしゃれなんですが、それ相応のTwitterBootstrapの知識も必要ですが、Jetstrapは多少のHTMLの知識さえあればドラッグ&ドロップだけでTwitterBootstrapを使ったサイトを作ることが出来ます。

ちょっと次回のプロジェクトで使ってみようかな〜と思いつつ、簡単にその使い方を紹介します。

Jetstrapの使い方

Jetstrapの公式サイトに行き、右上Loginボタンをクリックします。

ソーシャルでログイン

プラスマークをクリックしてプロジェクト名を記述する

基本レイアウト選択

基本となるレイアウトを選べます。用途と目的によって、大まかなレイアウトを選べるので便利!

後はドラッグ&ドロップ

後はドラッグ&ドロップでパーツを配置していくだけ!

レイアウトはダウンロード

出来上がったレイアウトはダウンロード出来ます。

ドラッグ&ドロップで出来上がった様子

Jetstrapお気に入りポイント

ドラッグ&ドロップだけで出来るっていうだけでポイント高いんですが、ポイント高いな〜と思うところがいくつか。

Jetstrap上で表示チェック

Dreamweaverにもありますが、Jetstrapのツール上でタブレット、デスクトップ、スマートフォン、ノートパソコンの表示領域での確認が可能です。

詳細オプション設定


配置後にオプション設定可能です。class、idは後から追加設定出来るから、上の画像のようにicon-whiteで白いアイコンにすることも画面上で出来ちゃいます。

もちろんコードだって!


もちろんコードビュー・編集も可能だから、してから自分でスタイルを追記することだってJetstrap上で出来ちゃうから素敵!

Jetstrapオススメです

有料版もあって、Jetstrap上でたくさんのサイトを管理したい場合は有料版を使うことをオススメしますが、とりあえずさくっと使ってみるだけなら無料版で ほぼ全ての機能が使えるみたいです。

デザイン・コーディングの短縮にぜひっ!

意外と知られていない、FirebugのX-pathコピー機能

意外と知られていない、FirebugのXpathコピー機能

FirebugでXpath

Xpathとはなんじゃらほい

XpathとはDOM要素の指定のことで、あるHTMLの要素を指定するのに使います。
idやclassだと

.hoge #hoge

とか書いたりしますが こんな風にスラッシュ切りになっていたりします。

/html/body/div[3]/

FirebugのXpathコピー機能の使い方

試しになんですが、このサイトの右カラムのメニューを拾ってみたいと思います。

カテゴリーの上から3番目をFirebugのXpathコピー

まずはFirebugを通常通り起動してXpathが欲しい要素を選択
FirebugのXpath
右クリックでXpathコピー これだけ。

コピーの結果

/html/body/div[3]/article/nav/ul/li[2]/ul/li[3]

XpathをjQueryで使う

Xpathの指定はFirebugを使えば簡単なのは分かるのですが、そのままではjQueryと一緒に使うのは難しいようなので、プラグインを使うと簡単になりそうです。

ぬわんと、スクレイピングでも使える

ITかあさんと言えばスクレイピング、いや、むしろスクレイピングかあさん

PHPスクレイピングの要素の指定にも使えるんです~

スクレイピングってなんじゃらほい?という方はこちらを参考に

include_once('./simple_html_dom.php');
  $html = file_get_html( 'http://www.kaasan.info/' );
//XpathでDOM要素の指定をする なお、ループ処理になるのでforeachを使う
  foreach($html->find('/html/body/div[3]/article/nav/ul/li[2]/ul/li[3] a') as $element){
  echo $element->href . '<br>';
  }

カテゴリー内全てのaタグを取得するには
先ほどの

/html/body/div[3]/article/nav/ul/li[2]/ul/li[3] a

これを

/html/body/div[3]/article/nav/ul/li[2]/ul/li a

このようにするだけ。

[2]とか[3] これが○○番目だよ!という指定なので、[○○]の指定を外せば 全て拾うよ ということになりますね。

補足

この便利なXpathの指定ですが idやclassを度外視していますので やや効率が悪いケースも出てきます。近くにclassやidがあればそれを使うのが正しいですが、
変なテーブルコーディングに出くわしたり 入れ子になったものの、○○番目の子要素が欲しい!など、
複雑な要素の取得に便利に使えそうですね

HTML5のマークアップバリデーションツール(X)HTML5 Validatorがいいカンジ

HTML5のマークアップバリデーションツール(X)HTML5 Validatorがいいカンジ

HTML5のマークアップバリデーションツール(X)HTML5 Validator

HTML5のマークアップのバリデーションツールでいいのが無いかな~と思っていたら、ありましたよ、いいカンジのが

個人的にはW3C本家のHTML5バリデーションよりも好きです。

使い方は超シンプル

URLまたは、ソースコード、ファイルのアップロードでバリデーションしてくれます。
(X)HTML5 Validator 使い方

お気に入りポイント1:エラー箇所をシンプルにお知らせ

以下はITかあさん初めてのHTML5マークアップサイトをバリデーションしてみた結果です。


メタが間違っているのと、画像のalt属性が無いのを怒られてしまいました

ソースコード版からも間違いの箇所を黄色で教えてくれます。
(X)HTML5 Validator

URL指定で手軽に使えるので、皆さんもぜひ!