Code for Ibaraki の柴田です。
この記事は、シビックテック (Civic Tech) に役立つツール、サービス、Tipsなどをテーマにした、「Civic Tech お役立ちツールキット Advent Calendar 2018」企画の15日目のための原稿です。他の記事は一覧から見られるようになっており、日ごとに記事が増えていく予定です。
本日、ご紹介するのはシビック・ハッカソン？に役立つ開発ツールです。（なお、言うまでもありませんがプロ向け開発環境に関する記事ではありません。もちろん、他の便利なツールについての情報などコメントいただけるとうれしいです）
課題「市民向けハッカソンで利用できる開発ツールでふさわしいのは何か？」
シビックテック活動をしていると活動の一環としてハッカソンを企画される方もいらっしゃると思います。もしくは、ハッカソン運営を依頼されたりすることもあるのではないでしょうか？
その際、市民主体のハッカソン（シビック・ハッカソン）では参加者属性にありがちな以下の問題があります。エンジニアがたくさんいる都会なら起きないかもしれないのですが、地方ではたまに（よく？）あります。
・ハッカソンなのに参加者の中にプログラム経験がある人がほとんどいらっしゃらない（30人中2人とか）
・プログラムを書いたことがある方はいらっしゃるけれど、システム全体を構築した経験がない
・（スマホ時代なのか）そもそもPCをさわったことがない
・ネットの基礎的仕組やデータベースなどをご存知ないのでフロントエンド、バックエンド、UX担当みたいな役割分担を行うことが難しい
そんな中でハッカソンを開催し、ついでに参加者や見学の人たちからの期待が超高まっている時に主催者は一体何をすればよいのでしょうか？そんな条件下でハッカソンをやらないというのが正解だとは思いますが、そこは義理人情、世の中そうはいかないことも多いものです。そんなときは
TL;DR プロトタイピングツールとLCDP
主催者の助けとなるのがプロトタイピングツールとLCDPです。
###１．プロトタイピングツール
UX開発で利用されるプロトタイピングツール類ですが、ある程度動くものを作るという意味であれば十分役立ちます。むしろ、MVPを作成するという趣旨のハッカソンであればぴったりかもしれません。海外ものだとBalsmiq、axure、Figma、ADOBE XD、InVisionなどいくつものツールがありますね。
おすすめは日本で開発されたグッドパッチさんの**Prott(プロット)**です。国産なのでPrott自体のユーザインタフェース、マニュアルなどはもちろんすべて日本語です。画面遷移設定も直感的ですし、ワイヤフレーム作成やカメラ撮影したペーパーモックを動かしたりなどいろいろな使い方が出来ます。パワーポイントなどでスライドを作成した経験があればすぐに利用できるようになる学習の容易さもおすすめ理由の一つ。メールによるユーザ登録のみで30日間はProプランが無料で試用でき、期間を過ぎてもフリープランで利用できるという太っ腹。いや、本当にありがたいです。
基礎的な使い方はProttさんのブログ記事にあります。動画もありとてもわかりやすいので、ご覧いただきぜひ使ってみてください。自分が持っているスマホでモックと言えども動作するのを見た参加者が喜ぶこと請け合いです。
###２．Low-code Platform
プロトタイピングツールでは期待した成果が実現できない、もうちょっと本格的に作りたい。そんな場合はLow-code platform(ローコードプラットフォーム)を使いましょう。これはコードをほとんど書かずにアプリができる開発環境を意味する言葉です。Low-code platformはまたLCDP(low-code development platform)ともよばれます。通常のプログラミング言語による開発とは違い、GUIでインタフェースやロジック、データベースなどを構成する開発環境のことで主に開発者ではない現場のエンドユーザが開発に使うことを想定しているものです。子ども向けプログラミング教育で有名なScratchがイメージとしては近いかもしれません。Scratchでは作ることが出来ない実用的アプリを開発できるのがLow-code Platformということになります。
Low-code platformは3つの特徴を持ちます
1.GUIによるビジュアルな開発、コードを書く必要がないか、ごく少量です
2.開発後にすぐ利用することが出来る
3.スケールもできる(実行時コンテナ追加)
この特徴のおかげで、まるで初めての方でもある程度のものを短時間で構築することが出来るためシビックハッカソンにはぴったりです。
LCDPにはWebおよびモバイルアプリ開発、さらに両方に対応できる製品もあります。海外製品が多いのですが有名なものとしては OutSystems、mendix、Salesforce lightning、Zoho Creator、Betty Blocks、AppSheet、Dropsourceあたりでしょうか。気をつける点としては、企業ユーザを対象にしているため利用料金がお高くなる場合もあり、事前に確認が必要です。シビックハッカソンに利用するなら無料プラン（もしくは無料試用期間）があり、登録が簡単なものが狙い目。また、ビジネスニーズに特化しており、スプレッドシートやデータベースを元にワークフロー自動化というような用途には向いていますが、それ以外だと有償の別途プラグインが必要なこともあります。
国産ではこの分野、サイボウズさんのKintoneがあげられます。シビックハッカソンなんかで利用されている事例もよく聞きます。
おすすめLow-code platform Bubble(バブル)
最後に先日シビックハッカソンで利用したBubble(バブル)を紹介させていただきます。
Bubble自体はWebアプリを作成するためのツール（レスポンシブ対応なのでスマホでも使えます）です。画面に配置したい部品をデザインタブから選び、それらの部品にワークフローとよばれるロジックを設定することでアプリを作り上げます。2時間弱で完了できるインタラクティブレッスンが大変良く出来ているので、初心者でもこなすことでマニュアルを読むことなしにアプリを作ることが出来るようになりました。（BubbleのWebサイト自体がBubbleを使って作られています）
海外製品なのでユーザインタフェース・マニュアルとも英語です。それなのにここでご紹介する理由はこの製品、創業者ジョシュ・ハースさんがニューヨークで2012年にBubbleを創業した際、起業のために簡単に使えるLCDPを目指して作られたものだからです。シビックハッカソンで実現したいことをやるのに便利な機能がたくさんついています。また、無料プランがあるためメールアドレスを登録するだけですぐに開発に入れるのも良い点です。足りない機能もサードパーティによるプラグインを追加したり、プラグイン開発することで実現できます。
（無料プランは作成したアプリのフッタ部分にBubbleのロゴが入ります。また保存データ容量は２Gまでです）
インタラクティブレッスンの内容をタイトルだけ日本語に訳したものはこれです。Bubbleでできそうな事がイメージできるのではないのでしょうか。
#####Bubble チュートリアル 一覧
レッスン１ データ保存のやりかた
住所を保存して地図上にそれを表示してみよう 約６分
レッスン２ ユーザ登録システムを作ろう
ユーザの新規登録とログインの仕組を作ろう 約７分
レッスン３ 保存されたデータを表示・変更する方法
自分の好きな都市名の人気投票ができる掲示板システムを作ろう 約１０分
レッスン４ スライドショーを作る
美しい写真を表示するスライドショー部品を作ろう 約３分
レッスン５ 複数ページを作成し、リンク先ページでデータを使う
複数ページ間でデータを共有する 約１０分
レッスン６ 条件分岐を使ってボタンクリックの反応を変化させよう
条件分岐を使って、アプリの動作を洗練しよう 約５分
レッスン７ APIという仕組でデータ取得しよう その１
GiphyにあるアニメGIFを検索し表示してみよう 約６分
レッスン８ 何行にもわたるデータを扱う方法を覚えよう
リストデータを持たせる方法を覚えよう 約８分
レッスン９ APIという仕組でデータ取得しよう その２
iTunes APIで曲を検索し、該当のURLを表示しよう 約５分
レッスン10 グラフ表示要素を使おう
データ表示のためグラフ表示要素を使ってみよう 約8分
レッスン11 Facebookを使ったソーシャルログイン
Facebookでログイン、FBプロファイル情報を取得しよう 約6分
英語インタフェースですが、GUIであることと部品内の説明も簡単な英語なので、参加者が講師画面を見ながら1時間ほどインタラクティブレッスンのハンズオンに取り組んでいただいた後は、各自で作成を開始できていたようです。
###最後に
シビックハッカソンではプロ並みのアプリを作り上げるというよりも市民自身が自分たちの手で出来る（Yes, I can）な体験をしていただく場だと思っています。また、実際にMVPを作り上げることで体外的なPRが可能になったり、その後の活動につながるきっかけづくりとなる場です。エンジニアが集まらないからシビックハッカソンが出来ないではなく、シビックハッカソンで使えるツールを探すと案外いろいろと見つかると思います。
今年はGoogleさんもG suite向けにApp makerを正式発表していますし、LCDPは社会のデジタル・トランスフォーメーションを進めるための切り札となるかもしれません。みなさんもこんな便利なツールがあるよ、ツールを使ってみてどうだったというような話があれば是非、情報をシェアしてください。
それでは皆様、良いお年をお迎えください