🔰初めての、マジカ！を利用して楽しい業務フローをGitHubのWikiで公開するまで（Google Drawingsで画像編集） #初心者

対象読者

初心者向け。趣味でプログラムしてる。
システムに詳しくない方にも、わかりやすい（楽しい、親しみやすい）業務フローに興味がある。
□、◇とかで、よく見る業務フロー書くのはちょっとつまんないでも、作ってるプログラムの利用シーンやストーリーは描きたい
GitHubでアプリケーションを作っている。作りたい。のでフロー、マニュアル的なものを用意したい。

本記事の概要

本記事で紹介するのは漫画のように親しみやすいマジカ！のフォーマットでGoogle Drawingsを利用して業務フローをGitHubのWikiで公開するまで。です。
画像付きで細く手順を記載してます。多少知識のある方には退屈な内容かも知れません。

GitHubアカウトを作るところや、アプリケーションを配置するところも未経験でよく分からない時は下記の記事を参考にしてください。

🔰初めての、クラウドを利用してRuby on Railsを動かすまで（Cloud9、GitHub、Heroku）

筆者環境

PDFリーダ　Adobe Acrobat Reader DC
ブラウザ　Google Chrome バージョン 47.0.2526.106 (64-bit)
Mac OSX El Capitan
MacBook Pro (13-inch, Early 2011)
プロセッサ 2.3 GHz Intel Core i5
メモリ 4 GB 1333 MHz DDR3

※WEBブラウザの機能をメインで利用します。Safali、IEでも問題ないと考えてますが、検証しておりません。OSはあまり関係ないと考えてます。

ご挨拶

こんにちわ
普段はJavaEEやASP.netなどを中心にオンプレミス環境での企業向けの業務アプリケーション開発を行っている者です。
お仕事で□、◇とかで、よく見る業務フローをEXCEL、PowerPointなどで書くことが多いのですが。
趣味でプログラムしてて、カチカチした業務フロー書くのはちょっと萎えちゃいますよね。
思いついたことをRedmineやGitHubにチケットを起こしただけで、ドキュメントは作ってなかったのですが。
他の方にもプログラムを使ってもらう時に、説明書なり業務フロー的なドキュメントがいるなと感じた次第です。

普通のフローを最初考えていたのですが、アジャイル開発について調べ物をしていたら、たまたま下記のスライド（78p）を見つけて「マジカ！」を知りました。
AgileJapan2010 佐賀県庁でもできる！プロジェクトファシリテーション

県庁でアジャイル導入とかすごいリスペクトですw
お役所はルール変えるのを嫌がりそうなお堅い職場かなと想像できるのですが、そこでマニュアルとして利用されていたのが、マジカ！ということで興味を持ちました。

マジカ！は本来、紙のカードをハサミで切って鉛筆で書いて利用するものですが。

GitHub用の業務フローとして、漫画のように親しみやすいマジカ！を、Web上で図形編集と公開ができるGoogle Drawingsを利用しています。

私が利用しているフロー作成、公開の手順を🔰初めての方向けに掲載します。ちょっと長いですが順番にやっていただければGitHubのWikiに漫画のような業務フロー、マニュアルを公開できるようになるはずです。

まだ不慣れなことが多く誤っているところがあるかも知れません。初心者です温かい目で見てあげてください。

完成図　(例：日報管理システムを利用した業務フロー)

完成図の例です。４コマ漫画っぽいですよね。□、◇で書くのがダメって事ではなく、プログラムを書くことが目的なら□、◇で書く方がデータ化、システム化したい箇所が整理されていいかも。

1.「マジカ！」をダウンロードする。

株式会社スターロジック　さんのサイトに行きます。
http://www.magicaland.org/

株式会社スターロジック　さんのサイトでマジカについて詳しく載ってますので、「マジカって何？」のページ等をよく読まれるといいかなと思います。

ダウンロードページを開きます。
1. 「ユーザ登録フォームを表示する（・・・」をクリックしてメールアドレス等を登録します。
2. ユーザ登録後表示される、パスワードを控えてください。
3. 「マジカ！ダウンロード」をクリックして*パスワードを入力するとダウンロードサイトが表示されます。

パスワードを入れるところ

パスワードを入れた後表示されるダウンロードサイト
以下の３つのPDFをダウンロードされることをお勧めします。

2.「マジカ！」を体験する。

ダウンロードした「マジカ！概要説明」のPDFを参考に、「マジカ！２０１０　女の子バージョン」のPDFを紙に印刷して、ハサミでカードを切って、鉛筆で書いて、ノリで貼り付けて行きます。株式会社スターロジックさんのサイトでも切って。貼って。並べて。と紹介されてます。

日常の「食事を準備して片付ける」フローを試しにやってみました。楽しいw

紙で一度体験しておくのがベストだと考えてますが、少なくてもダウンロードした「マジカ！概要説明」のPDFは一度読んでおくことをお勧めします。

3.「マジカ！」のPDFからカードを切り出す準備。

Adobe Acrobat Reader DC　をダウンロードします。

「マジカ！２０１０　女の子バージョン」のPDFを Adobe Acrobat Reader DC　で開きます。

ズームを１００％にします。
ツールバーを表示にします。
スナップショット「カメラのアイコン」がなければ、ツールバーで右クリックして下図のようにスナップショットを選択して表示します。

4.カードを貼り付けるため、Google Drawingsの準備。

googleドライブを開きます。
googleのアカウントがない場合は、作成してください。

「NEW」ボタンをクリックして、「More」から「Google Drawings」を選択します。

Google Drawingsの準備はOKです。

5.雛形用のカードを切って、集めます。

「マジカ！２０１０　女の子バージョン」のPDFを Adobe Acrobat Reader DC　で開きます。
スナップショット「カメラのアイコン」ボタンをクリックして、「はたらく」カードの１枚分の領域を選択します。

カードがクリップボードにコピーされます。

Google Drawingsを開いてクリップボードから貼り付けます。
macならcommand+v 、windowsなら Ctrl+vでOKです。

ファイル名を「雛形カード」等、変えておきます。

Google Driveでは下図のように表示されます。作業途中でも自動保存されるので、またここから開いて再開できます。

あとは、どんどん切り出して１個のGoogle Drawingsファイルに集めます。

雛形カード作成。お疲れ様でした。

6.カードを作ります。

雛形カードから、作成したいカードを選択してコピーします。
macならcommand+c 、windowsなら Ctrl+cでOKです。
今回は、「わたしへ」カードを選択します。

作成したいカード用に新しいGoogle Drawingsファイルを作成します。
「File」から「New」を選択「Drawing」を選択します。

新しいGoogle Drawingsを開いてクリップボードから貼り付けます。
macならcommand+v 、windowsなら Ctrl+vでOKです。

公開用に余白は詰めておきます。
右下の三角の線のあたりをドラッグして１枚のカードがちょうど収まるくらいにしておきます。

Google Drawingsの名前を「フロー１：日報の報告を受ける」等　あとで見てわかりやすくしておきます。
「TextBox」(Tマーク）のアイコンをクリックしてテキストボックスを吹き出しのところに合わせて文字を記入します。

必要なテキストボックスを埋めればカード作成OKです。

7.フローをGitHubのWikiに公開する準備。

GitHubを開きます。

この先の手順はQiitaや、Redmineなどマークダウン記述を利用できる他のサービスやブログでも同様のことができると思います。 がGitHubで説明します。

GitHubアカウトを作るところや、アプリケーションを配置するところも未経験でよく分からない時は下記の記事を参考にしてください。

🔰初めての、クラウドを利用してRuby on Railsを動かすまで（Cloud9、GitHub、Heroku）

「wiki」タブをクリックして、「New Page」ボタンをクリックします。

新しいWikiページの名前を「サンプル業務フロー」等、あとで見てわかりやすくしておきます。

「マジカ！」（フロー)の台紙のタイトル欄にある項目をWikiに記載します。

　「シートNo」、「誰が」、「何を」、「何する」　をマークダウン記述の見出し等で記載します。
書く場所は本文の先頭、上図参照。

シートNoは割愛しました。

# 日報フロー
## 誰が：担当者
## 何を、どうする：日報報告する

準備OKです！

８.フローをGitHubのWikiに公開する。

公開したいカードのGoogle Drawingsファイルを開いて、
「File」から「Publish to the web...」を選択します。

下図のポップアップが出ますので、「Publish」ボタンをクリックします。

下図のポップアップが出ますので、「OK」ボタンをクリックします。

下図のポップアップが出ますので、画面の指示に従いコピーします。
macならcommand+c 、windowsなら Ctrl+cでOKです。

GitHubのフロー用に作成してるWikiページで本文の末尾に改行1、２回入れて。
「画像」アイコンをクリックします。
下図のポップアップが出ますので、「Image URL」にURLを貼り付けます。
macならcommand+v 、windowsなら Ctrl+vでOKです。
Alt Textはカードのファイル名等何かしら記入しておくと良いと考えます。（省力してもいいかと思います。）
「OK」ボタンをクリックします。

下図のように、画像用の記述が埋め込まれます。「Preview」タブをクリックして確認します。

下図のように、プレビューを確認することができます。

公開してよければ画面の右下にある「Save Page」ボタンをクリックします。

公開できました。　
　ちょっと誤字、脱字がありますね。。。　あとで修正します。

公開までOKです！もう少しです。

９.フロー、カードを修正する。

はじめに。
誤字、脱字などのカードの修正は簡単にできるのでご紹介します。

公開している＆修正したいカードのGoogle Drawingsファイルを開いて、テキストボックスを追加、編集します。
自動保存されます、以上です。

GitHubで公開しているフローのWikiページを見ると修正した内容が反映されてます。簡単！

カードの追加、並び替えなどはフローを書いているWikiページの「Edit」ボタンを押してこのページの手順「６〜８」と同じ要領で追加していきます。ざっくり。

２枚目以降のカードも「手順６」同様、Google Drawingsで雛形カードからコピーして作成して、解りやすい名前をつけます「フロー２：日報管理システムに日報を登録する」などとして、公開用のURLをコピーします。

GitHubのフローを書いているWikiページの「Edit」ボタンを押して、画像リンクとして新しく追加するカードのURLを記入します。そして保存。

2枚目以降のカードも追加されたフローができました。こんな感じです。

修正までOKです！お疲れさまでした。

終わりに

いかがでしたか？
この記事では業務フローの基本的な考え方や、マジカ！の考え方などについては割愛させていただきました。

実際にちゃんとした業務フローを作成するには、別途調べていただくとか、書いていただくしかないと考えてます。私も勉強中で、偉そうなことが言えません。

いっぱい覚えることはありますが、自分で作ったアプリケーションのフロー、マニュアルを漫画のようにフレンドリーに表現できるのは楽しいものですよね。

まとめ

マジカ！　どんなもんだか。まずは紙に印刷して、切って、並べて、貼り付けてみる。
マジカ！と Google Drawing　があれば漫画風のフレンドリーなフローを手軽に作成、公開できる。
カードの修正をGoogle Drawing　ですれば、公開されているカードの画像に直接反映されるのが簡単で素晴らしいです。
□、◇で書くフローも大事。マジカ！で書くと誰が何をするかがわかりすい。
システム作成するときには、どこを、どのようにシステム化するかが見えづらい？かも。

参考記事

マジカ！、業務フロー関係
マジカランドへようこそ！
仕事を「見える化」する業務フローのかんたんな作り方
 AgileJapan2010 佐賀県庁でもできる！プロジェクトファシリテーション

README,Wikiの参考
わかりやすい README 駆動開発

Tips

余談ですが。
GitHubのWikiページは下書きモードでの保存ってないと思うのですが
私は途中でも気にせず公開しちゃってます。
気になる方は、マークダウン記述できるエディタなどで下書きされてから公開する方がいいかもしれません。サイトの目的が違うけど、Qiitaの下書き保存は便利ですね！