dev-edu

教育系の Web サービスやアプリなどを紹介

「Bubble.is」は現在最強のプロトタイピングツールだと思う

f:id:toka-xel:20160122202107p:plain

ちょっと前にアプギガさんで紹介されていた「Bubble」。
plus.appgiga.jp

コード不要で独自Webサービスをブラウザ上で無料開発できる

ということで、興味津々、色々といじってみました。
確かにアプギガさんが言うように、簡単なWebサービスを作るだけなら、本当に簡単にできます。
ただし、全くプログラムを作ったことがない人にはちょっと難しいです。
「昔プログラムを作っていたけど、今はプログラムから離れちゃった」という方にはオススメです。
恐らく、すぐにコツを覚えて、GUI だけで Webサービスを作れてしまうでしょう。
この体験は結構感動ものです。

本番には使えない理由

ただし、やはりこのサービスを本番利用するのは、現時点では厳しいものがあります。
具体的には次のようなところが気になりました。

レスポンシブ対応していない

 Bubble はレスポンシブ対応していません。画面サイズは固定となります。今時、ありえないですよね?
 モバイル対応をするときは、モバイル用のページを別に作成する必要があります。
 index に対応するページとして index_mobile を作るといった具合です。
 index の mobile version という項目に index_mobile を設定しておくと、スマホで index にアクセスすると自動的に index_mobile に飛ばされるという仕組みになっています。
 ただ、この仕組みはコンテンツブロッカーが働くとうまくいかないようで、コンテンツブロッカー(Crystal など)が入った Safari だとページが表示されません。
 これがあるとないとじゃ大違いですので、ぜひ、皆さん、レスポンシブ対応するように1票入れてください。
Bubble - Features Lab
 ここの一番上に「Responsive Page Design」というのがあります。ユーザーの一番の要望なようです。

バージョン管理ができない

 Bubble の内部的にはバージョン管理しているようなのですが、まだユーザに解放されていないです。
 そのため、「前のバージョンに戻したい!」なんて時は大変です。
 Application のクローンを作ることは可能なので、自分でクローンを作っておいて、バージョン管理するというのが、今のところ必要です。
 DB も手動で CSV などに吐き出してバックアップする必要があります。なかなか厳しいです。

DB が重い

 簡単なWebサービスならあまり違和感なく使えるのですが、DB にちょっとしたデータを入れただけで、すぐに遅いな〜と感じると思います。(環境によると思いますが)
 日本向けには作られていないので、恐らく日本から遠いところにサーバがあるのでしょうね。AWS を使っているっぽいです。

自由度が低い

 元々あるパーツだけで作るのであれば、本当に簡単ですし早いのですが、こだわりだすと大変です。
 「コード不要」の代償は「コードを書けない」ということでした。プログラマはイライラするでしょう。
 デザインなどにも色々と制約がありそうです。DB の設計もパーツに合わせて考えないといけません。

本番用としては今は無理。だけどプロトタイピングとしては最強

上で書いたとおり、本番用としては今は無理だと思います。身内だけで使うような簡単なツールとかなら本番でもいいかなと思います。
その代わり、プロトタイピングツールとして考えた場合、これに勝るツールはないと思います。
だって、GUI でお絵描きして、 GUI で DB と Workflow をセットするだけで本物のWebサービスとして動き出すんですよ。
そんなツール今までありました??
これなら、打ち合わせしながら、その場で動くプロトが作れます。紙芝居のプロトとは違うんです。
凄腕のプログラマなら、今でも打ち合わせしながら、その場で動くプロトを作れるかもしれませんが、Bubble の凄いところは、プログラムを書けない人でもその場で動くプロトが作れてしまう。そこだと思います。

bubble.is

続きを読む

Udemy の Autumn Sale。本当に安いけど、2日おきに ¥200 づつ値上がりするのは勘弁してほしい

f:id:toka-xel:20151124150422p:plain

今週の金曜日は 2015年の Black Friday 。もう今週くらいから各所でセールが始まっています。

先日、Udemy からも Autumn Sale をやるよ!とメールが来ていたので、見てみたら、めちゃくちゃ安くなっていました。
17,000 以上のコースが対象らしいのですが、日本語の対象コースは 9つだけ紹介されていました。

Autumn Sale 対象コース(日本語)

www.udemy.com

www.udemy.com

www.udemy.com

www.udemy.com

www.udemy.com

www.udemy.com

www.udemy.com

www.udemy.com

www.udemy.com

どれも2015年11月24日現在で ¥1,600。ちなみに一昨日は ¥1,400 でした。2日おきに ¥200 づつ値上がりするとのこと。
見たい講座があれば、早めに申し込むことをお勧めします。
なお、この中で「未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース」の元値が一番高く、¥34,800 です。なんと 96% OFF。
値段設定間違えてるんじゃない?って思うくらいですね。400レッスンって凄いです。お得度は最も高いと思います。

Autumn Sale のページを見ていて気づいたのですが、日本語のコースは 9つしか対象じゃないように思えますが、もっと多そうです。
Top 9 だけしか紹介していないみたいですので、気になるコースがあったら、検索してみてください。
もしかしたら、Autumn Sale 対象になってるかもしれませんよ。

全国で生まれつつある「英語村」について調べてみたら、なんだかとても面白そう

f:id:toka-xel:20151119172955p:plain

大阪の万博公園で OSAKA ENGLISH VILLAGE が今日オープンしたというニュースがありました。
国際/ニュース/ニュース/KBS World Radio

なぜか日本のニュースが見つからず、韓国のニュースサイトです。
こちらは韓国の語学教育関連企業「YBM時事」が手がけているそうなので、韓国のニュースには上がったのでしょう。

また、東京でも同様に東京オリンピックに向けて「英語村」を作る計画が上がっています。www.sankei.com

こちらは東京都の資料(PDF)
http://www.metro.tokyo.jp/INET/KONDAN/2015/10/DATA/40pas100.pdf

「日本人が英語を覚えられないのは、そもそも使う場面が少ないから」と私なんかは考えていたので、「勉強」以外で英語を使う場面が増えるというのは良い施策だなと思います。でも、そもそも何をやるのか、よくわからなかったので、少し調べてみました。

「英語村」とは?

東京都の資料に次のような記述があります。

近年、民間においては、国内にいながらにして、外国とほぼ同様な環境を作り、その中で英語学習を行う施設が出来てきている。いわゆる「英語村」と言われるものである。

ここから考えると、「英語村」というのは、「国内にいながら外国とほぼ同様な環境で英語学習できる施設」と考えることができると思います。
国内で留学経験できるというイメージでしょうか?
海外に行きたくないという若者が増えていますが、英語の重要性は高くなっているので、ニーズには合致しているように思います。
基本的に日本語禁止。英語のみで外国人の講師の方とコミュニケーションを取るプログラムになっています。
レベル判定をあらかじめ行い、その人の英語力に合わせたプログラムを実施してくれるようです。

「英語村」でやること

東京都の資料にわかりやすい図があったので、引用させていただきます。
f:id:toka-xel:20151119154110p:plain

これを見ると、買物、食事、旅行、遊び・ゲームやスポーツといった日常的な体験から高校生になるとプレゼンなどを行うことなどを考えているのがわかります。
なかなか面白そうですね。小学生のうちは楽しいことばかりですが、上の学年に行くと結構大変そうに思えます。
中高生は宿泊もできるとのこと。本当に英語漬けのようで、親としては是非子供を入れたいと思いました。

また、大阪府の英語村のホームページを見ると「シチュエーションルーム」というのがあるのがわかります。
シチュエーションごとに部屋が割り振りしてあり、そのシチュエーションで役になりきってコミュニケーションをとるようです。
f:id:toka-xel:20151119155405p:plain

例えば、109 の部屋をクリックすると、次のダイアログが表示されます。
f:id:toka-xel:20151119160847p:plain

ここは洋服屋さんのようです。店員さんになったり、お客さんとして購入することもできるみたいですね。
キッザニアみたいで楽しそう!

そういえば、キッザニアにも英語を使うプログラムがありました。これも「英語村」の一つと言えそうです。www.kidzania.jp
また、キッザニアは東京都の「英語村に関する有識者会議」の委員になってます。
ちょっと期待してみたくなります。

今体験できる「英語村」

調べてみると、だんだん面白そうだなと思ってきました。そこで、今現在ある「英語村」を調べてみました。

ブリティッシュヒルズ(福島県

神田外語大学などを運営する学校法人佐野学園が福島県羽鳥湖高原に1994年に設立。
もう20年もやっているようですね。最古参の部類かと思います。
「パスポートのいらない英国」というキャッチコピーがズバッと入ってきます。
東京都の「英語村に関する有識者会議」の委員www.british-hills.co.jp

キッザニア 英語プログラム(東京都、兵庫県

子供たちの大好きなキッザニアで英語を使ってお仕事をするプログラムです。
東京都の「英語村に関する有識者会議」の委員www.kidzania.jp
www.kidzania.jp

Language Village(静岡県)

富士山麓に位置する敷地5000坪の施設で国内留学。
英語漬けの合宿制英会話学校。languagevillage.co.jp

近畿大学 英語村 e-cube(大阪府

近畿大学が 2006年に始めた英語村。
普段は近畿大学の学生だけですが、一般公開の時期は高校生以上が参加できます。
東京都の「英語村に関する有識者会議」の委員
www.kindai.ac.jp

OSAKA ENGLISH VILLAGE(大阪府

冒頭に記載しましたが、本日(2015/11/19)オープンの英語村です。englishvillage.co.jp

まとめ

いろいろと調べてみましたが、結構楽しそうですよね。
フィリピンへの留学なども人気ですが、やっぱり安全面が心配ですよね。
本当に海外に留学させるとなるとお金ももちろんの事、安全面など気になることも多いので、国内でこういう施設があるのは、親としては嬉しいと思います。
今後、続々と増えてきそうな予感がしました。

余談

東京都の「英語村に関する有識者会議」の委員について調べていたら、そこにお笑いコンビ「パックン・マックン」のお二人の名前がありました。
パックンってハーバード大学を出ている天才なんですよね。面白い人たちが集まっているんだな〜と思い、期待も高まりました。

広告なし、オフライン・バックグラウンド再生可の「YouTube Red」が気になる


Meet YouTube Red - YouTube

本日(現地時間では 10/21)、広告なし、オフライン再生、バックグラウンド再生ができる「YouTube Red」が正式発表されました。
Official YouTube Blog: Meet YouTube Red, the ultimate YouTube experience

日本でも色々なところで報道されています。
Google、YouTube Redを10/28から開始―音楽、映画、テレビ番組、見放題、聞き放題で月額9.99ドル | TechCrunch Japan
「YouTube Red」正式発表──広告無し、オフライン再生可能、特別番組ありで月額10ドル - ITmedia ニュース
YouTubeが広告なしの有料サービス「YouTube Red」発表、オフライン視聴やGoogle Play Musicの利用も可能 - GIGAZINE

私もかなり気になっているので、まとめてみました。

YouTube Red に入ると何が嬉しいのか?

1. 広告なし

YouTube のユーザーにとって、一番煩わしいのは広告です。
確かに広告なしで YouTube を見れるというのは魅力でしょう。ヘビーユーザーであれば、なおさらです。
広告モデルで生計を立てている YouTuber たちへの影響については興味があります。

2. オフラインで再生が可能

気に入ったコンテンツをダウンロードしておいて、オフラインで再生ができるというのも多くの人にとって嬉しい機能でしょう。
実際に YouTube のコンテンツをダウンロードするアプリやツールというのは多数出ていました。
これらは多分 YouTube の規約的には NG なんでしょうけど、ようやく NG ではない方法でダウンロードできる方法ができたというのは良いことだと思います。
ただし、ダウンロードしたコンテンツは30日間しか見られないというところは、利用者の立場からすると厳しいですね。
ずっと見たいものについては、30日ごとにダウンロードしないといけないということだと思います。
いや、そういうものは、DVD などの円盤を買えってことか・・・。
円盤がないものはちょっと面倒くさいですね。

3. バックグラウンド再生

YouTube のコンテンツをバックグラウンドで再生することができるというのはいいですね。
仕事やランニングなどをする際に音楽などをBGMとして使っている人は多いと思います。
実況系の動画をラジオ代わりに聞いたり、海外の動画を英語の学習コンテンツとして聞くというのにもいいでしょう。

4. YouTube の他のサービスも使える

YouTube Red に登録すると、YouTube Music や YouTube Gaming なども使えるようになるとのこと。
音楽聴き放題の「Google Play Music」も使えるようになるそうです。

5. YouTube の特別番組を視聴できる

Google のオリジナルの映画や番組が提供されるとのこと。これは蓋を開けてみないとどうかわかんないですね。
現段階では期待はしないでおいた方がいいかも。いい番組が来たら、ラッキーと思っておきます。

価格

月額 $9.99、ただし iOS版は月額 $12.99

iOS版が高いのは、Apple へのお布施が必要なためでしょうけど、いい気はしないですよね。
$1 = ¥120 で計算すると、約¥1,200/月(iOS版は 約¥1,560/月)です。
若干高いような気もしますが、競合を見るとこんなものかなと思います。
iOS版の Apple へのお布施は、Google の中で吸収して欲しい!

まとめ

YouTube のヘビーユーザーや、YouTube の規約無視したダウンロードアプリなどを使ってしまっている人は、入っておいた方がいいでしょう。競合のサービスと比べて、価格帯はあまり変わりませんが、コンテンツの量で YouTube に敵うところはありません。
ただ、広告を受容できたり、コンテンツをダウンロードする必要がない人にとっては、必要性は高くはないと思います。

うちの子供達もひたすら YouTube 見ているので、入った方がいいのかなと思わなくはないのですが、年1万円以上を YouTube に払うと考えると、ちょっと厳しいような気がします。そのお金があるなら、ニコ動のプレミアム会員になってとか言われそう・・・。
私は今は保留ですが、4. や 5. 次第では入るかもしれません。

静的Webホスティングの Divshot が Firebase に合流

f:id:toka-xel:20151014095903p:plain

今朝方の Firebase からのメールが来ていました。
Divshot が Firebase に Join するとのことです。

www.firebase.com

Divshot とは

静的Webホスティングサービス。
コマンドラインでファイルをアップしたらすぐに公開できる簡単に使えるWebホスティングサービスの一つです。
Github Hosting の機能強化版とか、Heroku の Static版とか言われることがあります。
特徴的な機能は次の2つです。

1. 環境が3種類用意されている

開発環境(Development)、顧客テスト環境(Staging)、本番環境(Production)の3環境があらかじめ準備されています。また、それぞれの環境でバージョン管理された URL が発行されています。そのため、打ち合わせ中に前のバージョンがいいなどの話になった場合でもその場で、前のバージョンを見せられるという便利なサービスになっています。

運用イメージは次のような流れです。

(1) 開発者が Development 環境で開発
(2) デバッグが終わったら、Staging 環境に反映
(3) 顧客に Staging 環境で動作してもらう
   フィードバックがあれば、(1) へ
   フィードバックがなければ、Production 環境に反映してサービス開始

他のサービスでは1プロダクトにつき1環境が当たり前だと思うので、同じようなことをやろうとした場合、3プロダクト分確保するなどをやらなければいけないので面倒でした。
また、バージョン管理された URL などはないので、前のバージョンがいいという話になった場合は、古いバージョンのファイルをアップしなおす必要がありました。

2. 基本認証が使える

Development と Staging 環境については、基本認証が使えます。
これによって、公開前の状態でも安心して外部に置くことができます。
意外と基本認証が使える Static Web Hosting ってないんですよ。
Divshot は無料から使えますから、これは貴重です。

というわけで、真面目に Webサイト、Webアプリ(SPA)を開発するなら、Divshot はとても使えるサービスです。

Firebase のホスティングサービスは?

Firebase にも Firebase Hosting というホスティングサービスがあります。この Firebase Hostingの良い点は無料でいくつでも環境を作ることができることです。
そのため、結構気楽にファイルをおいてテストしたりしています。

ただ、機能は多くなく、上で挙げたような Divshot の特徴などは持ち合わせていないため、この環境で開発するのは不安がありました。

そこで、私の場合は、Divshot と Firebase Hosting の両方を使っています。

Divshot が Firebase に Join して何をするのか?

Divshot のホスティングの機能はとても優れていますので、恐らくは Firebase Hosting が Divshotに切り替わるような感じなのかなと期待しています。そうしてくれると、Firebase とだけ契約すればいいので、私みたいな人間には楽でうれしいです。
ただ、Divshot は無料プラン以外は結構お高いので、従来の Firebase Hosting に比べて値段が上がったらちょっと嫌だなと思います。まあでも Google 傘下になるので、そこは心配しなくても大丈夫かな〜?

まとめ

日本では Firebase を使って開発する人って少ないと思うのですが、環境は整ってきていると思います。
日本語の情報が少ないのがネックですが、価格も格安ですし、Webサイト、Webアプリを作っている方にはオススメです。

おまけ

Divshot には BootStrap ベースの Web のオンラインエディタとしての機能もついています。むしろ、昔はそちらがメインでした。
先日紹介した Pinegrow の オンライン版のようなものです。
オンラインで Bootstrap ベースの Webサイトを構築できてしまうので、とても手軽で便利なのですが、私が試したときは応答が今ひとつで使うのにストレスを感じてしまうような状況でした。Google 傘下に入ることでこちらの機能も進化してくれるとうれしいのだけれど・・・。

Keynote を使って説明用動画を作成する

マカーのみなさん、Keynote って使っていますか?
私は Windows 歴が長かったもので、プレゼン資料は長いこと MicrosoftPowerPoint を使っていました。
独立後、お金がないので、PowerPoint を買わずに Keynote を買ったのですが、PowerPoint に比べると断然おしゃれで見栄えがいいです。
私の用途だと、無料の Office Online の PowerPointMicrosoft Sway でも恐らくは事足りるのだと思うのですが、デザインセンスのない私には、普通にやってるだけで見栄えがよい Keynote はとても重宝しています。

今回はこの Keynote を使って説明用の動画を作成する方法を紹介します。

1. Keynote のテンプレートを選んでスライドを作る

f:id:toka-xel:20151008154212p:plain
Keynote を起動して最初に行うことは、テンプレート選択だと思いますが、動画を作成する前提であれば、テンプレートは「ワイド」のものを選択します。
理由は、YouTube などの動画共有サイトの縦横比が 9:16 になっているためで、テンプレートも同じ縦横比 9:16 の「ワイド」のテンプレートで作成した方が、後で動画にしたときにおかしな表示にならないためです。
標準のテンプレートでもかなりおしゃれですよねー。ただ、私がいつも使っているのは「グラデーション」。シンプルで使いやすいですが、安っぽくないところがいいと思っています。

テンプレートはいろいろなところがおしゃれなものを出しています。techinfographics.com

ご参考まで。

テンプレートを選んだら、説明用のスライドを作ります。
スライドの作り方は今回は割愛。

2. スライドに合わせて話す内容を決める

スライドに合わせて話す内容を決めます。この話す内容は、録音中に見ることができる必要がありますので、録音するデバイス以外のところで見れるようにしてください。Evernote などに話す内容を記述することによりスマホでも見れるようにしておくとよいです。

3. スライドショーを録画する

いよいよ 1. で作ったスライドを使って、2. で決めたことを話しながらスライドショーを録画します。
メニューの中から「再生」を選択し、「スライドショーを記録」をクリックします。
f:id:toka-xel:20151008162454p:plain

すると、録画するための画面が表示されますので、①録音ボタンを押して録音を開始、②次のスライドをめくり、③最後まで行ったら X ボタンで終了 します。うまくいけば、1度で録音も終わりですが、うまくいかない場合は何度かトライしてみてください。
f:id:toka-xel:20151008164451p:plain

4. スライドショーを出力する

うまく録音できた場合は、動画ファイルをエクスポートします。「ファイル」-「書き出す」-「QuickTime」を選択します。
f:id:toka-xel:20151008165444p:plain

プレゼンテーションを書き出すので「次へ」をクリックし、ファイル名を入れたら m4v ファイルが出力されます。
f:id:toka-xel:20151008165614p:plain

まとめ

Keynote を使うと簡単に説明用の動画を作成することができます。
ただ、録画は1発録りになるので、長いとミスも多くなります。そのため、この方法は短い動画の場合のみ有効でしょう。
長い動画を扱う場合には、細かい単位で録画を繰り返し、最後に ScreenFlow などでつなぎ合わせる方が簡単だと思います。

iPhone の標準アプリ(ボイスメモ)を使ってナレーションを録音し、メールで録音データを送付する方法

今、いろいろと動画コンテンツを作成しています。
ある程度しっかりしたものを作りたいと考えているので、プロの方にナレーションをお願いしたのですが、スタジオでしか録音をしたことがない&パソコンよりもスマホiPhone)の方が慣れているようでしたので、今回は iPhone でナレーションを録音してもらい、アプリからそのまま私のところにメールで飛ばしてもらうことにしました。以下、その方法について説明します。

準備するもの

  • iPhone
  • ボイスメモ(標準アプリ)

ボイスメモで録音する

1. ボイスメモの起動

ご自分の iPhone から「ボイスメモ」のアイコンを探して起動します。
f:id:toka-xel:20151007172308p:plain

2. 録音開始

ボイスメモの上段の赤い丸ボタンを押して録音を開始します。
f:id:toka-xel:20151007174721p:plain

3. 録音停止

録音が終了したら、赤い四角ボタンを押して録音を停止します。
f:id:toka-xel:20151007175019p:plain

4. 録音データの確認

録音を停止したら、再生ボタンを押して録音データを確認します。
f:id:toka-xel:20151007175700p:plain

5. 録音データの保存

録音データに問題がなければ、完了ボタンを押します。
f:id:toka-xel:20151007180053p:plain

名前を入力するダイアログが表示されますので、名前を入力して保存します。
f:id:toka-xel:20151007180431p:plain

6. 録音データの送付

保存されたデータを選択し、共有ボタンを押します。
f:id:toka-xel:20151007222559p:plain

「メールを送信」を押します。
f:id:toka-xel:20151007222749p:plain

メールの画面が表示されるので、宛先や本文などを修正して、メールで録音データを送信します。
f:id:toka-xel:20151007222910j:plain

まとめ

ボイスメモで簡単に録音&メールでデータを送付することができました。
ボイスメモはここで紹介した以外にもトリミングが出来たり、バックグラウンドで録音出来たりと思っていた以上に高機能でした。
これでナレーションの録音データが出来たら、ScreenFlow などを使って動画に組み込むことができます。

感想

スマホタブレットのアプリは操作性がよく考えられているため、初心者でも簡単に使えるところがいいですね。
特に若い人はパソコンよりもスマホの操作の方が慣れていますし、同じことを頼むなら若い人にはスマホでできる方法をお伝えした方が良さそうです。
自分はなんでも Mac でやってしまう癖がついているので他人にもパソコンを使うことを要求しがちなのですが、スマホタブレットでもできることは極力スマホタブレットを使うようにした方が良いのかなと思いました。
また、プロのナレーターでも長い文章を読んでもらうとたまに間違うことがあります。適当に区切りを入れて細かい単位で録音をするようにするようにすると良さそうです。