ストーリーボード

ストーリーボードに機能追加のお知らせ

Markdownでプレゼンテーションが作れる「ストーリーボード」に新年早々機能が追加されましたよ。のお知らせ。

スマートフォンビュー対応

いままでストリーボードのスライドをスマートフォンで開くとPC版の縮尺まま表示されていたので、twitter等で拡散されたものをスマートフォンから開いた際に表示が崩れたりしていたのですが、いい塩梅に縮尺されて表示される様になりました。

f:id:hideack:20140103143832j:plain

ソーシャル拡散ボタン追加

スライドを閲覧した最後にソーシャルで共有するためのボタンが表示される様になりました。

f:id:hideack:20140103143731p:plain


何故かREMPチームは年末年始に必死に開発する傾向がある。去年はfacebookページをこしらえていた記憶が...。

でも、こうやって今年も年初から取り組めるものを運営できているのは幸せなことですね。

ストーリーボードが絵文字に対応しました

Markdownでプレゼンテーションを作成できるストーリーボード でエモーティコン(絵文字)が使える様になりました。

GitHub Flavored Markdownに対応しているのでMarkdownを記載する際に

:smiley:

などと記載してもられば、f:id:hideack:20131222191258p:plain というアイコンにスライド上では置換されます。

気楽にスライドを華やかにできるので是非お試しください。

ストーリーボードのプレゼンテーションをblogに貼れる様にした

ということで、twitterアカウントでアナウンスしたのですが改めて。

ストーリーボード で作成したプレゼンテーションをブログ等で埋め込める様にするためのブログパーツの提供を開始しました。
ストーリーボードで提供する閲覧用のURLを貼ることで今までもblog等でプレゼンテーション資料を紹介はできていたのですが、埋め込み用にきちんと調整した形で提供しています。@による細かいところまでの調整で比較的イメージ通りのプレゼンテーションが表示されているのではないかと思います。*1

例えば、こんな形で使うことができます。REMPの使い方3ステップとか。

プレゼンテーションの資料以外にも、簡単なフォトスライドの様に使っても良いなと作り手は思ったりしました。

使い方は簡単でメニューに埋め込みコードの表示が追加されています。

f:id:hideack:20130922142028p:plain

是非ご利用ください!

*1:Slideshareみたいにしたいな…。と思っていたのが実現しました。

ストボのスライドを貼ってみた

ストーリーボードで作ったスライドをはてなブログに貼れないかなと思っていたら、Googleガジェットにすると貼れるということを知ったので試してみた。


ちょっと表示側を調整する必要はありそうだけど、普通に動きますな。
ストーリボードはこちらから。http://www.storyboards.jp/
中身について知りたい方は、このあたりのエントリを。

参照

はてなダイアリーユーザーは iframe to GoogleGadget で救われる! - Gadget Girl はてなダイアリーユーザーは iframe to GoogleGadget で救われる! - Gadget Girl はてなダイアリーユーザーは iframe to GoogleGadget で救われる! - Gadget Girl このエントリーをはてなブックマークに追加

ストーリーボードその後(3)

地味にあれこれ活動していますよ。

Sqale通信に利用例として取り上げていただきました!

詳しくはこちら!

ストーリーボードのバックエンド等々のお話

ストーリーボードをSqale(http://sqale.jp )へ運用を移管したのは以前簡単にここにも書きましたが、一度どういった技術を使っているのかまとめがてら整理してみます。

実装

現在、実装周りでは、

などを利用しています。

Youtubeの動画を連続して再生することができるYoutubeプレイヤー REMP(http://remp.rockf.es/ )のころからのスタイルでサーバ再度側は基本的にAPIが主体となる様な設計になっており、WebUI上からの操作をJSが吸収して、サーバサイドのAPIを叩き、その応答をJSが再びUIへ反映させるといった構成になっています。
私が担当したサーバサイド側の実装では、大きく分けて、

  • 最低限必要なページの生成
  • 編集されたプレゼンテーションドキュメントの保管
  • プレゼンテーションに利用する画像の保管
  • プレゼンテーション操作(ページめくり等)が行われた際のページめくり情報のWebsocket配信

等を行なっています。

プレゼンテーション自体のデータ(=Markdown記述)は現在Sqaleでは共用MySQLサーバは提供されていますが、今回はMongoDBを利用しているため、ここのみ外出ししたMongoDBに接続し保管しています。
また、プレゼンテーション用にアップロードされた画像はヘテムル(http://heteml.jp )へAmazonS3互換の動きをするfS3を導入してアップロードされた画像をストーリーボードのサーバーサイドプログラム側からS3プロトコルで画像をストアしています。

更にストーリーボードの一つの特徴であるページめくり等を同じ時間にプレゼンテーションページを閲覧しているユーザにページめくり操作をマルチキャストしたり、閲覧中のプレゼンテーションに対してリアルタイムで"いいね!"をすることができる機能を実現するためにWebsocketを導入していますが、ここは現在Websocket ASPサービスであるPUSHERを使っています*1

監視サービス

監視サービスですが、Pingdomを使っています。
基本有償サービスですが、1サイトのみであれば無償で利用できます。

HTTP疎通の死活監視を行なってくれるので、最低限の状況は把握できるので役になっています。

利用状況解析

お約束感がありますが、mixpanelgoogle analyticsを使っています。
RubygemsmixpanelというGemがあるので、これを利用してストーリーボード上のAPIが呼び出される度にログを記録する様にしています。
基本、ストーリーボード上で何らかの操作が行われるとストーリボードのサーバサイドAPIが叩かれるので、ページめくりAPIが多いとどこかのプレゼンテーションの発表に利用されたかな。とか利用状況がわかったりします。

こんなかんじです

以上大雑把ではありますが、ストーリーボードの実装概要をまとめてみました。
今後も機能をどんどん足していくし(と思うし)、新しい技術も今後積極的に入れていきたいのでまたある程度溜まったら記事を書こうかと思います。

*1:いつか自前で実装するといつつ、すごく気楽に利用できるので使い続けてます…

ストーリーボードその後(2)

ステッカーを作成したよ!

サービスのステッカーを作りました。
機会がある度に配布しております。欲しい方は是非お声がけを!

http://distilleryimage10.s3.amazonaws.com/46adaf4c2a2a11e2ab4322000a1fa430_7.jpg

短縮URLをプレゼンテーション開始時に表示

プレゼンテーションを開始する際にプレゼンテーションを閲覧できるURLを短縮して表示される様になりました。これをプレゼンテーション開始前にtwitter等で共有することですぐにプレゼンテーションを閲覧するユーザの方にプレゼンテーション内容をシェアすることができます。

まだまだ機能足していく予定なのでご期待を。

ストーリーボードその後

お産合宿6でリリースしたストーリーボードですが、しつこく機能改良を続けていたりします。
リリースの後も開発メンバそれぞれがスキマ時間活用して、以下の様な機能を追加してリリースしました。

  • プレゼンテーション内で利用する画像のアップロード機能
  • トップページのリニューアル
  • facebookページの作成
  • レーザーポインタ機能
  • ストボいいね機能の追加
  • 操作用iPhoneアプリの開発
  • アプリケーションサーバをペパボのPaaSであるSqaleに移行

等々...。

先日もペパボ社内のLT大会で利用して開発メンバーが発表したり、社外でもLT等の発表時に利用していただけるユーザの方がおられたりと少しずつではありますが、利用実績も出てきました。
既に更に改良を進めて、もっと便利になっていくはずなので、是非機会があればご利用ください。

f:id:hideack:20121028171824p:image

ストーリーボード - STORYBOARDS ストーリーボード - STORYBOARDS ストーリーボード - STORYBOARDS このエントリーをはてなブックマークに追加