みなさんエディタは何使ってます？私はここ２年くらいはAtom使ってます。WindowsにもMacにもLinuxでも使えるから大好き。
mermaid.jsはJavaScriptで作られたシーケンスやフローチャート、Ganttもこれ一つで全部作れる素敵ライブラリです。
けれども あろうことか私DFDなんかはエクセルで作ることに慣れてしまったため、astah* UMLみたいなドラッグ＆ドロップでフロー図が作れるWEBツールを探してたんですが、
Atomのアドオンでmermaid.jsがプレビューできるパッケージがあるというので早速インストール。
（これアドオンにしようと思った人、天才なんじゃなかろうか）
まだダウンロード数それほど多くないようですが、使いやすいです
パッケージ追加後、Atomエディタ上で右クリック→Mermaid Previewでプレビューが立ち上がります。
後の記法についてはmermaid.jsの公式を確認するのがいいです。
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!
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図作成って何使ってます？何か有料で有名なソフトありましたけど何だっけ？思い出せないや。
テーブルの設計書は未だエクセル使われているケース多いと思いますけど、エクセルで設計書作っただけだとテーブル同士のリレーションがわかりにくのでER図、かあさん欲しいです。できれば無料のツールがいいです。
JavaScriptベースで動いているからダウンロードしたらindex.htmlをブラウザから開けばすぐ使えます。（何その素敵仕様）
保存はSave in Browserボタンを押し、呼び出しはLoad from Browserを押します。幾つか保存してある場合はList from Browserボタンを押して一覧表示します。
楽しいし、便利だし、直感的なER図！多分あたし 次ER図書く機会あったら徹底的にこの子使うかも！
奥さん、ありましたよ！
JavaScriptベースで動いておりますゆえ、ダウンロードしたらすぐにブラウザから確認出来ます。
おもしろいのが、フォームでスキーマ入力→JSON表示だけではなく、逆もOK!っていうところ。
JSONを修正して、updateボタンを押すとスキーマ入力のフォームまで変更されるっていうこと。
gitからダウンロードしてdemo.htmlを直接JSONのデフォルト値を変更してあげればすぐに自分のWEBサイトにも取り込めそうですね
気づけばITかあさんも初めて４年以上経過しているのですね。大した更新数でもないにもかかわらず、気づけば「いいね」数が３５０件を超えていて、本当にありがとうございます。来年も のんびり頑張りたいと思います。
そんなわけでITかあさんが今年お世話になったツール等を紹介しておきたいと思います。
VirtualBoxとセットで使う、仮想環境構築ツール vagrant。自分でvagrantファイルをゴリゴリ書いたりするわけではないものの、公開されているvagrantファイルを使って仮想環境を作ってます。外付けHDDに何個仮想環境作っているんだろう。ブログのバックアップもクライアントからの案件の環境も、今はvagrantを使っているし、これがないと今は生きて行けないくらいマストなツールになりました。
cakePHPもWordPressも今やcomporserでインストール出来る時代だし、フレームワークのプラグインの管理はcomporserがやはり一番楽。よく使うcakePHPのプラグインリストは同じcomporser.jsonにまとめておいて、追加したいプラグインは後からcomporser.jsonに追記すればOK。vagrantとセットで無くてはならない存在になりました。
かあさんこう見えて20歳からIT業界におりますのん。なのに存在自体を知っていながら、全く触れる機会がなく割と最近まで生きてきました。。
Selenium IDEはFirefoxのアドオンとして提供されており、導入も非常に簡単。WEBアプリのテスト自働と言わず、例えば画面のキャプチャを自働で撮ったりも可能なので、実はWEBデザイナーにもオススメです。（今度活用方など記事に書きます）
円安の影響で年間利用料金18000円くらいになったんですが、それなりにクオリティの高いスライドが作れるようになり、スライド中に動画の埋め込みも出来るので個人的にはかなりオススメです。おそらく今後の勉強会のスライドもこれで作っていきたいなあとおもっています。
もう少しお手頃な価格のプランもあったはずなので、ぜひ。
気づけばフリーランスエンジニアになって２年目が終わろうとして、ようやく自分のワークスタイルが決まって来た感じです。
ありがたい事に仕事の半分は勉強会や、コワーキングスペースで知り合った方から頂いている感じです。
来年は受注業務だけでなく、自分の媒体を作って運用していくことをしたいなあと思います。
来年もITかあさんをどうぞよろしくお願いします
去年末に紹介したTopCoatについて調べものをしていた時に偶然見つけたIntel® XDK。ドラッグ&ドロップでPhoneGapベースのアプリケーションが作成出来るIntel® XDKというすんごいツールを見つけました。
パーツをドラッグ&ドロップだけで配置。HTMLのコードを書かなくてもアプリ側のUIを作ることが出来ます。
去年、TwitterBootStrapのWEBツールで同じくドラッグ&ドロップでUIを作成出来るツール、JetStrapを紹介しましたが、それと同じような感じです。
有名どころ、流行りどころのCSSフレームワークから基本のスタイルを選ぶことが出来ます。ドラッグ&ドロップのデザインの基本もここで選んだスタイルが適用されます。私が個人的に大好きなTopCoatがドラッグ&ドロップで選べるのが嬉しいです！
作ったアプリはXDKのエミュレート内で再生可能！デバイスが色々選べますが、基本的には画面の幅のみが違うだけのようで、OSによる違いまでは再現していないようです。
アカウントを作れば、サーバーアップまえにスマホに専用アプリをインストすれば、なんとビルド前に実機チェックも出来る！
あれもこれもなんでもビルドできます。XDKだけで。
PhoneGapでアプリ制作に興味のある方、WEB UIのさくっと流行りのレスポンシブCSSフレームワークで作りたい方、絶対オススメです！
今のところ利用に関しては無料っぽいです。超オススメ！
読んで字のごとくMacでサイトをマルっとダウンロードする方法をメモしておきます。
かあさんはよく過去に自分が作ったサイトのコピーを静的にダウンロードして、CSSをカスタマイズすることがあるんですが、Win環境でwebサイトエクスプローラーを愛用していたものの Macでもあるかな〜と思っていたら便利なものがありましたよ。
使用感はほぼwebサイトエクスプローラーと違いはありません。URLを指定してEnterキーを押して、読み込みが終わった段階でDownloadボタンを押すだけ。しかも無料です。
Settingから、サイトのダウンロードファイルの保存先を指定することが出来ます。私の場合、デフォルトで「ダウンロード」フォルダになっていました。
さくっとダウンロードしたい時に、今後もぜひ活用したいと思います。
ITかあさんです。もう私のことは忘れてしまいましたか、無理もありません。ここまでブログ放置したのは開設以来初めてで、独立してからめっちゃくちゃ忙しい数ヶ月をようやく乗り越え、やっとブログに向き合う時間が出来ました。放置した数ヶ月分の知識を吐き出していきたいと思います。
元WEBデザイナのくせに今や一切デザインしたくないITかあさんとしては、下手にデザイン考えるくらいならTwitterBootstrapを始めとしたおしゃれなCSSフレームワークを使ってデザイン及びコーディング時間を削減して、プログラミングに時間を費やしたいです。
TwitterBootstrapは便利だしおしゃれなんですが、それ相応のTwitterBootstrapの知識も必要ですが、Jetstrapは多少のHTMLの知識さえあればドラッグ&ドロップだけでTwitterBootstrapを使ったサイトを作ることが出来ます。
ちょっと次回のプロジェクトで使ってみようかな〜と思いつつ、簡単にその使い方を紹介します。
基本となるレイアウトを選べます。用途と目的によって、大まかなレイアウトを選べるので便利！
後はドラッグ&ドロップでパーツを配置していくだけ！
出来上がったレイアウトはダウンロード出来ます。
ドラッグ&ドロップだけで出来るっていうだけでポイント高いんですが、ポイント高いな〜と思うところがいくつか。
Dreamweaverにもありますが、Jetstrapのツール上でタブレット、デスクトップ、スマートフォン、ノートパソコンの表示領域での確認が可能です。
配置後にオプション設定可能です。class、idは後から追加設定出来るから、上の画像のようにicon-whiteで白いアイコンにすることも画面上で出来ちゃいます。
もちろんコードビュー・編集も可能だから、してから自分でスタイルを追記することだってJetstrap上で出来ちゃうから素敵！
有料版もあって、Jetstrap上でたくさんのサイトを管理したい場合は有料版を使うことをオススメしますが、とりあえずさくっと使ってみるだけなら無料版で ほぼ全ての機能が使えるみたいです。
デザイン・コーディングの短縮にぜひっ！
XpathとはDOM要素の指定のことで、あるHTMLの要素を指定するのに使います。
idやclassだと
とか書いたりしますが こんな風にスラッシュ切りになっていたりします。
試しになんですが、このサイトの右カラムのメニューを拾ってみたいと思います。
まずはFirebugを通常通り起動してXpathが欲しい要素を選択
右クリックでXpathコピー これだけ。
Xpathの指定はFirebugを使えば簡単なのは分かるのですが、そのままではjQueryと一緒に使うのは難しいようなので、プラグインを使うと簡単になりそうです。
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タグを取得するには
先ほどの
これを
このようにするだけ。
[2]とか[3] これが○○番目だよ！という指定なので、[○○]の指定を外せば 全て拾うよ ということになりますね。
この便利なXpathの指定ですが idやclassを度外視していますので やや効率が悪いケースも出てきます。近くにclassやidがあればそれを使うのが正しいですが、
変なテーブルコーディングに出くわしたり 入れ子になったものの、○○番目の子要素が欲しい！など、
複雑な要素の取得に便利に使えそうですね
HTML5のマークアップのバリデーションツールでいいのが無いかな～と思っていたら、ありましたよ、いいカンジのが
個人的にはW3C本家のHTML5バリデーションよりも好きです。
URLまたは、ソースコード、ファイルのアップロードでバリデーションしてくれます。
以下はITかあさん初めてのHTML5マークアップサイトをバリデーションしてみた結果です。
メタが間違っているのと、画像のalt属性が無いのを怒られてしまいました
ソースコード版からも間違いの箇所を黄色で教えてくれます。
URL指定で手軽に使えるので、皆さんもぜひ！
多くのWEBデザイナーやWEBプログラマーはInternet Explorerのチェックに『IETester』を使っていることでしょう。私はスタンドアローン版を使っていたこともありますが、WEB業界に入ってからというもの、IETesterのお世話になりっぱなしでしたが、この度WEBオーサリングツールMicrosoft Expression Web 4 SuperPreviewというMicrosoft純正のWEBオーサリングツールを知ったので早速使ってみました。
特徴
Microsoft Expression Web 4 SuperPreviewのほかに先にMicrosoft .NET Framework 4がインストールされているいつ要があります。
無事Microsoft .NET Framework 4をインストール完了したら、続いてMicrosoft Expression Web 4 SuperPreviewをインストールします。
後は指示に従ってインストールを完了させます。
使ったカンジをキャプチャ動画にしました。ざっと確認がてら、どうぞ。
WEBデザイナーが自分のコーディングを確認するのには最適。
しかし、イマイチJavascriptがちゃんと動かないなどJavascriptのデバックには不向きでした。
IETesterでもJavascriptは正確に動かないケースおあるので、スタンドアローン版が一番いいのかな、と過去を振り返ってみるかあさんなのでした。