便利ツール ITかあさん

ITかあさん

iPadがサブディスプレイにもペンタブレットにもできるアプリDuet

iPadがサブディスプレイにもペンタブレットにもできるなんて!

iPadで動画編集とか楽そうと思って導入したんですが、現在はサブディスプレイとしても活用してます。

 

iPadとMacそれぞれにDuetというアプリをインストールすることで使えるようになります。

iPad非対応のMacのアプリがiPadから操作できる

最近、デザイナーではないのですがデザインとプログラム両方を兼務するお仕事を頂きましてiPadでデザインできたら楽しそうだなあと思っていたのですが、対応アプリ、スペックに限界があり叶いませんでしたが、サブディスプレイ化させることでAdobeソフト、SketchもMacに繋いだ状態ならペンタブレットのようにiPadを使うことができます。

iPadでSketchを開いている状態。問題なくすべての機能がつかえました。

もちろんApple Pencileも使えるよ!

Sketchで現在はデザインを行うのですが、DuetをMac iPadそれぞれ起動させてつなぐことでSketchの操作がiPad上でできました!

私の絵心ではこれが限界ですが、Macにしか対応していないアプリも画面をサブディスプレイ化させることでペンタブでお絵かきができました。

 

遅延は発生するか

この手のアプリは遅延してカクカクするんですけれど、あまり気になりません。(あまり、という意味で全く気にならないわけではないです。たまにもたつくくらいで、ペンタブ代わりにちょっとお絵かきするくらいなら全然あり)

接続には有線が必要ですよ

データ転送ができる純正のケーブルが一本必要です。(純正じゃなくてもいいかもしれないけど、試してません)

有線でつなぐからこその速度感かのかもしれません。

サブディスプレイにもペンタブにも欠かせないアイテムになりそう。

Atomをやめて、Visual Studioに切り替えた話

Atomをやめて、Visual Studioを使い始めました

Dreamweaverを卒業した後はずっとAtomをエディタとして使ってきて、拡張機能は色々お世話になってきました。
が、、Atomを卒業することにしました。

Atom 卒業を決意した理由

Atomの卒業を決意した理由はここ最近、とにかく重たいことでした。ファイル名検索も、文字列検索をかけてもとにかく遅く Atom HelperによるCPUの圧迫も問題でした。

Microsoft製のVisual Studioを使うよ!

Visual Studio Community版なら無料で使うことが可能です。

無料は2つあり、Visual Studio CommunityとVisual Studio Expressがありますが、無料版は年商1億円未満で5人まで無料、とのことなので、何台インストールしても無料ということではないです。個人事業主であれば問題なくVisual Studio Communityをインストールできます。

(Expressは目的ごとにエディションが用意されています。今回はCommunity版をインストールします。

home brewでインストール

$ brew cask install visual-studio-code

インストール直後の状態。左に並ぶアイコンのうち、上から3番目がgit 1番下のアイコンが拡張機能。gitは何も拡張機能を追加しなくてもデフォルトでついてるようです。

 

あったほうが良い拡張機能

拡張機能の検索フォームで拡張機能を検索するとインストール可能なパッケージが表示されるので、次々に好みのパッケージをインストールすることができます。

Git History

デフォルトの状態ではgit logを確認することができないのでインストール

Guides

SCSSとか、インデントがわかりにくい。インデントごとにガイド線を出力してくれる

Ruby関連

erb

elbのシンタックスハイライト

Ruby Language Colorization

Ruby シンタックスハイライト

AtomではCPUあがりすぎて、いつもsafeMODEで起動したり、落としたりを繰り返していましたがVSCODEはとっても軽くて軽快。まだ使い始めたばかりですが、タスクランナーもとても便利なようで、Sassのコンパイルに便利なようです。

無料で使える直感的なシーケンス図作成ツール

ドラッグ&ドロップで、無料で使えるシーケンス図作成ツール発見!!

以前、シーケンスやDFD、ガントチャートの作成ツールを紹介したことがありました。

ただ、こちらはエディタとして文字列ベースで管理していくので、誰でも使いやすく、もっと直感的なシーケンス図作成ツールはないかなあと思っていたら見つけました!

ライフラインからメッセージを直感的に

ライフラインを選択して、ドラッグすると同期を示す矢印が伸ばせます。

矢印を選択して

ダブルクリックでメッセージの変更が行えます。

 

もちろん複合フラグメントも

右クリックで文言追加、複合フラグメントを選択できます。

ループや条件分岐くらいは簡単に追加できますね。

エディタも用意されていて、ライフラインの追加、同期メッセージ、メモの追加は画面上で問題ないんですが、複合フラグメントの場所、同期メッセージを応答メッセージにしたい時はエディタで少しさわってあげないといけません。

loopを試しにいれてみたんですが、エディタの一番上にしか挿入されなかったので、複合フラグメントは必要なところを囲ってあげる必要があるようです。

データのダウンロード

できあがったシーケンス図は画像、SVG、さらにエディタに残った文字列をテキストデータとしてダウンロードすることができます。

正直、痒いところに手が届く!とまでは言い難いですが、営業資料に添えたり、APIの設計書に使えます。

無料で、ブラウザアクセスするだけで使えるのでけっこうオススメです。

Pleskで始める、はじめてのサーバー管理

はじめてのPleskでWebコントロールパネルからWordPressを立ち上げてみよう

昨日もWordPress をインストールしては壊し、インストールしては壊し、今日も作って壊して、Pleskというサーバー管理ツールをつかって初めてのWebサーバー管理に挑戦。

そもそもPleskって??

サーバー運用がぐっと簡単になるプラットフォームです。
けっこう流行ってて、格安のVPSでもPleskをプリインストールさせた月額2000円くらいから販売してたりします。
昨日、GoogleCloudPlatformを紹介しましたが、CentOS7にPlesk web host editionをのっけたパッケージを見つけまして、せっかくなので使ってみたいと思います。
他社VPSのプランによって予めPleskを乗っけたプランを用意していますが、Pleskのライセンスは¥1265円(月額)かかります。VPSのプランによって予めライセンス料を含んでいたり、いなかったりするので、導入検討されているサーバー会社に確認してください。
GoogleCloudPlatformでは1年のフリープランで使えますが、Pleskのライセンス料金は別途かかります。

複数ドメインの管理も非常にしやすいので、レンタルサーバーをたくさん契約しているなら、Pleskで一挙に集約してコストダウンを図るのもありでしょう。

さっそくPleskのインストール

GoogleCloudPlatformから Plesk web host editionを選択。だいたい月額5000円くらいを見込んでおけばよさげ。(うーん。個人で使うにはちょっと高いかなあ。あくまでお仕事利用ですね)

GMOやさくらサーバーではPleskがプリインストールされたプランが用意されているはずです。

サイズは一番小さくしました。

ウェブサーバーで開放に必要なポートはインストール時に設定できます。ひとまず全部チェックした状態で良いかと。不必要なポートは管理画面からファイヤーウォールの設定で閉じられます。

Log into the admin panelボタンを押して、Pleskにログインできます。(パスワード思いっきりさらしてますが、すでに変更済よ)

GooglePlarformに記載されたadmin,paswordを入力してログインすればOK

管理画面の見た目、どうする??って聞かれてるので、私は上記画像の通りです。後で管理画面で変更できます。

hostnameとパスワードを設定。この後、ユーザーの情報を聞かれるので(居住地など、個人情報)を入力します。

(なんかWordPressに似てるGUIですね!WordPressユーザーなら親近感が止まらないよね)ドメインの設定も管理画面で行えますから、ドメイン複数設定して、それぞれWordPressをPleskの画面内でインストール可能。

英語表記だけど、けっこうわかりやすいですね。HomeからSubscriptionsを選択します。PHPはデフォルト設定で5.4とやや低いので7系を入れちゃいます

php.iniのよくさわる項目がつらつらーと記載されています。よしなに変更して、PHPのバージョンもお好みで7系統を選んでください。

さきほどのSubscriptionsに移動してWordPressのinstallボタンを押すだけ!(簡単!)

WordPressのインストール

DBの構築も一緒に行われますので、難しいことは何もする必要がありません。便利!

プラグインもここでインストールするか聞かれるのですが、WordPress 管理画面からやっても、ここでやってもどちらでもかまいません。

左メニューのWordPressは使わないの??

左カラムにWordPressがあったのに、一度も使いませんでしたね。こちらは拡張機能で、たとえばこのVMでたくさんのWordPressサイトを立ち上げたいとして、テーマやプラグインの管理ができます。

例えば、AとBとCのWordPressで同じプラグインを使っていたとして、毎回WordPressにログインをして、それぞれアップデートをするのは面倒です。

そういった時にここでプラグインを更新したり、追加したりできるんです。WordPressで大量にアフィリエイトサイトを作っている人にはとてもありがたい機能ですね。

Plesk ちょっとお高いけど、いいぞ!!

サーバー管理は敷居が高い、怖いしめんどう。。そんな人こそPleskをお試しあれ。Plesk一つあれば、マルチドメインの管理も楽だし、レンタルサーバーで複数サイトを運用しているのとほぼほぼ同じ感覚で作業ができます。

管理画面が英語なのだけがあれっちゃあれですが、sshでログインしてポチポチしたり、ログの解析を行うよりよっぽどいい!

今回はWordPressのインストを行いましたが、他の主要なプログラミング言語にも対応しており、Dockerも使えるので、サーバー周りがめんどくさいエンジニアにもオススメ。

GoogleCloudPlarformだと最安の構成でも41ドル月額ランニングコストがかかってしまうので、使わない時は落としてしまえばいいし、気軽にプログラミングやCMSのお勉強の環境としても最適。

レンタルサーバーではRailsが使えないので、私も今後PleskでRailsやPythonやってみようかな。

Google Cloud Platformでわずか3分でWordPressを立ち上げてみる

Google Cloud Platform 1年無料だからとりあえずWordPressを立ち上げてみるぞ!


AWSやMicrosoft Azureは使ってきましたが、Google Cloud Platform 略してGCPは使ったことがありませんでした。たまたまネットの広告で、今なら300$分、1年間フリープランで使えるよ!とのことなので、「無料?じゃあ試してみようかしら?」主婦根性まるだしでGCPをお試しでつかってみました。

正直、自分はインフラ専門ではないので、「ちゃっちゃと何かアプリケーションがデプロイできる環境になれば嬉しい。しかも安ければ最高」っていうくらいゆるいカンジでしか理解してないので、GCPとAWSどっちがいいの??といった、GCPってなんですか?という疑問はこちらのリンクを参照してください。

私の方はさくさくWordPressをインストして、ブラウザからアクセスできる状態を試してみたいと思います。

Google Cloud Platform 1年無料だからとりあえずWordPressを立ち上げてみるぞ!

Cloud LauncherからWordPressと検索し、「WordPress Google Click to Deploy」を選択してください。

(この他にも色々とLauncherにWordPressがあるんですが、ドキュメントがすくなくて、WordPress Google Click to Deployしか試してません。デフォルトでSSLが使えたり、マルチサイトに対応していたり、色々あるみたい)

あとで変更できますが、Zoneはasia-east1-aにしました。(なるべく近いところがいいよね)

メールアドレスや、マシンサイズの設定をしました。マシンサイズはテストなのでmicroで一番小さいサイズにしました。

ページ下の「デプロイ」を押すだけで構築されます

1分くらいでデプロイされます。ページ右カラムにデプロイされたサイトURLやWordPressのログインユーザー、パスワード、MySQLのrootパスワードも記載されているので、WordPress運用するにあたっての基本的な情報はそろっていますね。

Visit WordPress Siteでサイトにアクセスすると英語版ではありますが、WordPressのあのページが立ち上がっているのがわかりますね。

プラグイン、テンプレートなどは管理画面にログインして、よしなに変更してください。

以上、駆け足ですが、Google Cloud PlatformでWordPressの環境構築でした!

実運用はまだしてませんが、ミニマムなWordPressサイト構築ならAzureよりは全然安い、といったところですが、情報がAWS何かとくらべて圧倒的に少ないのでちょっと苦労するかも。

無料のうちに色々テストして遊んでみようっと。

Bootstrap 4対応の美麗なページジェネレーター!Pingendo

パララックスにも対応した超美麗なページジェネレーター!!

以前、ドラッグ&ドロップでTwitterBootstrapのページが作れるジェネレーターを紹介しました。

今回紹介するPingendoはテンプレートからテキストや画像を変更するだけで美麗なWebページを作ることができます。しかも、Bootstrapのバージョンは4に対応!パララックス効果も設定できるので、デザインまではちょっとご遠慮願いたい、でもそれなりにデザインにはこだわりたいワガママなWebデベロッパーにはオススメ!

テンプレートがおしゃれ!

TwitterBootstrapのようにパーツを配置しただけのものから、LP作成に最適なテンプレートまで。正直、豊富なテンプレート数とは言い難いですが、画像と文字の入れ替えだけでもそこそこ見栄えするものが作れそうです。

パララックス効果が自分で設定できる!

知識不要でパララックス効果、アニメーションの設定ができます

スタイルシートはSASS

ジェネレートされるCSSはSASS対応、というかSASSしかいじれません。こういうジェネレーターのCSSは汚くなりがちなんですが、SASSに対応してるのはありがたいです

自分で新たなスタイルを定義

これ、自分が一番感動した機能で、SASSに新しく項目を追加したら、ELEMENTのStylesに追加されるんですよ!

「ここはもう少し こうしたいんだよね!!」という細かな要望は自分でスタイルを追加してしまえばいい!素晴らしいね!

無料でも使える!

これだけ高機能なのに、実は無料でも使えるんです。(ジェネレートしたファイルに広告は表示されてしまいますが、非常に小さいのであまり気になりません。

有料であっても、払いきりタイプなので、この手のジェネレーターって毎月課金されていくんですが、一度99ドル払ったらおしまい!っていう手軽さがいいですね。

無料でも使えるので、ぜひ一度お試しあれ!!

iPadアプリGEMBA Noteはディレクタ、SE、PMに最適のアプリだった!

iPad Pro 12.9インチ 買ったんですよー

猫にトイレを覚えさせたい

iPad Pro、12.9インチを導入して、無駄なお絵かきをしてみる。

iPad2を使っていた時は、システム手帳のようなアプリをつかっていたんですが、何かいい感じの無いかなーと思っていたら、とっってもいいアプリを見つけたんです。

GEMBA Note

GEMBA Note

ダウンロードそのものは無料ですが、シート数に制限があり、開放するには月額480円かかります。
スマホ版もありがすが、画面の大きさ的に使い勝手がいまいちですが、iPadで書いて、iPhone で見る、という使い方がいい感じです。

GEMBA Note使い方の特徴

GEMBA Noteの使い方はこれといった決まりがなく、スケジュール、メモ、会議議事録、お絵かき、図形の描画、とにかく 
「何か紙に書いていそうなこと」が全てアプリに残せることです。書く以外にも、音声データも合わせて残せます。
真っ白い紙に、好きにカレンダーや表をペタペタして、自由に使えばいいんです。

スケジュール

スケジュール
スケジュール

カレンダーのフォーマットも自由に選択・カスタマイズが可能で、月次、週、日ごと、好きに選んでノートにペタペタできます。

Googleカレンダーとの同期も可能なので、予定の忘れる心配もない

手書きでなんでも書き込める

写真を撮影して、書き込みをしたり、アプリからブラウザを立ち上げて、ブラウザのスクショを貼り付けたり、図形を入れたり、なんでも貼れます。

ITかあさんブログ、いい加減デザインアップデートしようぜ
ブラウザ立ち上げてスクショを取って、それに自由に書き込めるっていうのはすごく気に入ってまして、ディレクターがデザイナーに修正指示をするのがとても楽ですよね。

自分は、担当税理士さんに帳簿お願いしてるんですが、領収書撮影して、「勘定科目は○○で」とか、写真+何かメモとして人に伝えるのに重宝します。

メモ書きしてTodoタスクに

メモからToDo
紙に書くようにメモをしながら、「あ、これはTodoだな!」と思ったら、メモを書いた後からTodoタスクを作れます。

メモからToDo

メモした内容を選択して、Todoの付箋を貼る

なんちゃってDFD

きったな!
個人的にはこの図形 を書くのがすごく気に入ってまして、ペンを選んだ後に図形を描くを選択すると

ちょっといい感じ
フリーハンドで書いたものが、キレイな図形になるんです!もちろん、もっとちゃんとした図形を書くなら、図形のオブジェクトを配置できます。

設計の打ち合わせをしながら、サラサラ!っとフローを手書きすれば、お手軽データフローダイアグラムが作れちゃいます。
もちろん、これに文字列を入れられるので、その場でなかなか立派な資料が作れちゃいます!

手書き入力キーボード

手書き入力キーボードにも対応しており、サラサラと手書きした文字はキーボード入力に変換してくれます。(有料拡張)

iPad ProとApple Pencileが必要だよ

と、こんなカンジでとっても便利なんですが、フルに活用するならiPad ProとApples Pencileが必要です。動画の編集目的で購入したiPad Proですが、GEMBA Noteが楽しくて、何でもカキカキしちゃいます。

何となくエクセルで管理していたこと、何となく紙で書いていたことを全部自由に残せることが強み。何を書いても何を残してもOK。クラウドストレージに保存もできるので、書いたものの共有もできます。

普段はアプリの紹介はしないんですが、ぜひディレクター、上流工程の皆様、検討してみてください。ハマりますよ!

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図書く機会あったら徹底的にこの子使うかも!