YAPC::Asiaでも「ちらほら」使われた「App::revealup」の進捗 #yapcramen

先ほど行なわれたYAPC::Asia Tokyo 2014で @bayashi さんが「YAPCラーメンチャレンジ」みたいなタイトルのLTをしてた。つまりルールはこんな感じ。

指名された人はラーメンを食べるOSS活動へ貢献し、次の人をまた指名する

まぁ某氷水ですね。僕はLTの最中に @bayashi さんから指名されたんで早速二郎を食べた。

ラーメンだけでは太るだけ。なのでOSSコミットしたい!そこで最近つくったMarkdownテキストで「一瞬にしてクールなスライドがつくれる」 App::revealup がYAPCでもちらほら使われていたので最近の進捗と先ほど行ったアップデートについて言及する。以下は「ちらほら」使われている様子のツイート集。


ちなみに詳しい解説はこちらのエントリーを参考のほど。

さて以下進捗。


serve => server へサブコメンド名を変更

スライドを立ち上げるには revealup っていうコマンドにサブコマンドを渡すんだけど、今までサブコマンドが2つあった。

  • serve
  • theme

でもこれだと動詞と名詞でなんか気持ち悪いので、互換を保ちつつ、名詞に統一させました。

 $ revealup server slide.md --port 5000

こんな具合でMarkdownを指定しつつスライドを立ち上げられます。

transitionの指定が可能に

その server サブコマンドに引数渡すとスライドをめくる際のトランジションを指定出来ます。種類が

  • default
  • cube
  • page
  • concave
  • zoom
  • linear
  • fade
  • none

これだけあって、まぁ単に revealjs にパラメータを渡してるだけなんで revealjs 頑張ってんなーって感じっす。

$ reveal up server slide.md --transition zoom

とかやるとページ送る度に「ぐいんぐいん」ズームしてきます。

ページ毎の背景色変更などが実は可能だった

昨日のYAPCリジェクトコンでYAPCの発表の時に使ってくれた鳥居君と話してて、

ページ毎に背景色やトランジションを変えたいけど出来ないですよね

それな!

ってなってたんだけど、どうやら revealjs の機能で出来るぞこれ。具体的にはタイトルヘッダの下とかに

## 見出し
<!-- -- data-background="#ff0000" data-transition="fade" -->

とか入れればOK!ってことでPODに足した。


以上、現場からの報告は以上です。引き続き、App::revealup を宣伝してくれる方を「ちらほら」募集しています。

このエントリーをはてなブックマークに追加 7 リアクション

たった一つの依存で #yapcasia のトーク応募ソーシャルランキングをつくる

YAPC::Asia実行委員長として、ただいま皆様から頂いたトーク応募を、絶賛選考中であります。トークの選考にあたっては

また選考者だけで判断がつかない場合はFacebookのいいね!やはてなブックマーク等のフィードバックの数・内容によって採択されるかどうか決まる事がありますので、トークを応募した後はFacebook、Twitter、ブログ等での拡散をお勧めいたします。

という判断基準がありますので、当然、ソーシャルボタンの反応を可視化して見やすくしたいところ… と思っていたらMishima.pm でお世話になった dokechin さんが「YAPC::Asia 2014 Talks 総選挙」という名で、はてぶ数やツイートされた数でトークのランキングをWebで一覧出来るものをつくってました。で、この記事で紹介するのは、その「 車輪の再発明 」です。

彼のコードでは Mojo::Template を使っている割には他の Mojo::* モジュールを使っていなかったので「Mojoliciousディストリビューション」のみだけで似たようなことが出来ないかな?と考えました。MojoliciousにはMojo::UserAgentと呼ばれるHTTPクライアントのみならず、Mojo::DOMもしくはMojo::DOM::*モジュールが同封されており、HTMLのパースとその中の要素に対しCSSセレクタを使用したアクセスも可能となっています。つまりスクレイピングに便利なモジュールが cpanm Mojolicious しただけで入っちゃうってわけです。

例えば、今年のYAPC::Asiaのトーク群をそれぞれ、いちトークずつ処理し、タイトルやURL、スピーカーの名前とアイコンURLを取得するようなコードは以下のように書けます。

my $ua = Mojo::UserAgent->new;
my $tx = $ua->get('http://yapcasia.org/2014/talk/list');

my $talks = [];
for my $n ( $tx->res->dom('div.talk')->each ) {
    my $talk = {
        icon_url => $n->at('div.icon a img')->attr('src'),
        speaker_name => $n->at('div.speaker p.name a')->text,
        title => $n->at('div.title a')->text,
        url => 'http://yapcasia.org' . $n->at('div.title a')->attr('href'),
    };
    push @$talks, $talk;
}
...;

ね?簡単でしょ?ちなみにMojo::DOMって初めて使いましたけど (・ω<)

で、今回やってみたのは、トーク情報だけをスクレイピングして、各種SNSのシェアカウントをAPIで叩く。各トークの内容をハッシュ構造にする。トークリストが配列リファレンスになるので、それをJSON形式のファイルとしてダンプ。表示はAngularJSを使ってそのJSONを読み込みませて表にする。という具合です。以下が完成品のスクショ。

SS

はてぶ、Twitter、Facebook、トータル別にそれぞれソート出来るので便利〜

基本的に個人用につくったので、Webで公開などはしませんが、ソースは以下に置いてありますので、興味のある方はお使い下され〜

このエントリーをはてなブックマークに追加 1 リアクション

Mishima.pm #1 に行ってきました

昨日7月12日(土) に開催された Mishima.pm #1 へ、Japan Perl Association = JPA の「講師派遣制度」の講師として行ってきました。メインのセッションは14時から17時まで、三島市民活動センターの会議室にて開催です。

Mishima.pm

自分。JPAの中の人ですが、Mishima.pm主催の dokechinさん からのリクエストをいただいたため、ありがたく三島へ足を運ぶことになります。参加応募をしていたATNDのサイトでは、当初希望者数がひと桁台で、かつ、関東圏で顔なじみの面子が多かったことから若干「だいじょぶかな」感あったのですが、結果、地元の方を含め「はじめまして」な方もいました。参加人数は10人となりましたが、そのくらいの規模でいいかもしれないし、もっと地元の人を増やすことも、まだまだ第1回目なので、可能性はあるなぁ〜と思いました。

Mishima.pm

僕のトークですが、諸々迷った末、dokechinさんからもらっていた要望のうちの一つでもある「ビジネス」にまつわる話をしました。といってもたいそうなことでは無く、メイン言語としてPerlを使う技術者である僕が、どんな仕事をしてきているか?そして働き方をどのように考えているか?をまとめたものです。題名は「とある Perl Monger の働き方」です。


まぁ、Perlで仕事、と言うと大規模サービスをやっている会社のエンジニアリングがパッと頭に浮かぶのですが、それだけじゃない働き方もあるよん♪ということを言いたかったのと、それをあえて、東京からちょっとだけ遠い三島で話すことに意味がある気がしました。

会場とスケジュールの都合上、マコピーとytnobodyさんのトークが打ち上げ場所の居酒屋で行なわれたのですが、なんかよかったw 上記した10人という人数だからこそ出来る技でもありますね。

マコピー

いやー、三島の駅から会場がある三島広小路方面へ歩いてみたのですが「 ウナギのタレ臭 」がすごいっすね。時間に余裕はあったものの、ちょいと緊急ノマドしなくてはいけない状況だったので、我慢しましたが、次に Mishima.pm へ行く機会があればなんとか食べたい次第であります。

おまけ

雑なやつ。

パピックス

このエントリーをはてなブックマークに追加 1 リアクション

Mishima.pm #1に行きます

来る7月12日の午後に開催される Mishima.pm の「#1」に参加します。今回は主催の dokechin さんからのご指名で、JPA(一般社団法人 Japan Perl Association)の「地域PM向け 講師派遣支援プログラム」で参加させてもらいます。以下が今回のイベントの募集ページ。

現状の参加者リスト見ると、東京の人が大半を占めてる感がありますので、三島近辺の人に参加してもらってお話したいと思う次第です。ちなみに Mishima.pm のHPを見ると

静岡県はのぞみが停車しません。PerlMongerの集まり(pm) はYokohama.pmとNagoya.pmがあるけれど、静岡県には無いなあ。というわけでMishima.pmを立ち上げてみようかな。

http://mishima-pm.blog.jp/archives/1085073.html

という事の発端らしい!さて僕はトーク枠1時間頂いているのですが、ただいまテーマ未定。最近はYAPC関係の作業が多いのでその話をしつつ、ボケての開発を中心として最近の流れをオーバービューしようかなとも思います。もし話してもらいたい内容があれば @yusukebe までリプライプリーズ!

このエントリーをはてなブックマークに追加 0リアクション

僕が2年連続でベストトーク賞をとれた訳 #yapcasia

おはようございます。ゆーすけべーです!最近では「YAPC実行委員長のわだ」という名目の元 8月28日〜30日に行なわれるYAPC::Asia Tokyo 2014 の運営をやってます。振り返れば2008年から参加しているこのYAPC::Asia。当然、思い入れがいくつかあります。その中でもいわゆる「成功体験」として大きかったのは2012年、2013年と ベストトーク賞1位 をいただいたことです。ベストトーク賞とは参加者の「このトークが一番面白かった!」という投票によって決まる称号です。

ベストトーク賞

副賞も頂いて去年は海外のYAPCである「YAPC::NA(North America)」への参加を補助してもらいました。ウェーイ!下の写真がその模様の一部だけど、とっても楽しかったゼ!

YAPC::NA

YAPC::Asiaでは基本的に、20分もしくは40分のWebやITの技術トークを一般参加者が聞く。という形で進行していきます。ちなみに毎年、発表したい!という人が応募概要をサイトに投稿し、運営側が最終的に採択するか決定します。僕は、これもありがたいことに、2009年のYAPCから毎年トークするチャンスがあって、まとめると以下のようなタイトルでした(Lightning Talk=LTは除く)。

  • 2009年 - Yet Another BPM Framework Kailas 今はなきコーポレートトラックで親父と二人で発表した
  • 2010年 - Twitter解析サービス 自分で作っている小さなサービスについて話した
  • 2011年 - 画像Hacks Perlから画像をいじって最終的にはCAPTCHA破り的なことまでデモった
  • 2012年 - 「新しい」を生み出すためのWebアプリ開発とその周辺 Webアプリの企画から丁寧に経験を解説
  • 2013年 - Mojoliciousでつくる!Webアプリ入門 2012年の実装版というような具合

YAPC::Asia 2013

直近の2年は「ベストトーク賞」をいただいた。と書きましたが、その前の3回の発表はぶっちゃけ ややウケ 程度でしたね!

さて、どうせ発表するならば… 「ベストトーク賞」という は欲しいわけで〜 今年のYAPC::Asiaもベストトーク賞を決める投票があるわけで〜 そのために僕が考えていた「僕なりの」アプローチを偉そうですが… ちょいと紹介してみます。

0. 注意

まずはじめに注意なんですが、今年のYAPC::Asiaは僕が運営委員長なため、トークの採択にも当然関わります。だからといって、以下に書いてあることをそのまま実践すればトークが採択される、というのは ありえません !アドバイスとしてヒントになることも含まれますが、とある個人の参考意見程度に捉えて、オリジナルのトーク概要を応募してください。 発表のスタイルやテーマは人それぞれ ということを許容するのがYAPC::Asiaですしね。

1. 声を上げない層をターゲットとする

YAPC::AsiaというとPerlに限らずWebエンジニア界隈のスーパーハッカーの集まりというイメージがあります。その見方も間違ってはいないのですが、一般的にオーディエンスとして参加している人達はスーパーハッカーでは無いのも事実です。というか去年の来場者数がYAPCワールドベストレコードな「 1,130人 」だったのですが、みんながみんなスーパーハッカーだったら「スーパーってどういうこと?」ってなります。

YAPC::Asia

で、よく観察してみると、グレイトな ライブラリやサービスをつくっているハッカーは「ただ口も声も大きいから」目立っているだけで、1,000人という規模の来場者からしたら実はごく少数のマイノリティなんすよね。それに気づいたため、2012年と2013年はかなり戦略的に、内容を初心者〜ミドルクラス向けのレベルにしました。また自分が経験して来たノウハウの中でも、なるべくキャッチーな事柄を扱いました。例えば2012年の40分の発表では、Webアプリの低レイヤーの実装の話はあまりせずに、企画の立て方や設計などを中心に話しました。以下がその時に使用したスライドです。


おかげさまで朝一番でかつ裏番組に強豪がいる中にもかかわらず、多くの人に来てもらい、満足度も高かったようで嬉しかったです。上記の注意にも書きましたが、単にレベルを下げて「迎合」すればいいという話でも無く、自分の得意分野や経験がある事柄を、事例と共に噛み砕いて紹介するのがポイントかと思います。あ、そうそうPerlの自体の話も成分多めじゃなくて良いっすね。

2. 応募概要をキチッと書く

採択には概要ページでの「いいね!数」や「はてぶ数」などソーシャルネットの評判も考慮されますが、なんと言っても運営側が内容を判断するたった一つの手段である 応募概要 が重要です。これは実行委員長としての意見ですが、2〜3行とかだけだと何を話すのか分からずにリジェクトしちゃうかもしれません。例として2013年の時に応募した概要を画像で掲載します。

応募概要

既に僕なりのフォーマットがあって、これもまぁ人それぞれなんで参考にしてください。

  1. 問題提起 なぜこのトークをする必要があるのか?
  2. 内容 簡単にどんなこんなことを話すってのを書く
  3. 注意事項 個人的なメッセージや見る人へ向けての注意
  4. トピックス 箇条書きで話したいことを書く

とにかく話している姿がイメージ出来るくらいにシッカリかつ簡潔に書くといいと思います。

3. とにかくトークする

これが一番重要!もちろんYAPC運営側として「たくさんの人にトークを申し込んでもらいたい!」という願いもあるのだけれど… 特に未だYAPCで発表したことの無い人に向けて、もし、あなたが少しでも「YAPCで話してみようかな…」なんて思っていたら、とにかく今すぐ応募するべき!だと思います。応募概要大事って言ったけど、7月4日の締め切りまでだったら修正出来るし。

そう言えば cho45 が最近以下のようなBlog記事を投稿していました。

ここに書いてあることは本当にそうだと自分の経験からは言えるなーっと思いましたね。特に「懇親会対策」。そもそもYAPC::Asiaのあり方として「 トークをツマミにビールを飲む 」なんて言う裏コンセプトを実は考えていて、同じエンジニアとして発表以外の場でラフに語り合うのもYAPCの楽しみ方の一つです。そんな時に自分がトークしておけば「ツマミ」を既に持っているわけで… 見ず知らずの人とも話す良いキッカケになるのです。

場所は違えども、YAPC::NAで僕が頑張って、テンションアゲアゲで片言の英語を喋って、発表をした後に

Good talk!

って話しかけてくれて嬉しかったなぁ みつを。

YAPC::NA

最後に言いたいことは

自分が思っている以上にみんなは自分を求めているかもしれない

ってことです。上記のYAPC::NAでも、今までのYAPC::Asiaでの発表でもそうなんだけど「これウケるのかなぁ〜」って不安だった事柄が自分にとっては「意外や」評判良かったりするパターンはよくあります。そしてそれに気づくためには行動をしないと気づけないのです。YAPC::Asia Tokyo 2014では現在トーク募集中。今までの自らの経験をまとめてトーク応募することがその行動の第一歩になるでしょう!別段、失敗しても損はしないし、面白くなさそうなトークだったらそもそも採択はしないので、リスクも無いですね!運営としてもイチ観客としても「まだ見ぬ君のトークが観たい」…


ってことで以下YAPC::Asia Tokyo 2014のトーク応募ページです。

PS.

トークが採択されたらチケットレスで入場出来ます。が、もちろん一般チケットも販売中ですよ。

このエントリーをはてなブックマークに追加 9 リアクション

一瞬でクールなスライドがつくれる「App::revealup」をリリースしました

タイトルは釣り気味ですが、実際に英語で紹介してくれているBlog記事「Create professional slideshows in seconds with App::revealup」を参考にタイトル付けました。最近CPANライブラリとしてつくって、Yokohama.pm#11とGotanda.pm#01で話した便利ツール「 App::revealup 」についてです。以下はそのBlog記事のスクショ!

App::revealup

勉強会などで用いるスライドなんだけど、ちょっとした資料の場合、Keynoteとかパワポを使いたくないってケースが結構あります。ただそれだといくつか問題があって

  • 専用のソフトを起動するのがだるい
  • 結果的にバイナリファイルだから diff がとれない
  • なのでレポジトリに入れることも含め管理しにくい
  • 手に馴染むエディタを使いたい
  • 簡単なプレゼンだと「タイトルと箇条書きと画像くらいでしょ?」

と思うところがありました。そこで個人的には記法にも慣れている Markdown 形式で内容を書いて、スライドショーが出来たらいいな〜と思い、探しだしたのが reveal.js です。

このreveal.jsはJS側でMarkdownのパースを行うのですが、それが賢くて、かつ、見た目がクール。表示に関する様々なコントロールも出来ます。外部のMarkdownファイルを読みこむことも可能なのがポイントですね。

reveal.js

通常、利用するにはGitHubのレポジトリページから clone するなりダウンロードするなりでJSやCSSを含むライブラリを取ってきてHTMLの雛形をカスタマイズします。

しかしちょいとこれを利用するには、上記の通り、ライブラリファイル群を取ってこなくてはいけないし、Markdownファイルを参照させるにはローカルホスト上などにHTTPサーバを立てなくてはいけなく面倒。そこで今回つくったのが App::revealup です。

App::revealupはreveal.jsのライブラリを内包していて、HTMLやJS/CSSなどの適応をヨシナにやってくれるHTTPサーバを立てる機能があります。例えば slide.md というスライド向けのMarkdownファイルがあったとして付属する revealup コマンドを使えばreveal.jsが適応されたスライドショーがlocalhostで立ちます。

$ revealup serve slide.md

お気に入りのブラウザで http://localhost:5000 にアクセスすればスライドショーが見れるでしょう。

ちなみに以下がスライド用のMarkdownのサンプルです。

# 大見出し

'---' と書くことで横方向へのページ遷移が可能です

---

## 中見出し

'___' と書くことで縦方向へのページ遷移が可能です

___

### 小見出し

以下がリスト表現

* アイテム 1
* アイテム 2
* アイテム 3

また、いくつかオプションがあって「5001番ポート」で立ち上げて、reveal.jsにデフォルトで用意されているテーマ「night」を使い、切り替えのエフェクトとして「zoom」を使う場合はこんな具合。

$ revealup serve -p 5001 --theme night --transition zoom slide.md

revealup

さらにオリジナルのCSSテーマを適応することも出来ます。上記のテーマ「night」をベースに original.css を生成しそれを参照させるためには

$ revealup them generate --base night --output original.css
$ emacs original.css
$ revealup serve --theme original.css slide.md

というような工程を経ます。



このApp::revealup。 イートマイドックフード しているのですが無駄なセットアップ無しにMarkdown書くだけでスライド準備出来ちゃうし、見た目カスタマイズしたければ雛形からCSS自分で書けばいいんで相当便利っすよ!よろしければ使ってみて下さい。 patchissue もウェルカムです。

このエントリーをはてなブックマークに追加 23 リアクション