メールの絡んだシステム開発中、即座にサーバーが準備できればいいですが、そうも行かない時。
ログでもいいのでしょうが、HTMLメールのテストなんかはやっぱりログは最適な方法とは言えません。
以前はログから確認していたのですが、今はmailtrapというサービスを使っています。
無料でも使うことができ、メール数の制限とInboxと呼ばれるメールボックスは１つしか持てないという制限はありますが、ちょっとしたテストであれば十分使うことができます。
inboxを開くと、SMTPサーバーと、POP3サーバーの情報が表示されるので、これを開発用メールサーバーとして設定すればOKです。
サーバーを設定しておけば、あとはmailtrapの画面上からメールが確認できます。
Webアプリの開発においても、メールサーバーの設定は面倒だし、GmailのSMTPも厳しくなったのかローカル環境では使えませんし、開発中にすぐ使いたいとなったらこれが一番便利な気がします。
そんなことってよくあるじゃないですか。とはいえ、今すぐにDockerで環境作るわけにもいかない、借り物のマシンだから仮想環境ゴリゴリ用意するわけにもいかない、そんなときはオンラインエディタ 実行環境が全てそろったcloud 9を使うことあると思います。
イマイチだなーと思っていたら、いいのを見つけました
無料だと24時間でサーバーは消失してしまいますが、ちょっとしたお勉強の環境だったら無料で始めることができます。
Paizaはオンライン学習動画サービスもやっており、一部ですが無料で動画を見ながらお勉強ができます。
当たり前ですが、ちゃんとコマンドを叩くことはできます。コンソールは２画面以上立ち上げることができないようで、それは残念なポイントですが、ちょっとRailsをインストールして、gemを入れてみよう！くらいは何のストレスもなくはじめることができました。
このツールからgithubにつなげないのかなーというのはまだ良くわからないのですが、いずれにしてもちょっと何か試す環境としては無料なのでベストな選択です！
iPadで動画編集とか楽そうと思って導入したんですが、現在はサブディスプレイとしても活用してます。
iPadとMacそれぞれにDuetというアプリをインストールすることで使えるようになります。
最近、デザイナーではないのですがデザインとプログラム両方を兼務するお仕事を頂きましてiPadでデザインできたら楽しそうだなあと思っていたのですが、対応アプリ、スペックに限界があり叶いませんでしたが、サブディスプレイ化させることでAdobeソフト、SketchもMacに繋いだ状態ならペンタブレットのようにiPadを使うことができます。
Sketchで現在はデザインを行うのですが、DuetをMac iPadそれぞれ起動させてつなぐことでSketchの操作がiPad上でできました！
私の絵心ではこれが限界ですが、Macにしか対応していないアプリも画面をサブディスプレイ化させることでペンタブでお絵かきができました。
遅延は発生するか
この手のアプリは遅延してカクカクするんですけれど、あまり気になりません。（あまり、という意味で全く気にならないわけではないです。たまにもたつくくらいで、ペンタブ代わりにちょっとお絵かきするくらいなら全然あり）
データ転送ができる純正のケーブルが一本必要です。（純正じゃなくてもいいかもしれないけど、試してません）
有線でつなぐからこその速度感かのかもしれません。
サブディスプレイにもペンタブにも欠かせないアイテムになりそう。
Dreamweaverを卒業した後はずっとAtomをエディタとして使ってきて、拡張機能は色々お世話になってきました。
が、、Atomを卒業することにしました。
Atom 卒業を決意した理由
Atomの卒業を決意した理由はここ最近、とにかく重たいことでした。ファイル名検索も、文字列検索をかけてもとにかく遅く Atom HelperによるCPUの圧迫も問題でした。
Visual Studio Community版なら無料で使うことが可能です。
無料は2つあり、Visual Studio CommunityとVisual Studio Expressがありますが、無料版は年商1億円未満で５人まで無料、とのことなので、何台インストールしても無料ということではないです。個人事業主であれば問題なくVisual Studio Communityをインストールできます。
（Expressは目的ごとにエディションが用意されています。今回はCommunity版をインストールします。
$ brew cask install visual-studio-code
インストール直後の状態。左に並ぶアイコンのうち、上から３番目がgit １番下のアイコンが拡張機能。gitは何も拡張機能を追加しなくてもデフォルトでついてるようです。
拡張機能の検索フォームで拡張機能を検索するとインストール可能なパッケージが表示されるので、次々に好みのパッケージをインストールすることができます。
デフォルトの状態ではgit logを確認することができないのでインストール
SCSSとか、インデントがわかりにくい。インデントごとにガイド線を出力してくれる
elbのシンタックスハイライト
Ruby シンタックスハイライト
AtomではCPUあがりすぎて、いつもsafeMODEで起動したり、落としたりを繰り返していましたがVSCODEはとっても軽くて軽快。まだ使い始めたばかりですが、タスクランナーもとても便利なようで、Sassのコンパイルに便利なようです。
以前、シーケンスやDFD、ガントチャートの作成ツールを紹介したことがありました。
ただ、こちらはエディタとして文字列ベースで管理していくので、誰でも使いやすく、もっと直感的なシーケンス図作成ツールはないかなあと思っていたら見つけました！
loopを試しにいれてみたんですが、エディタの一番上にしか挿入されなかったので、複合フラグメントは必要なところを囲ってあげる必要があるようです。
できあがったシーケンス図は画像、SVG、さらにエディタに残った文字列をテキストデータとしてダウンロードすることができます。
正直、痒いところに手が届く！とまでは言い難いですが、営業資料に添えたり、APIの設計書に使えます。
無料で、ブラウザアクセスするだけで使えるのでけっこうオススメです。
昨日もWordPress をインストールしては壊し、インストールしては壊し、今日も作って壊して、Pleskというサーバー管理ツールをつかって初めてのWebサーバー管理に挑戦。
サーバー運用がぐっと簡単になるプラットフォームです。
けっこう流行ってて、格安のVPSでもPleskをプリインストールさせた月額2000円くらいから販売してたりします。
昨日、GoogleCloudPlatformを紹介しましたが、CentOS7にPlesk web host editionをのっけたパッケージを見つけまして、せっかくなので使ってみたいと思います。
他社VPSのプランによって予めPleskを乗っけたプランを用意していますが、Pleskのライセンスは¥1265円（月額)かかります。VPSのプランによって予めライセンス料を含んでいたり、いなかったりするので、導入検討されているサーバー会社に確認してください。
GoogleCloudPlatformでは1年のフリープランで使えますが、Pleskのライセンス料金は別途かかります。
複数ドメインの管理も非常にしやすいので、レンタルサーバーをたくさん契約しているなら、Pleskで一挙に集約してコストダウンを図るのもありでしょう。
GMOやさくらサーバーではPleskがプリインストールされたプランが用意されているはずです。
左カラムにWordPressがあったのに、一度も使いませんでしたね。こちらは拡張機能で、たとえばこのVMでたくさんのWordPressサイトを立ち上げたいとして、テーマやプラグインの管理ができます。
例えば、AとBとCのWordPressで同じプラグインを使っていたとして、毎回WordPressにログインをして、それぞれアップデートをするのは面倒です。
そういった時にここでプラグインを更新したり、追加したりできるんです。WordPressで大量にアフィリエイトサイトを作っている人にはとてもありがたい機能ですね。
サーバー管理は敷居が高い、怖いしめんどう。。そんな人こそPleskをお試しあれ。Plesk一つあれば、マルチドメインの管理も楽だし、レンタルサーバーで複数サイトを運用しているのとほぼほぼ同じ感覚で作業ができます。
管理画面が英語なのだけがあれっちゃあれですが、sshでログインしてポチポチしたり、ログの解析を行うよりよっぽどいい！
今回はWordPressのインストを行いましたが、他の主要なプログラミング言語にも対応しており、Dockerも使えるので、サーバー周りがめんどくさいエンジニアにもオススメ。
GoogleCloudPlarformだと最安の構成でも41ドル月額ランニングコストがかかってしまうので、使わない時は落としてしまえばいいし、気軽にプログラミングやCMSのお勉強の環境としても最適。
レンタルサーバーではRailsが使えないので、私も今後PleskでRailsやPythonやってみようかな。
AWSやMicrosoft Azureは使ってきましたが、Google Cloud Platform 略してGCPは使ったことがありませんでした。たまたまネットの広告で、今なら300$分、1年間フリープランで使えるよ！とのことなので、「無料？じゃあ試してみようかしら？」主婦根性まるだしでGCPをお試しでつかってみました。
正直、自分はインフラ専門ではないので、「ちゃっちゃと何かアプリケーションがデプロイできる環境になれば嬉しい。しかも安ければ最高」っていうくらいゆるいカンジでしか理解してないので、GCPとAWSどっちがいいの？？といった、GCPってなんですか？という疑問はこちらのリンクを参照してください。
私の方はさくさくWordPressをインストして、ブラウザからアクセスできる状態を試してみたいと思います。
（この他にも色々とLauncherにWordPressがあるんですが、ドキュメントがすくなくて、WordPress Google Click to Deployしか試してません。デフォルトでSSLが使えたり、マルチサイトに対応していたり、色々あるみたい）
メールアドレスや、マシンサイズの設定をしました。マシンサイズはテストなのでmicroで一番小さいサイズにしました。
ページ下の「デプロイ」を押すだけで構築されます
1分くらいでデプロイされます。ページ右カラムにデプロイされたサイトURLやWordPressのログインユーザー、パスワード、MySQLのrootパスワードも記載されているので、WordPress運用するにあたっての基本的な情報はそろっていますね。
プラグイン、テンプレートなどは管理画面にログインして、よしなに変更してください。
以上、駆け足ですが、Google Cloud PlatformでWordPressの環境構築でした！
実運用はまだしてませんが、ミニマムなWordPressサイト構築ならAzureよりは全然安い、といったところですが、情報がAWS何かとくらべて圧倒的に少ないのでちょっと苦労するかも。
無料のうちに色々テストして遊んでみようっと。
以前、ドラッグ＆ドロップでTwitterBootstrapのページが作れるジェネレーターを紹介しました。
今回紹介するPingendoはテンプレートからテキストや画像を変更するだけで美麗なWebページを作ることができます。しかも、Bootstrapのバージョンは4に対応！パララックス効果も設定できるので、デザインまではちょっとご遠慮願いたい、でもそれなりにデザインにはこだわりたいワガママなWebデベロッパーにはオススメ！
TwitterBootstrapのようにパーツを配置しただけのものから、LP作成に最適なテンプレートまで。正直、豊富なテンプレート数とは言い難いですが、画像と文字の入れ替えだけでもそこそこ見栄えするものが作れそうです。
知識不要でパララックス効果、アニメーションの設定ができます
ジェネレートされるCSSはSASS対応、というかSASSしかいじれません。こういうジェネレーターのCSSは汚くなりがちなんですが、SASSに対応してるのはありがたいです
これ、自分が一番感動した機能で、SASSに新しく項目を追加したら、ELEMENTのStylesに追加されるんですよ！
「ここはもう少し こうしたいんだよね！！」という細かな要望は自分でスタイルを追加してしまえばいい！素晴らしいね！
これだけ高機能なのに、実は無料でも使えるんです。（ジェネレートしたファイルに広告は表示されてしまいますが、非常に小さいのであまり気になりません。
有料であっても、払いきりタイプなので、この手のジェネレーターって毎月課金されていくんですが、一度99ドル払ったらおしまい！っていう手軽さがいいですね。
無料でも使えるので、ぜひ一度お試しあれ！！
iPad２を使っていた時は、システム手帳のようなアプリをつかっていたんですが、何かいい感じの無いかなーと思っていたら、とっってもいいアプリを見つけたんです。
ダウンロードそのものは無料ですが、シート数に制限があり、開放するには月額480円かかります。
スマホ版もありがすが、画面の大きさ的に使い勝手がいまいちですが、iPadで書いて、iPhone で見る、という使い方がいい感じです。
GEMBA Noteの使い方はこれといった決まりがなく、スケジュール、メモ、会議議事録、お絵かき、図形の描画、とにかく
「何か紙に書いていそうなこと」が全てアプリに残せることです。書く以外にも、音声データも合わせて残せます。
真っ白い紙に、好きにカレンダーや表をペタペタして、自由に使えばいいんです。
カレンダーのフォーマットも自由に選択・カスタマイズが可能で、月次、週、日ごと、好きに選んでノートにペタペタできます。
写真を撮影して、書き込みをしたり、アプリからブラウザを立ち上げて、ブラウザのスクショを貼り付けたり、図形を入れたり、なんでも貼れます。
ブラウザ立ち上げてスクショを取って、それに自由に書き込めるっていうのはすごく気に入ってまして、ディレクターがデザイナーに修正指示をするのがとても楽ですよね。
自分は、担当税理士さんに帳簿お願いしてるんですが、領収書撮影して、「勘定科目は○○で」とか、写真＋何かメモとして人に伝えるのに重宝します。
紙に書くようにメモをしながら、「あ、これはTodoだな！」と思ったら、メモを書いた後からTodoタスクを作れます。
個人的にはこの図形 を書くのがすごく気に入ってまして、ペンを選んだ後に図形を描くを選択すると
フリーハンドで書いたものが、キレイな図形になるんです！もちろん、もっとちゃんとした図形を書くなら、図形のオブジェクトを配置できます。
設計の打ち合わせをしながら、サラサラ！っとフローを手書きすれば、お手軽データフローダイアグラムが作れちゃいます。
もちろん、これに文字列を入れられるので、その場でなかなか立派な資料が作れちゃいます！
手書き入力キーボードにも対応しており、サラサラと手書きした文字はキーボード入力に変換してくれます。（有料拡張）
と、こんなカンジでとっても便利なんですが、フルに活用するならiPad ProとApples Pencileが必要です。動画の編集目的で購入したiPad Proですが、GEMBA Noteが楽しくて、何でもカキカキしちゃいます。
何となくエクセルで管理していたこと、何となく紙で書いていたことを全部自由に残せることが強み。何を書いても何を残してもOK。クラウドストレージに保存もできるので、書いたものの共有もできます。
普段はアプリの紹介はしないんですが、ぜひディレクター、上流工程の皆様、検討してみてください。ハマりますよ！
以前当ブログでも紹介したmermaid.jsが素敵すぎて今DFDやらシーケンス図の作成にはmermaid.jsを愛用。
自分はブログで紹介した通り、Atomエディタの中でパッケージ追加してエディタの中でプレビューして使ってますが、
オンラインエディタも用意されているのですぐ使ってみようという方はオンラインエディタもおすすめ。
もちろんオンラインエディタで作った図をPNGやSVGでダウンロードも出来ます。
何回かに分けてmermaid.jsで作れるUMLの紹介をしていきたいと思います。
今回はmermaid.jsで作るシーケンス図について。
２つのオブジェクトがあり、メッセージの送信とそれに対するレスポンスというシンプルなシーケンス図をサンプルに用意しました
オブジェクトは最初に定義するのではなく、
A->B というようにアロウを用意してあげるだけで２つのオブジェクトが画面上に用意されます。
ですからシーケンスを書く時はどこのオブジェクトに送るかを意識するだけでシーケンス図を書くことが出来ます。
| 表示 | 表記 | 要素 |
|---|---|---|
 |
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で終わりを示してあげることです。
| 表示 | 表記 | 要素 |
|---|---|---|
| loop | loop … 〜 end | 「…」はループ名 ループ |
| alt | alt … 〜 else … 〜 end | 条件分岐 |
| opt | opt … 〜 end | オプション |
簡単なシーケンス図はmermaid.jsで作れますが、より厳密なUMLにのっとった書き方はできないようです。
例えば
・ライフラインの消滅
・同期/非同期
・ファウンドメッセージ
・ロストメッセージ
複合フラグメントに関してはメッセージの流れを囲ってあげるだけだから全て実現できる（はず。。全部やってないのであれですが）