探してもわからないということ

2015年も終わり、2016年もはや1ヶ月が過ぎてしまいました。
2015年のエントリが極端に少ないのですが、ぶっちゃけブログ書く暇もないぐらいコード書いていました。

Wakatimeというどれくらいコードを書いていたのかがわかるアプリがあるのですが、やばい時は一週間で100時間ぐらい書いててとんだブラックだな。。。と実感。今も60時間ぐらいなのでぶっちゃけ減らしたい。

コードをひたすら書いて痛感したあること

僕は大体フロントエンド、WordPress、PHP、Ruby on Rails、iOSアプリ、サーバーまわりなどWebで使うようなやつは一通り触ってきましたと思っています。

んで、大体上のようなやつって基本的に検索したら出てきますし、ドキュメントも豊富なんですよね。
実際コピペで済むような感じで済むものも多いですし、プログラミングも1つの言語しっかりやってればOKで他はその流用。問題が発生、わからないことがあった場合は基本的に探せばわかるスタンスでいましたし、解決した時の気分はコード書いている人であれば理解してもらえると思います。気持ちが良いもんです。承認欲求も満たされますよね。

でも、どうやってもわからないことにぶつかってしまいました。そしてそれが解決できない。1週間。。2週間。。1ヶ月。。。
検索しても出てこない、他の言語だったらできるのにできない、ドキュメントには書いてあるがそれはもはや低レイヤー過ぎて意味がわからない、使いどころがわからない。死ぬ。

わからないこと≠探せば見つかること

僕の場合は圧倒的に低レイヤーの知識が足りていませんでした。そして低レイヤーの問題は探しても見つかりにくい。なぜならばWebみたいにそこまでとっつきやすくないし、他のやり方、フレームワークがあったりするから。

音声を再生するという場合、だいたいmp4とかのデータを読み取るライブラリなどがあると思います。WebだったらAudioタグだったり、JSで操作したり。アプリであったら基本のフレームワークが解決してくれるはずです。でもそれがmp4ではない場合はどうでしょう?データが16進数だったら?どうやって再生すればよいでしょうか?

ネットワークであったり音声・画像・動画であったりそのような基本的にコアな部分ってあまり触る機会がないと思います。もう基本簡単に取り扱えるものなんですよね。でもそれって誰かが簡単にしてくれているだけであって、中身を自分でやろうとすると本当の意味で「わからない」になって襲ってきてしまうということが身にしみてわかりました。取っ掛かりがつかめないんですよね。

JSであればWebGLを取り扱うときに出てくるC、Obj-Cで出てくるCみたいな感じで突然出てくるもの。そういうものなんでしょうが、いきなり出てくる低レイヤーはほんとうの意味でわからないとそれを扱うのは非常に大変です。音声は波形だし、通信はソケットだしパケットだし???それどう使えばいいのかわからない。そしてそれがどう問題解決に役立つかわからない。誰も教えてくれないし探しても見つからないことだらけです。

研究者のメンタルを見習う

研究者の人たちってわからない、将来的にわからないままかもしれないことにチャレンジするじゃないですか。あのメンタルってただもんじゃないと思うんですよね。

僕の問題は1つは相談して解決できそう、もう1つは誰もわからなくて結局自分でわからないなりにやりまくってライブラリで頑張ってライブラリが終わりらへんで詰んで自分で実装するしかないみたいな感じで落ち着きそうなのですが、マジで心がバキバキに折れてるんですよね。ああ俺の実力なんてこんなもんですよね〜ああもう死にたい。みたいな。折れても立ち直れる心が欲しい。

おわりに

なんかよくわからなくなってきましたが、わからないことに突き進んでそれが解決するというモチベーションで頑張るっていうスタンスの見直しが僕には必要になってしまったという感じです。ひとそれぞれだとは思いますが、ネットでなんでもかんでも解決できるわけではないしそういったことこそ解決するために試行錯誤するしか無いという感じです。おわり。

Photoshop CC 2015 + GuideGuideでアートボードごとにガイドを引くと便利

最近リリースされたPhotoshop CC 2015で、ついにアートボードが搭載されました。
Sketchもたまに使うのですが、僕の場合はPhotoshopもイラレも開いて作業している場合が多くて、何してんだろうといった感じだったので素直に嬉しい感じです。

Sketchではアートボードごとにガイドが適当に引けて便利だったのですが、Psのガイドを作成するやつだと、いろいろおかしくて使い物になりませんでした。アートボードというものを認識していない感じ。

アートボードで作れれば便利なのになーと思って、今まで入れていたGuideGuideというプラグイン動くのかなと思ってたら、CC 2015用にアップデートされていました。そんでもって、便利なことにアートボードごとにガイドが引けるようにもなっていました。

使い方

GuideGuideからダウンロード、インストールし、Photoshopを起動。アートボードをクリック後、GuideGuideのパネル(なければ表示)からアートボードに合わせたグリッドが引けます。

作成例

上の画像のpsdファイル(2015じゃないとグループになります)

なんだかんだでPhotoshopから逃げられないな~と感じている今日このごろです。

WelcartでAdvanced Custom Fieldsを使うブックマークレットを作った

中小企業にとって、コストを抑えつつサイトを効率よく運営したいという要望を満たすCMSとして、良くも悪くもWordPressが最近では主流になってきていると実感しています。反面、それ本当にWordPressでやる必要ある?というものも数多く感じるようにもなってきました。でもやっぱりカスタマイズ前提な場合、すぐに実行に移せるWordPressのノウハウを捨てきることが出来ず、ずるずるWordPress頼みになってしまう現状です。

話がそれたような気がしますが、ECサイトの場合、ブログなどと分離するのが面倒だとか一元管理したい、カスタマイズしたいという場合にWordPressプラグインのWelcartを採用することがあり、そこでAdvanced Custom Fieldsが使えないため非常に面倒でした。
何度か要望は出してみたり、カスタマイズしてみたものの、数年間放置されたり頻繁にアップデートされたりいろいろ面倒だったので現在ではブックマークレットを使って処理しています。

ブックマークレットコード

javascript:(function (){var url = location.href,result = url.match(/&post=(.*)&/),protocol = location.protocol+'//',host = location.host+'/';location.href = protocol + host + 'wp-admin/post.php?post=' + result[1] + '&action=edit'})()

使い方

上記コードをコピーして、ブックマークレットとして登録してください。
(どこかのページをブックマークに登録し、ブックマークを編集画面からURLを書き換えると楽です。)

最初に商品登録画面から登録を済ませ、下書きで保存した後に、上記ブックマークレット発動させます。
商品登録画面ではない、通常のWordPress編集画面に移動し、Advanced Custom Fieldsで作成したカスタムフィールドが表示されます。
入力を済ませたら下書きで保存し、(公開でもうまくいくとは思いますが推奨しません)商品編集画面から公開をします。
自己責任でお願いします。何があっても責任は取れません。

なぜ動くのか

WordPressには投稿IDというIDが振られており、Welcartで作成した商品にもIDが振られています。そのIDにカスタムフィールドを結び付けてやるために、強制的に画面を呼び出し登録することで、Advanced Custom Fieldsのカスタムフィールドを扱うことが出来ます。

おわりに

Advanced Custom Fieldsのギャラリーだったり、繰り返しの中に繰り返しを作れたり、繰返しの中にギャラリーが作れたりするのが最高に便利。また、コンテンツ柔軟フィールドがConcrete5のブロックみたいな感じで非常にページを作るのに便利なのでECサイトのデフォルト機能として搭載してくれると嬉しい。

日本の場合やっぱり楽天メソッドのような縦型ページじゃないと売りにくいし、WordPressの場合、無闇矢鱈に画像を貼り付けるかカスタムフィールドを使わないとHTMLで組んでるのとおんなじになってしまうので、このような機能を使って意味のあるページを作成していき、気持ちよく買い物してほしいと最近は思ったりしてます。(なんでもいいのでWelcartには早く対応してほしい)

さよなら2014年

2014年も今日で終わり。
本当に2014年は忙しく、(毎年言ってる)こんな自分に仕事をまわしてくれる人々に感謝しかない。

2014年はtwitterを個人としてはじめてみたり、ブログを30記事ぐらいだけど投稿してみたり、githubを始めてみたりして、そこから交流することが出来て非常に楽しいという感じでした。

いろんな技術に触れた

  • chef
  • angularJS
  • node-webkit
  • atom-shell
  • react

多分angular以外はお世話になりそうな気がする。
node-webkitとatom-shellはnode.jsさえわかれば楽にアプリが作れるので素直にすごいと思った。

反省

PC周りを最強にできなかった。

僕の作業環境は、地べたに座ってやるという感じで本当に体に負担がすごい。
2014年は机と椅子を買おうと思っていたんだけど、様々な出費が重なり、ドメイン失効で3万円吹っ飛んだりして椅子すら買うことができず、作業環境が整うことはなかった。2015年はまずはじめに机と椅子を揃えてPC周りを最強にしたい。

PCが壊れまくった

いつも使っているMacBook Air 2011が限界を突破しつつ有り、壊れたと思ったら復活するなどしたので買い換えたい。
Windowsの方はSSDにしたい。Windowsの方で最近は作業することもあったのだけれども、黒い画面やMacのいろんな作業環境になれるとやはりWindowsだとしんどかったりする。効率が5分の1ぐらいだった。

からだを大事にしたい

飲んだくれの毎日だったり、ダラダラ仕事を夜中にやったりしていて体をいたわってなかった。
最近若くなくなってきたのをひしひしと感じてきており、体力をつけるためにランニングとかいきたい。

ポートフォリオ作りたい

作る作る詐欺なのではやめに作っておきたい

来年の抱負

友人が結婚しまくってるけど関係なしにがんばりたい。
WEB以外でもいろいろできたらいいなーと思ってる所存です。

IEにも対応したレスポンシブSVGの作り方

これはSVG Advent Calendar 2014の参加記事です。
昨日(12/5)に引き続き僕が担当します。
明日(12/7)も空きがありますので、ぜひご参加下さい。

レスポンシブなSVGを作る

SVGは、Retinaであっても綺麗に表示されるため、僕はテキストや図など、Retinaのために2倍サイズを書き出すのが面倒くさい箇所をSVGで書き出しています。

通常のimg要素であれば、

的な感じで、ウィンドウ幅が狭まっても横100%で画像が表示されるはずです。svgでも同じような感じにしてあげると、モダンブラウザではうまく表示されるはずです。

IEで表示がバグる

ところがどっこい、IEだけはうまくいきませんでした。
(ここでのIEはIE9、10、11を指します。)

ChromeとIEの比較。Firefox、SafariもChromeと同じ表示でしたが、IEだけは表示がおかしい。

サンプルscss

サンプル

インラインSVGでは高さが計算されていない、呼び出しではアスペクト比がうまく計算されていないような表示の仕方をしています。

解決策

インラインSVGの場合

サンプルscss

レスポンシブiframeと同じような仕組みです。

呼び出しの場合

imgに横幅をセットしてあげるだけです。横幅100%だったら100%をセットします。

IEではどうやらimgに横幅をセットしてあげないと高さを計算してくれないようです。

IEでもうまく表示することが出来ました。

サンプル

おわりに

SVGを通常の画像として用いると結構ハマりどころがたくさんあります。(特にIE)
レスポンシブはデファクトスタンダードになりつつあるので、SVGを使おうと思ってこれでハマっていた人たち、これからハマる人たちの助けになれば幸いです。

7日のSVG Advent Calendar 2014にまだ空きがありますのでぜひぜひご参加下さい。

SVGスプライト(symbol)でposition:absoluteを使うとIEでずれる

これはSVG Advent Calendar 2014の参加記事です。
昨日(12/4)はshino212さんの「はじめてSVGでアニメーションを作った時の話」でした。おじさんのアニメーションが可愛い。

6日に投稿しようと思ったのですが、空きがあるので5日も投稿することにしました。まだ空きがあるのでぜひご参加下さい。

SVGスプライトとは

body直下などにインラインSVGを貼り付け、gタグの代わりにsymbolタグを用いて使いまわす手法です。リクエスト数を減らす効果があり、ページを書き換えるタイプのpjaxやSPAと一緒に用いるといい感じがします。

SVGスプライトでハマる

上記のように、ロゴを多用している箇所をSVGスプライト(symbol)を用いて対処しようとしてハマりました。
メインビジュアル部分の所をposition:relativeをかけ、SVGにabsoluteをかけ対処したところ、IEと他のブラウザで見え方が異なってしまいました。


右はWindows8.1のIE11。Windows7のIE9、10でも同じでした。

なお、position:absoluteをかけなければ同じ表示になります。

まあ、普通の画像であれば、

で右下固定で表示されると思ったのですが。。。

ずれて表示されてしまいました。

解決策

高さを指定してあげることで解決出来ました。

スタイルか、svgに高さをふってあげることでIEでもposition:absoluteで絶対配置することが出来ました。

サンプルはこちら

おわりに

IEのSVG表示はきれいなのですが、いろいろハマりどころがあるのが難点。

明日(というか今日)のSVG Advent Calendar 2014も僕が投稿します。内容はまだ考え中です。

ほんとうにあのサイトが小4の作ったものだったら

ぼくは小4だよ!みんなかまって的なサイトが突如現れ、僕は唖然としました。
小4でAWSつかってHTML5でjQuery使って独自ドメイン、小4にしてはデザインもコーディングも結構きちんとしている。これがデジタルネイティブ、すげー時代になったもんだ、と。まあ嘘だったんですけど。
僕の場合、マジで小4が作ってマスメディアに取り上げられたりしていたら自分探しの旅()に出るところでした。実際は有名な学生が作ってたのであの程度かとホッとしました。

んで、僕がインターネットに触れ出したのがだいたい小6〜中1ぐらいなので、それを踏まえて今の小4だったらこんなレベルじゃないのかなーと勝手に想像してみます。

サーバーは無料サーバーにしよう

だいたい、AWSなんて使えるわけないじゃないですか。
まず、お金が必要なんですよ。小学生で銀行口座やクレジットカード使えますかと。僕はマクロミルでがんばってがんばって1500円ためてどうにか親を言いくるめて引きだしてようやく有料サーバーを借りることが出来たのが懐かしいです。
サーバーは子供らしく無料のFC2にしてろっていう話。

有料フォントは使わないようにしよう

カウンターのやつがDINだったと思うんですけど、僕がWEBデザイナー(自称)になっていまんとこ一番出費がでかいのがフォントです。子どもが有料フォント買いますかと。親に7,000円のフォント買ってほしいって言ったって多分意味わからないと一蹴され買ってくれないはずです。小4だったらおとなしくPOP体を使っておけっていう話。

ドメインはとっても自分の住所をいれよう

経験者は語る。
小4で個人情報うんぬんなんてしってるわけもなしで個人情報は駄々漏れのはずです。

ソースコードをきたなくしよう

小4だったらbrを連打してほしい。そしてできればmarqueeタグとfontタグという過去の産物を駆使して2000年台にタイムスリップしたような感じにして欲しかった。タグが大文字ならなお良し。クラス名は英語は×

本当の小4なら帰国子女とか英才教育でないかぎり、英語なんてろくに使えないからタグなりJavaScriptのコードの意味なんてわかんないから詰むだろうし、サイト持つにしてもみんなに日本の現状を知ってもらいたいとか意識高い系じゃなくて、自分の絵を見て欲しいとか俺すごいとかエロとかそういう衝動にかられてサイトを作るはずです。それが純粋無垢な子供のはずです。これから俺すごい系で本当にすごい人が現れてくれることを期待しています。

以下駄文

ネットは嘘を簡単につけるぶん、嘘をいう側のリテラシーも重要になります。2chでもTwitterでもなんでも、どこから情報がつながって個人情報が漏れるかなんて自分が把握できるわけもないです。知人かもしれないし、他人、サーバーから漏れる可能性も否定はできません。間違いではなく故意的な嘘、バレたら誰も得をしない嘘で人生を棒に振ってお疲れ様でした。一生信頼されないんじゃないでしょうか。

僕はああいう嘘をついてまで、知ってもらうことが重要なんです的な変な方向の意識高い系が嫌いなので、ああいう人たちとかかわらずに地味に仕事をしていきたいなと思います。tehuくんの今後が心配です。おわり

iOS8でvwとvhが動かないし開発者ツールは動かないしで困った

実装中のやつで、vwとvhが使えるような案件だったので使ってみたところ、iOS6、iOS7は動くのにiOS8では動かなくて困りました。

vw・vhとは

親の要素をぶちやぶって、ウインドウサイズで幅や高さを指定できるプロパティです。

100vwで横幅いっぱい、100vhで縦幅いっぱいと、JavaScriptで頑張んなきゃいけなかったものが簡単に指定できます。calcと一緒に用いて使うと便利です。

ブラウザはIEは9〜、Android4.4〜なので使えるっちゃ使える感じです。

iOS8で動かない

9月23日現在、iOS8でvw、vhどちらも動きません。vwは要素の幅、vhはメニューバーも計算された高さが指定されているように思えます。

検証できない

Safariの開発者ツールがiOS8にまだ対応していないみたいで、Yosemiteが公開されたらiOS8もデバッグできるようになるとか。

WebKit Nightly Builds

とりあえず上記のNightly版を入れることにより、無事デバッグすることが出来、やはりvw、vhがバグってることが確認できました。

対応

横幅は親要素を超過していないのでwidth:100%で乗り切る。縦幅はJavaScriptでinnerHeightを用いることで制御することが出来ました。

まとめ

iOS8のバグが多分いままでより多い気がする。
ファイルもアップできないしで、あんまり変わっていないように見えて内部ではいろいろ変わっているみたいですね。plusも登場してこれからアプリ制作やWeb制作は非常にカオスになりそうな気がしてます。

写真素材をGoogle Spreadsheetでらくらく共有

Google Spread Sheetで共有しやすい素材管理

素材をクライアントやメンバーに共有するときに皆さんはどのように行っていますか?

メール、テキスト、HTML、CMS、Evernote…などなど、様々な共有ツールがありますが、私はGoogle Spread Sheetをおすすめします!

Google Spread Sheetとは

Googleが運営するExcel(のような表計算ツール)。

  • Excelにない関数
  • JavaScriptスクリプトによるマクロ
  • Googleサービスとの連携
  • バッチ処理

などなど、様々な機能があるウェブベースの表計算ツールです。
最近アップデートがかかり、実質容量無制限、関数の制限などがなくなり私にとっては無くてはならないツールになりました。

デメリットとしてはエクセルでいうピボットテーブルが貧弱なこと(GetPivotData、グループ化、ソート機能の充実、テーブルが使えない)が挙げられますが、それを補って余りある機能が充実しています。

Google Spreadsheetで画像を管理してみよう

ExcelでもGoogle Spreadsheetでも、画像の埋め込みは可能です。SEだとキャプチャを撮って貼り付けという拷問みたいな作業があるとかないとか。

エクセルでは挿入であれこれやるしかないと思いますが、Google Spreadsheetには私の知ってる限り3種類の画像埋め込みの方法があります。

  • Excelと同じように挿入
  • IMAGE関数を用いてセル内に表示
  • Google Apps Scriptで頑張る

Google Spreadsheetには、URLさえわかれば画像をセルに表示できるIMAGE関数というものがあります。ウェブベースの利点とも言える関数を用いてセル内に画像を簡単に表示させることが出来ます。

IMAGE関数を使おう

=IMAGE(URL, [モード], [高さ], [幅])

IMAGE関数について

=IMAGE(“http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png”)

でYahooのロゴがセル内に表示されます。

URLさえわかれば画像が簡単に表示できるので便利ですね!

応用してPixta、Fotolia、ShutterstockのリンクURL付き画像集をつくろう

Google Spreadsheetには、組み合わせることによって便利な関数がまだまだたくさんあります。ここでは前述したIMAGE関数と組み合わせることによって簡単に画像を表示させるカスタマイズ方法を紹介します。

IMPORTXML関数を使ってsrc属性を抽出

Google Spreadsheetで備わっている、IMPORTXMLという関数を用いることにより、XPath形式でHTMLを抽出することが出来ます。

前のSpreadsheetのバージョンでは制限がありましたが、現在では制限が取り払われたため自由に使うことが出来るようになっています。

XPathについて

XPathとは、JavaScriptでいうDOMみたいな感じで特定の部分を抽出することができる言語構文です。

XPathの特定方法

上記のように大体の開発者ツールにはXPathのコピーが備わっていますので、それを元にXPathの理解を深めることも出来ます。なれればDOMよりも簡単に特定部分を抽出できる場合もあるため、スクレイピングなど、データを集めるときに重宝します。

詳しくはWikipediaなどをご参照下さい。
XML Path Language Wikipedia

詳細URLから画像を抽出する

pixtaの場合

通常のストックフォトサイトの場合だと、上記のように写真素材ごとにURLが割り振られています。
そこにメインのサムネイル画像が表示されていますので、そのURLを抽出すれば後はIMAGE関数でチョチョイのチョイですね!

各サイトのXPath

PIXTAのXPath
//[@id=’imgZoomArea’]//*/@src

ShufflestockのXPath
//*[@class=’thumb_image’]/@src

FotoliaのXpath
//[@class=’content-view-thumbnail’]//@src

作成例

作成例

写真素材スプレッドシート

いろいろいい感じにすると、上記のような感じになります。自分のスプレッドシートにコピーすることも出来ます。(時と場合によってはLoadingがずーっと出てで見られない場合があります。その場合はURLセルを消して戻せばなぜか再度表示されます。)

効率化しよう

詳細URLがわかれば上記のようなスプレッドシートが簡単にできることがわかりました。
いちいちスプレッドシートにぺたっと貼り付けるのもアレなので、全てのタブのURLをコピーし、スプレッドシートに貼り付けるだけにしてしまいましょう!

Chromeの場合
Make Link of All tabs

Firefoxの場合
Firelink

上記アドオンを用いることにより、全てのタブを改行区切りにすることが出来ます。

Fotolia、Pixtaなどで新規ウインドウを作成し、良さそうな画像の詳細ページをどばばばばーっと開いた後アドオンを発動させるだけで全タブのURLが抽出できます。あとはスプレッドシートに貼り付けるだけですね!あとは共有しておしまいです。

まとめ

こんなかんじで、Google Spreadsheetを用いることにより、さくっと画像を共有することができちゃいます。

IMPORTXMLのXPathはうまくいくサイトとうまくいかないサイトがあるため、3回同じようなXPathかいてうまく行かなかったら諦めるのも手です。サイトがリニューアルなどした時などXPathは変わってしまいますのでお気をつけ下さい。

画像は直リンクになってしまいますので、あまりやり過ぎないことをおすすめします。(おそらくGoogleでキャッシュしているとは思いますが。)

他にもこういう共有方法があるよ〜という方は教えて下さい!それでは良い共有ライフを〜

VCCWにphpMyAdminとwordmoveを載っけたVCCW-pwを作った

sshpassを入れ忘れていたので追加しました。
sudo yum install -y sshpass でsshpassがインストールできます。


さよならVVV

最近までVVVというWordPressをローカルで構築するものをカスタマイズして使っていたんですが、VVVのカスタマイズがあまりにも面倒くさくて、かつバグりやすいのでChefの勉強がてらVCCWに出戻りしました 。

VCCW is god

そしたらVCCWはまごうことなき神でした。僕の記憶に無いだけかもしれませんが、前まではWindowsで動かなかったり、Vagrantfile内でここまでできなかった気がしたので。これからWordPressを開発するのであれば離れられない気がします。プラグイン最初にインストールする設定が便利。

んで、VCCWをフォークし、個人的に欲しかったものをプラスしたVCCW-pwを作りました。

VCCW-pw

https://github.com/tanshio/vccw

おもむろにgit cloneしてディレクトリを移動しvagrant upすれば動きます。

VCCWにphpMyAdminを追加し、rubyのバージョンを上げ、wordmoveを入れただけです。
phpMyAdminはなんだかんだで便利。
wordmoveはページ追加などの更新作業の時にローカルに環境ごと取り込めるので便利。wordmoveのFTPだとバグりやすいのでlftpはインストールしてません。SSHを推奨。

以下のcookbookを使わせていただきました。

https://github.com/fnichol/chef-rbenv
https://github.com/fnichol/chef-ruby_build

あと、おまけでbrowsersyncを入れてあるのですが、プロキシのせいなのかロードに5秒ぐらいかかる。こういうものなのかな。

Chef便利

Chefは2年ぐらい前に触れてからアレルギー的な感じで拒否反応を起こしてましたが、触れざるを得ない事情で触れて勉強してみたらそんなに難しく感じませんでした。
自宅サーバーを構築したことある人だったらすぐ慣れそうな気がします。templateが便利すぎて唖然。多分Vagrantのおかげで簡単に思えたようにも思える。

まとめ

ぶっちゃけWordPressはいろいろあれな感じに思えてはいるのですけど、Web制作を生業とするとこれからも長い間離れようがない気がしてるので、できるだけサクサク環境を構築できるものを使って、さっさと終わらせたいもんです。
gitでデータベースも管理できたらそれだけでも楽なんですが\(^o^)/
(versionpressとrevisrに期待を込めて)