Month: 7月 2015

GEEKLY SUMMARY #3

Web系プログラミングの問題解決や勉強に役立つ、情報共有・質問などができるサイトまとめ 自分が遭遇したことのないバグとその解決法を併せて知るという使い方も確かに良さそうですね。Stack Overflowには何度も助けら Read More

GEEKLY SUMMARY #2

「通信の最適化」の論点 通信の最適化問題議論への感覚論 使用しているキャリアによって画質のクオリティが変るというという事にとても違和感を感じます。 最近、話題になっていたので色々と追っていましたが、結構前から上がっていた Read More

GEEKLY SUMMARY #1

マイナビクリエーターセミナー「Webデザイナーのための仕事効率向上セミナー – 現場ですぐに役立つPhotoshop仕事術」が終了しました – DTP Transit Photoshop CS20 Read More

NOOBSでらくらくスタート、Raspberry Pi☆

ラズベリー竹井です。 先日、小松の記事でも軽く触れていましたが弊社では希望者にRaspberry Piが条件付きで支給されます。 その条件とは「支給後一ヶ月以内に何かしらのプロダクトを社内公開する事」です。 公開後は自由 Read More

HTMLでスライドを作成するぞい

こんにちは。ディレクターの小松です。
約1年ぶりの投稿ですw

お気づきでしょうかこの1年で【アシスタント】という文字が取れていることに!
まだまだペーペーで迷惑かけっぱなしなんですが肩書きだけはしっかりしたので、負けぬよう頑張ります。

さて今回のブログではHTMLでスライド作成してGithub上に晒そうというものです!
用意するものは以下です!

  • エディター
  • Git
  • Githubアカウント

ここらへんの準備は割愛します。
作成する手順は以下になります。

  1. ライブラリのDL
  2. スライド作成
  3. Git Push!!!!

このお手軽3工程でページが公開できます。
では、順を追って説明していきます。

1.ライブラリのDL

https://github.com/hakimel/reveal.js
このライブラリを落とすだけで終わりです!!!!
このライブラリはMarkdownにも対応しているものなので、HTMLとMarkdownがどちらか書ければ、さくっとスライドを作れちゃいます。

2.スライドの作成

細かいことは抜いて作り方を紹介します。

編集対象

ライブラリ内のindex.html

編集箇所

42~377行目がスライドの対象となるところです。

<div class="slides">
<!--下からが編集する部分-->
</div>

お作法

基本的には通常のHTMLを書く要領で問題ありません。
Markdownで書きたいなーってときだけdata属性を付与してあげます。

HTML ver

<section>
<h1>Hello World</h1>
<ul>
<li>hoge1</li>
<li>hoge2</li>
<li>hoge3</li>
</ul>
</section>

Markdown ver
<section data-markdown>
# Hello World
* hoge1
* hoge2
* hoge3
</section>

3.Git Push!!!!

作成したHTMLをPushします。
その前にリポジトリを作りましょう。
Github上にページを公開するには特定のリポジトリを作成して、pushするだけでOKです。

ユーザー名.github.io

というリポジトリをつくりましょう。
例えばtkomatsuがユーザー名ならtkomatsu.github.ioというリポジトリです。

つくったらそこに全ファイルPushするだけです。
ちなみに以下は社内LT用に小松が作ったものです。

http://kusekke1.github.io/lt_slide/

実験的過ぎて相当雑な記述です(言い訳)< Read More