vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。

関モバ #19で発表してきました

Event Remark.js JavaScript

はじめに

10/26に行われた関モバ #19で発表してきました。

kanmoba.connpass.com

今回のネタは前回のWebVR。

https://masanori840816.github.io/KanMoba19/slidepage.html

緊張もしたし、時間も少しオーバーしたしで反省点も多いですが、まぁやりたいことはやれたかなと。
何より冒頭の ハロウィン -> 仮装 -> 仮想 -> 仮想現実 のネタがカブらなくて良かったww

準備

10月に入って多少は軽減されたものの、なんだか微妙に忙しく、資料の準備の時間が取れていなかったこともあり、思い切って一日休んで準備に当てることにしました。

で、作業する場所が必要ってことでコワーキングスペースに行くことにしました。

oinai-karasuma.jp

場所的に烏丸御池に近く、なかなか良かったと思います。
何より利用するのに何も聞かれなかったのが良かったw (以前利用した、住所など聞いてきたところが特殊だったのかもですが)

スライドについて

発表で使用するスライドは、いつもLibreOffice　Impressで作ったものをPDFに変換してSlideShareにアップロードしていました。

ただ正直結構面倒で、内容がコード主体になるのだから、もっとシンプルで良いのでは？と思ったので、今回はGitHub PagesとRemark.jsを使って作成してみました。

GitHub Pages

GitHub PagesはGitHubを使って静的なWebページを表示できるサービスです。

GitHubで ユーザー名.github.io というリポジトリを作成し、「index.html」というファイルを直下に置いてやると、ユーザー名.github.ioというページにアクセスできるようになります。

https://masanori840816.github.io/
※空のindex.htmlを置いているので、アクセスしても真っ白なページが表示されるだけですが。

で、それは一旦置いておいて、もう一つ別にリポジトリを作成します。

そのリポジトリをcloneし、「git checkout gh-pages」でブランチを切り(オプション--orphanはつけている場合とつけていない場合がありました)、そこに後述するWebページの素材を置くことで、下記のようなページにアクセスできるようになります。

https://masanori840816.github.io/KanMoba19/slidepage.html

Remark.js

Remark.jsは、Markdown形式のファイルを読み込んでスライドっぽく表示してくれる、Javascriptのライブラリです。

使い方としては、Remark.jsを読み込んで、コンストラクタ生成時に読み込むファイルを指定するだけです。

slidepage.html

< !DOCTYPE html >
< html lang="jp" >
< head >
    < meta charset="UTF-8" / >
    < title >Mobile + Web + VR< /title >
    < style type="text/css" >
        @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
        @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
        @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
    < /style >
< /head >
< body style="color: #000000;">
    < script src="js/remark-latest.min.js" type="text/javascript" >< /script >
    < script type="text/javascript" src="js/slidepage.js" >< /script >
< /body >
< /html >

slidepage.js

(function () {
    var slideshow = remark.create({sourceUrl: "md/mobilewebvr.md"});
}).call(this);

とってもシンプルですね。

で、あとはMarkdownで内容を書いていくだけです。

mobilewebvr.md

< div style='font-size: 80px; position:absolute; top:30%; left: 10%;' >
Mobile + Web + VR
< /div >
< div style='font-size:40px; position: absolute; bottom: 5%; left: 5%;' >
2016.10.26 @関モバ
< /div >
< img id='top_image' src='img/pumpkin.png' style='width: 256px; height: 256px; position:absolute; bottom:2%; right:4%;' >< /img >
---
# Who?
### Name: Masui Masanori

### Twitter: [@masanori_msl](https://twitter.com/masanori_msl)

### Blog: [vaguely](http://mslgt.hatenablog.com/)

### GitHub: https://github.com/masanori840816

### App: [SearchWakayamaToilet](https://play.google.com/store/apps/details?id=jp.searchwakayamatoilet)
---
～省略～
  • ページとページを区切るには、「---」を追加します。
  • 縦幅から勝手にページを分けてくれるわけではないため、実際に表示させながら確認が必要となります。

1ページ目はあれこれ場所指定したり、画像を読み込んでいるためあんまりMarkdownっぽくはないですね…。
まぁでも、要素部分だけを書けば良いのは結構楽でもあります。

なお、コードを書く部分は`(バッククォテーションを使用します)

` ` ` xml
body {
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
    margin: 0px;
    padding: 0;
    overflow: hidden;
}
` ` `

※各'の間のスペースは取り除いてください

この書き方が最初わからず、あれこれ試行錯誤してしまいまいした。

あと、作成中はWebVRと同じくSpringBootの雛形プロジェクトを使って動かしていました。

ローカルで動かすとWebブラウザのセキュリティで引っかからないようにする必要があったことと、GitHubPagesにアップしながら調整するのも不便なので。

とりあえず各ページの内容をザザッと書いてしまって、細かい見た目の調整はWebブラウザの開発ツールを使うと便利かと思います。

読み込んだ時点で表示しているページのソースしかいじれないとはいえ、リアルタイムで調整していけるのはすごいですね。

しかし、このシンプルさで問題ない場合はかなり便利に資料が作れてしまうのではないでしょうか。

いやぁ、Javascriptってスゴイですねぇ(小並感)

おわりに

会場提供及びスポンサーとなっていただいたはてな様、主催者の皆様、そして温かく発表を見守っていただいた皆様、ありがとうございましたm( )m

次回は(間に合えば)epubの読み込みとかやってみたいかも…？

参考

Remark.js

GitHubPages