面倒な議事録の作成に超便利なwebアプリ『sign』

どうも、4_1です。ちゃんと生きています。
追い込まれるとブログの更新がおろそかになる傾向が強くていけません。
一段落したので、ぽつぽつとブログの更新を開始したいと思っている次第であります。
さて、書くべきことは沢山あるのですが、今日は割と軽めなトピックスで。
一応、ディレクターという職柄、社内外を問わず会議、MTG、打ち合わせなどに参加する機会が多いです。事前にレジメを作ったり、会議に出席できなかったメンバー用に議事録を作ったりということも当然多いのですがーー面倒です。
書式が決まっていればいいとかそうゆう問題ではなく、面倒です。(この辺でディレクター職が向いていないと判断すべきなのかもしれませんが…)
そんな僕でも簡単に議事録が作成できるwebアプリを見つけたのでご紹介します。
スクリーンショット 2015-06-20 15.19.16
web製作会社さんが作ったアプリのようで、UIも洗練されていますし(超重要)、「議事録」を作成するということだけに特化したアプリですので、余計な事を考えずに箇条書きで要件を入力するだけでそれなりの書式で出力できるのがいいです。
この手の書類を作るのが面倒な理由って、余計なことまで書いて結局収集がつかなくなったり、「形」が決まっていないから、そこから考えると思うと億劫になったりだと思うのですが、その点をうまくクリアにしてくれています。
基本的には、アプリ上でユーザー登録をして関係者に見てもらうという形式ですが、テキストファイルでの出力も可能ですので、印刷して資料にしたり、リテラシーが低めなクライアントにはテキストファイルと送ってあげるということもボタン一つでできます。
このテキスト出力機能って地味に効いてます。新しいシステムを導入する時って、自分ひとりなら問題ありませんが、周りを巻き込むとなるとかなり体力が必要です。自分にとっては便利だけど、使い方まで説明するのってちょっとね…という場面も沢山あります。
テキストファイルという昔ながらのフォーマットも使えるとなれば、選択の幅も広がります。
たまたま見つけたアプリですが、色んな場面で重宝しそうなwebアプリです。

Adwordsのアカウント管理が100倍楽になる。Google謹製アカウント管理ツール[Adwords Edtior]のご紹介。

タイトルで釣ってみました。最近Adwordsの運用にも手を出しています、塩原です。
Adwordsは絶賛勉強中なので、あれなんですが…
アカウント設定ってとてもとても面倒です。しかも管理画面めっちゃ遅いし、そもそもどこに何があるか把握しきれていないので、間違った所クリックしちゃって「あ、ここじゃない、くそっ」ってこともしばしば。その度に時間と精神力を削られます。

色々調べてみましたら、そんないらいらを解消してくれるアプリがあるではないですか。

Adwords Edtior

このAdwords Editorを使うと、ローカルアプリ上でキャンペーン以下広告の設定まで行えます。
しかも、一括登録もできるので、非常に楽ちんです。

アプリ上で設定を行い、最後に設定情報をまるっとAdwordsと同期するっていう感じです。

使い方

まず、Adwords Editorをダウンロードします。

アプリを立ち上げるとログイン認証の画面がでますので、Adwordsを利用しているGoogleアカウントでログインします。すると、紐付いているAdwordsの情報がダウンロードされます。ここで、キャンペーンの追加などの設定を行っていくわけです。

常に同期しているわけではないので、アプリ起動時に最新情報を手動でダウンロードする必要があります。

また、ローカルでの変更とAdwords本体での変更の差分がないかのチェックもできます。万が一複数人で管理する時に作業がかぶってしまっても問題ありません。

左側にアカウント>キャンペーン>広告グループがそれぞれメニューとして表示されます。
運用状況を確認したり、内容の変更はこのメニューから行えます。

一連の流れを動画にしてみました。ナレーションはありませんが、雰囲気は掴んでもらえると思います。

キャンペーンの管理

以下、個別に説明します。
キャンペーンの追加をするには、上部のキャンペンメニューより行います。
1つずつ追加する場合は、「キャンペーンを追加」ボタンから行います。追加する情報は下部に入力欄がありますのでそちらに入力します。

複数のキャンペーンを一括で登録することも可能です。
「複数のキャンペーンの追加/更新」から行います。

一括登録の場合、アプリ上でCSV的な文字情報として入力します。ルールがいくつかあって、
1.列の見出しは英語で
2.項目事の区切りはタブまたはカンマで
3.必須項目は必ず入れてね

以上です。
1の列の見出しは「+」ボタンをクリックすると入力されますので、改行して追加したい項目入力します。

プレビューをすると、項目がきちんと反映されるかがわかります。問題なければ、「処理」ボタンで登録されます。

ざっくり、キャンペーン名と予算だけ登録して、後で詳細を決めるッて感じでもOKです。

登録後の変更でもいいかと思いますが、初期値ですとキャンペーンタイプが「検索ネットワーク(ディスプレイ ネットワーク対応)」になっていますので、「検索ネットワーク」か「ディスプレイネットワーク」に変更した方がいいです。

広告グループの追加

キャンペーンと同様の手順で単体or一括で登録が可能です。操作手順は割愛。
キャンペーンも同様ですが、広告・キーワードが入っていない、運用できない状態の場合、アラートがでますので、一括登録したけど詳細を入れ忘れた。なんてミスもなくなります。

広告の作成

これも同様の手順で行えます。
登録した広告がエラーの場合は、アラートがでますので、その辺もぬかりないですね。

キーワードの追加

これも同様です。
設定しているキーワードの上限クリック単価も品質スコアも見れます。First Page Bidを下回っている時は上限クリック単価の表示がグレーになっています。(少しわかりにくいですけどね)

除外キーワードの設定もここから可能です。

今回新たに運用をスタートするアカウントで使ってみましたが、初期設定にかかる時間がすごく軽減された感じがします。何より、Adwordsの管理画面を見なくてもいいのがすごくいい。
ストレス無く、準備ができました。

僕自身、Adwordsは使い慣れていない部分もありますので、運用段階で足りない機能についてまでは指摘できませんが、少なくともキャンペーン→広告グループ→広告/キーワードの設定までは問題なく設定できました。

ツールに依存しすぎるのもよくないと思いますので、Adwordsの管理画面にも慣れるようにしなければなりませんが、それにしたってAdwords Edtiorかなりいい感じでした。

以上、dwordsのアカウント管理が100倍楽になる。Google謹製アカウント管理ツールのご紹介でした。

知っておくと地味に便利。エクセル系アプリでWEB制作業務を改善する2つのテクニック。

多少パソコンができるから、エクセル得意でしょ?って言われ続け、その度に「できません」って言い続けてます。どうも。塩原です。

この業界の人は割とエクセル苦手って人が多いんじゃないかと思います。少なくとも僕は苦手です。
そんなエクセルですが、うまく使うとWEB制作の作業の中で地味に面倒なあれこれを簡単にすることができるって知っていましたか?

今日は、エクセルを使って作業効率をあげるテクニックをご紹介します。
本文中はエクセルと書いていますが、numbersでも大丈夫です。OpenOfficeは試してません。

資料作成編

レポートとか提案書といったいわゆる「資料」をつくる機会って割とあると思います。
慣れている人はそれこそ、パワポとかで作っちゃうんでしょうが、不慣れな僕は、Illustratorで作っています。
(そこがそもそもの間違いというご指摘はご遠慮ください)

資料の中では当然表組みを作ったりしますが、表組みはIllustratorではかなり面倒です。…その道のプロの方だったら、神業テクニックがあるかもしれませんが、残念ながら僕は知りません。
そんな時に役立つのが…そうエクセル。

エクセルで表を作って、セルの枠、背景色などを設定して
コピペ。

以上。
これだけで、簡単にIllustrator上で表を作ることができます。
セルの色みなんかも当然変更できます。

※僕はこのテクニックで、WEB解析士上級レポートを乗り切りました。

HTMLのテーブル編

WEBサイトのコンテンツを作っている時に、たまにあるのが膨大な表組みをコーディングするという苦行。行数が10を超えると、それはもはや苦行としか言えません。

そんな時にも役立つのが…そうエクセル。

このテクニックは、変換してくれるWEBサービスを利用します。
エクセルシートをHTMLテーブルに変換しちゃう君 ββ

表組みを作って、使いたい部分を選択して、
コピペ。
後は、変換ボタンを押すだけ。

thの入れるとか、classを入れるとかの細かい設定も可能です。

ちなみに、エクセルにはhtmlで書き出しという機能がありますが、独特すぎて使いにくいコードを吐くのであまりおすすめできません。

以上2つのテクニックをご紹介しました。
知っていると地味に便利ですので、機会があれば使ってみてください。

EvernoteでMarkdownを実現する方法について考えてみた。

テキストベースの情報はほぼEvernoteに集約しています。基本的にはEvernoteアプリを立ち上げて書いているのですが、いくらリッチエディタがあるとはいえ、文章を書きながら構造化をしているというのが若干…というかかなりめんどくさいのが問題した。

そうMarkdownが使えればなぁと。

色々調べていくとChromeアプリでMarxicoを利用するとEvernoteでMarkdownが使えるようですので試してみました。

基本的なスタンス

Marxicoで入力したテキストを最終的に出力された形でEvernoteに保存されるという形です。
純粋にEvernoteでMarkdownという訳ではありません。

とにかくやってみよう!

ChromeストアでMarxicoと検索してアプリをインストールします。

初期設定

初期設定として、MarxicoとEvernoteを連携します。
右上の「プロフィール」アイコンをクリックするとEvernoteのログイン情報が入れられます。
入力すると連携完了です。

max00

max01

文章を書いてみよう

Evernoteでは「ノートブック」や「タグ」で分類していると思います。Marxicoでもそれを実現できます。

@(ノート)|タグ|

こんな書き方で、ノートブック、タグの指定ができます。
この時、ノートブックのサゼッションも出るので、いちいち正式名称を覚えておく必要もありません。

Markdown記法ってよくわからないよね…

僕もそうです。Headingとか、リストくらいはわかるけど、それ以外はよくわかんねーし…
大丈夫です。入力エリアの「?」をクリックするとよく使う記法のヘルプが表示されます。

max02

同期はどうするの?

プレビューエリアに同期ボタンがあります。
それをクリックするとEvernoteに同期されます。または、「ctrl」+「S」でも保存されます。
自動ではEvernoteとの同期はされませんが、Marxico自体には保存されています。しばらく同期されていないとアラートが表示されますので、保存忘れてガーーーンって事態も発生しづらいです。
実は、MarkdownとEvernoteにこだわった理由ってここにあります。MueなどのMarkdownエディタもいいんですが、ファイルとして保存されるのがちょっと…あれでして。

max02

これなら、Evernoteに同期されるし、余計なファイルもできないし。

Chromeに依存しっちゃったり、ネットつながってない時は悲惨だったりとまだまだ問題はありますが、しばらく使ってみたいと思います。

Adobe Colorリリース記念。デザインをする時の色選びに役立ちそうなツール

最近めっきりデザインをする機会が減ってきていますが、サイトのメンテナンスなどのちょっとした作業をする時やデザイン依頼をする時など「色」の指定をしなければならない機会はチョイチョイあります。

だいぶ前ですが「色選び」は、センスなのか、誰でもできるのかという議論がありましたが…
色彩センスのない人がそれなりのWebサイトを作るための秘訣3つ
Adobe kulerを使った誰にでもできそうなWeb配色

今日は、僕が利用している&ちょっと導入してみたいツールをご紹介します。

Chroma

これは、以前ブログでも紹介したかもしれませんが、名前が似ててややこしいですが、Chromeのプラグインです。

Chroma

サイトの修正作業などでコーディングしながら色を作りたい時にとても重宝しています。
基本色のカラーコードを入力して、HSBベースのスライダーで調整でき、特に色調の違いで色のパターンを作ってくれる横軸はかなり便利です。こういった色味はなかなかデザインツールだけでは作成できません。

使いたい色をクリックするとHEXでコピーされるので、そのままエディタにコピペできるという手軽さもいいです。
個人的には「#」はいらないですけど…
chroma

Adobe Color

Adobe Color

先日リリースされたアプリです。正確には、Kulerがバージョンアップしたんですが。
このバージョンアップで、iOSアプリがリリースされました。
iOSで撮影した写真から色を抽出して、カラーセット(テーマ)を作成し、共有できます。
PhotoshopCCであれば、Adobeクラウド経由で共有できますし、それ以外でもメールやSNSからも可能です。

写真 2014-10-07 2 31 39
こんな感じで、写真から色を抽出してくれます。

撮影した際に、自動でカラーセットが生成されますが、気に入らない色があれば、修正も可能です。
デザインをする際に、メインとなるイメージがある場合など、全体の色みを合わせたい場合に便利かと思います。
また、普段からよさ気な色使いをしているものを撮影して、テーマをストックしておけば、デザインをする時の色選びがスムーズになるかもしれません。

Kulerはあまり使っていませんでしたが、今回のアップデートでテーマ作成という行為が実生活に落とし込まれた感があります。
普段から意識して「色」という視点で周りをみるようになれば、デザインのセンス向上にもつながるかもしれませんね。

以上、彩りあふれる秋にちなんで「色」にまつわるお話でした。

【Google】related:コマンドでサイトをユーザー視点での分析してみる

最近、めっきりディレクター的な話題ばかりになってきました。
残念ながら(?)検索流入は制作よりのものが多いんですが…。ブログのテーマが定まっていない感はありますが、WEB全般をカバーするくらいの気持ちで気にせずに続けていきます。

さて、「既存サイトでユーザー視点でのニーズを推測してみる」ということですが、うまくタイトルがつけられなかったのでいけませんが、つまりこうゆう事です。

サイトを作成する時、ターゲット、ユーザーのニーズなどを考えて設計していく訳ですが、実際作成したサイトに対して果たして想定したユーザーが来てくれているかということってなかなか調べられない場合もあります。
一般的に、そういった事を調べるためには、Googleアナリティクスなどのアクセス解析を利用して、検索キーワードを調べたり、コンバージョンの有無などから推測するなどの方法、既存ユーザーからのインタビュー調査などが挙げられます。

今日ご紹介するのは、別の切り口での推測方法です。

Googleの検索機能で「related:」というものがあります。
対象URLの関連ページを検索できるという機能です。
ある程度規模が大きいサイトじゃないと検索結果が表示されないんですけどね。
残念ながらこのブログは検索結果0でしたorz

例えば「related:yamaga-fc.com」と検索すると
20140925_related
こんな感じでJ2の各チームが表示されます。
あまり参考にならない感じですが・・・

例えば、ECサイトなどであれば、どういったサイトと関連付けられているかを調べることで、自社の製品がユーザーからどういったランク付けがされているか推測できます。

もちろん、Google的に関連があると判断されるサイトが表示されるわけですので、完全なユーザー視点での関連サイトというわけではありませんが、検索ユーザーの動向は多かれ少なかれ反映されていると考えると、大きく的を外しているものではないと思います。

自サイト分析の一つの指標として使ってみるのもいいかもしれません。

Slicyでphotoshopの画像切り出しが超楽になった件

最近導入したphopshopのプラグイン…じゃないです。psdファイルから直接スライスができるアプリ「Slicy」が超便利だったので、ご紹介します。

有料のMac専用のアプリですが、psdファイルをドラッグするだけで、必要な画像を書き出してくれます。

方法

1.Photoshopを開き、書き出したいパーツをレイヤーまたはフォルダに分けて、レイヤー/フォルダ名を書き出したいファイル名にする。
対応しているのは、pngファイルかjpgファイルですので、拡張子も含めてレイヤー名にします。
slipy-01

2.そのファイルを保存して、Slicyにドラッグする。

以上。

レイヤー名を.pngか.jpgとしてあるものだけ書き出してくれるので、余計な部分は無視しておくことができます。
フォルダ単位でも書き出せるのがいいですね。

jpgの場合は圧縮率を調整できないというデメリットもありますが、pngで書き出して、imageAlphaで圧縮するとか、jpgでもjpegMiniとかで圧縮するって方法もありますので、問題ないです。

作業効率がよくなる以上に、書き出しのアニメーションも爽快で、スライスっていう面倒な作業が楽しく感じるようになったのがいいです。

29$(3,000円くらい)で、決して安くはないですが、がっつりコーディングしている方であれば、十分元がとれるアプリじゃないかと思います。

今更だけど、Podcastいいっすよね。というお話

あけましておめでとうございます。
すっかり更新をさぼっていました。人生はさぼっていませんので、ご安心ください。
忙しかった…わけでもありませんが、どうも更新を怠るとズルズルいってしまっていけませんね。
今年は、このブログの他に自社ブログもスタートするので、効率よくインプットして、きちんとアウトプットしていく癖をつけなきゃいけません。

という訳で、今年一本目のブログの始まり始まり。

Podcastなんて、もう終わったメディアだ。なんて思っていましたが、探せば結構いいコンテンツがたくさんあって、しかも無料(ほとんど)で視聴できるので、侮れません。なので、最近よくPodcastで情報収集をしています。以前から気が向いたら聞いていたのですが、iphoneのPodcastアプリをインストールしたら、まー便利、便利。なんで今まで使っていなかったんだろと後悔しています。

ちなみに、Podcastってのは、インターネット上のラジオの事で、個人単位で音声情報を発信できる仕組みです。
パソコンがあれば、ほぼ無料で視聴できますし、スマホがあれば専用のアプリで視聴が可能です。

で、iOSのPodcastアプリの便利な点を挙げてみます。

便利な点 その1 「再生環境が選べる」

ネットワークの環境に応じてダウンロードorストリーミングが選べます。
田舎で生活しているとやはりストリーミングだけだと厳しいですので、地味に便利です。

便利な点 その2 「再生スピードが選べる」

音声の再生スピードが1.5倍、2倍と選べます。
割とPodcastってゆっくり伝わりやすくしゃべっているのが多いです。(当たり前ですが)
ただ、そもそもじっくり聞くというよりは、「聞き流す」事の方が多いので、通常のスピードだとちょっとゆっくりすぎます。
Podcastアプリには再生スピードの調整ができますので、自分にあったスピードで視聴が可能です。

あと、普段から2倍のスピードで聞く事になれていると、通常のスピードのでの会話の理解が深まったりしたりするかも…

今年の真ん中くらいになったら通勤距離が倍増する予定なので、移動時間で効率よく学べる手段としてかなり注目しています。
Podcastには、音楽、言語、経営系、テック系などなど色々な番組が配信されているので、興味があるものがあれば聞いてみてください。…個人単位で発信できるので、すべてが良質なコンテンツとは限りませんが、面白いものはきっと見つかると思います。

モバイルのテスト用にMacでローカルサーバー環境を作ってみる

最近めっきりスマホサイトの案件が増えてきています。なんだ今更感も大きいのですが、時代の流れですね。
都会からきっちり2年遅れのブーム到来という感じです。(某最大級SNSもですが・・・)

という訳で、CMSでゴリゴリというよりは、スタティックなhtmlでスマホも見れるように…みたいな案件が多いんです、最近。
PCサイトは、そのままブラウザでチェックすればいいのですが、スマホサイトを実機検証したい場合、いちいちサーバーにアップして云々ってのはめんどくさい。

そんな時に便利なのがAdobe Edge Inspectです。
これ、chromeのプラグインを入れて、iphoneでもアプリをインストールしておけば、wi-fi環境でPCのchromeで開いている画面をiphoneでも表示できるという神アプリです。って皆さん知ってるよね。

ただ、一つ問題があって、ローカルのhtmlファイルは対応していないのです。なので、「いちいちサーバーにアップしなきゃ」問題は解決されないのであります・・・

ここで裏技があって、ローカルサーバーを起動して、そこで閲覧すれば、Adobe Edge Inspectも使えるんです。

はい、ここからが本題です。
ローカルサーバーを起動するって、つまりApacheみたいなサーバーを立ち上げるということです。
(だんだん難しくなってきました。)
windowsやmacでは、ローカル開発環境を構築するのに、 MAMPとかxamppなどのアプリを使うのが一般的です。

その方法でも間違いは無いと思いますが、今回のようなケースの場合、phpとかMy SQLとは不要なので、Macにもともと入っているApacheを使ってローカルサーバーを立ち上げてみます。(あと、自分が知らないところで変なアプリが起動しているのも気持ち悪いと指摘されたりしたので)

参考:Androidはワンツーパンチ 三歩進んで二歩下がる-Mac OS X Mountain Lionにシステム環境設定の「共有」パネルに Web 共有のオプションが入っていない件について
上記サイトを参考にしました。

Apacheの起動は、問題なくできると思いますが、Mountain Lionでは公開用のSitesが存在しないようです。
(というか、このSitesってローカルサーバーでの公開用ディレクトリだったって今知りました。)

1.Sitesディレクトリを作成する
2.ローカルサーバーから上記サイトを閲覧できるように設定する
3.Apacheの立ち上げと停止

という手順をふめば、sitesフォルダ内にデータを入れてブラウザからアクセスすればいい訳です。
これで、いちいちサーバーにアップしなくても、モバイル環境のテストができるようになりました。
ちなみに、このローカルサーバーを起動しておけば、同一Wi-fi環境内であれば、IPアドレスからMAC内のサイトを閲覧できますので、Adobe Edge Inspectを使わなくてもモバイル環境での実機チェックができるという。しかも、ネイティブなモバイル環境なので、リフレッシュとかもモバイル側で操作できます。
Wi-fi環境なので、完璧な実機検証とまではいきませんが、表示状況のチェックとしては問題ないです。

あと、テザリング環境でもサイトの共有ができるので、クライアント先でもモバイル環境の確認ができたりします。

これ、地味に便利です。

と、他人のふんどしエントリーですが、とても勉強になったのでシェアします。
※公共環境では、自分のPC内が丸見えになる恐れがあるので要注意。

CSSをはじめたばかりの人がSCSSを導入すべき3つの理由+α

ちょっと釣り的なタイトルで、色々議論の余地もあると思うのですが・・・
自分を納得させるために少し考えてみました。

SCSSなどのCSSメタ言語は、業務としてCSSを書いているコーダさんにとっては、すごく協力なツールになっていると思います。僕自身、あまり難しいことはしていませんが、もはやコーディングをする際にはなくてはならないものになっています。
では、CSSを勉強しはじめた人にとってはどうなのかな?という所ですが・・・
僕個人としては、積極的に使っていった方がいいのではないかと思っています。

理由1 CSSの構文が間違っていたらエラーを吐いてくれるから

CSS自体は、それほど難しい構文を書く訳ではないのですが、慣れていないと凡ミスをすることがよくあります。(よくありました。)
そういった場合、通常のエディタですと、なかなか構文チェックまでしてくれないのですが、SCSSを使って書くと、CSSの構文が間違っている場合、エラーを出してくれるので、ミスに気付きやすくなります。(Preprosでコンパイルすると)
間違いに気付かせてくれるというのは、大きな勉強になると思います。

理由2 コードの使い回し、全体を考えたコーディングがしやすくなる

自分自身を振り返ってみると、CSSをはじめたばかりの頃は、目先のコードに追われて全体を考えずにコーディングしていました。(今も割とそうですがorz)
SCSSを使うということは、@extendなどコードを使い回して効率よく記述ことができるようなります。それは、デザインやサイト構成を把握した上で俯瞰的にコーディングできなと、実現できません。そういった考え方を導入しやすくなるというのは、とても良い事です。

理由3 ルーチン的にできる作業をやらなくてすむ

CSSの習得レベルに関わらず、これが一番大きな理由かもしれません。例えばスプライトとか、いちいち手作業でやっていたら、かなり時間を消費してしまう様な事も、CSCCを使えば、一瞬で実現されます。
それで空いた時間を理由2のような構成を考える時間に当てたり、CSSの表現方法を研究する時間にあてたりできます。
「時間」は有限で、与えられた仕事には「納期」があるわけで、その限られた時間を有効に使うにはやはり、頭を使うべき所に時間をかけるしかないです。
SCSSを使えば、それが実現できると思います。そうゆう意味では、CSSの習得レベルに関わらず、コーディングをしている人は積極的に導入すべきではないかと思っています。

で、最近見つけたPreprosというコンパイルツールがすごくいい感じだったので、おすすめです。
prepros
まず、おしゃれすぎます。
最近流行のフラットな感じです。

でも、このPreprosただのおしゃれアプリではありません。

ドラッグアンドドロップで深い階層も検知してくれる

これはいいっす。
僕の開発環境だと、ブログのテーマが並立しているのですが、従来のコンパイルアプリだと、それぞれプロジェクト定義をしなければならなくて、とても面倒でした。

このPreprosは、一発で、深い階層のSCSSファイルも認識してくれるので、管理が楽になりました。

JSのミニファイ化

jsファイルも計量化してくれます。
…あまり、大規模なjsファイルを書く事はありませんが、モバイル系とかだと、必要ですよね。

画像の圧縮

画像も圧縮してくれます。
これはいいっす。
今までは、web系のツールを利用していましたが、アプリで対応できると処理が楽です。

こんな感じで、よさげなツールでございます。