paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

GitHubだけで超高機能なスライド資料が作れる「GitPitch」の使い方を徹底解説!

f:id:paiza:20170621143751j:plain
どうも、まさとらん(@0310lan)です!

今回は、ブラウザ上のGitHubMarkdown(マークダウン)ファイルを作成し、そのまま超高機能なスライド資料に変換してくれるサービスのご紹介です!

もちろん、自分でMarkdownファイルを用意してpushするだけでもOKなのですが、今回はコンソール画面などは使わずにすべてブラウザだけで完結できる方法をご紹介致します。

GitPitch

f:id:paiza:20170621143928j:plain

■「GitPitch」の基本的な使い方!

それでは、実際に簡単なスライド資料を作ってみましょう!

まず最初に、自分のGitHubアカウントでログインし、新規のリポジトリを作成しましょう!
f:id:paiza:20170621143946j:plain


「① リポジトリ名」は好きな名前を付けてください。
f:id:paiza:20170621143959j:plain
画面下にある「② チェックボックス」をONにしてから「③ Create repository」ボタンをクリックしましょう。


すると、自動的に「README.md」のMarkdownファイルが作成されているのでクリックします。
f:id:paiza:20170621144013j:plain


画面右側にある「編集」ボタンをクリック!
f:id:paiza:20170621144028j:plain


すると、Markdownファイルを直接編集できる「コードエディタ」が表示されるので、まずはファイル名を「PITCHME.md」に変更します!
f:id:paiza:20170621144038j:plain
このファイル名でないと上手くスライド資料に変換されないので注意しましょう。


あとは、次のようにMarkdown記法でスライドの中身を書いていくだけです!

### こんにちは!


これはサンプルのスライド資料です。


---


### 2枚目のスライド


---


### 3枚目のスライド


---


### おわり

各スライドは「---」で区切ることで、自動的にページが分割されるようになっています。


最後に、画面下にある「Commit changes」ボタンをクリックします。
f:id:paiza:20170621144304j:plain
たったこれだけの作業ですが、「スライド資料」はもう完成しています!


このまま次のURLにアクセスしてみましょう!

https://gitpitch.com/GitHubのユーザー名/リポジトリ名

例えば、GitHubのユーザー名が「webhacck」でリポジトリ名が「sampleslide」であれば、次のようなURLになります!(リンクをクリックして確認してみてください)

https://gitpitch.com/webhacck/sampleslide|GitPitchのサンプルスライド】
f:id:paiza:20170621144344j:plain
見事に「スライド資料」に変換されているのが分かりますね。
スマホにも最適化されています…)

■「GitPitch」のMarkdown記法について!

GitPitch」の基本的な使い方が分かったところで、Markdownの特殊な記法について見ていきましょう!

もちろん、一般的なMarkdown記法が使えるのですが、スライド資料を作成するうえで便利な記法がいくつかあるので解説しておきます。


例えば、区切り文字の「---」「+++」を記述すること、複数のスライドを構成することが出来ます!

### 1枚目のスライド


---


### 2枚目のスライド


+++


### 3枚目のスライド


---


### 4枚目のスライド


スライドに変換するとこんな感じになります!
f:id:paiza:20170621144519j:plain
「---」で区切ると左右に画面遷移でき、「+++」で区切ると上下に遷移することができます。(この場合、下方向へ遷移すると3枚目のスライドが表示されます…)


また、Markdownで直接コードを記述しなくても、「区切り文字」に続けて次のようにファイルを指定することでソースコードを読み込むことも可能です。

---?code=sample.js


リポジトリ内の「sample.js」を読み込んで表示してます


---


スライドはこのようになります!
f:id:paiza:20170621144604j:plain
見事にファイルを読み込んで表示できているのが分かりますね。
(「+++?code=」も利用できます…)


同じ要領で、gistに公開したソースコードを読み込むことも可能です!

---?gist=1f39d3baae495652ac52609cce31aaed

gistに公開したソースコードを読み込んで表示しています

---


スライドにするとこうなります!
f:id:paiza:20170621144628j:plain


さらに、ソースコード内で任意の箇所だけハイライトする機能も搭載されており、例えば2行目だけに注目して欲しい場合は次のようになります。

---


### 指定したコードだけハイライト表示


```
var str1 = 'hello world';
var flag = true;
var result = 10 + 20;


console.log( str1 );
console.log( str2 );
console.log( str3 );
```
@[2](flagに「true」を代入)


---

コードのすぐ下に「@[2]」と記述するだけで2行目だけハイライトになり、続けて「( )」を付けることでコメントも表示可能です。


スライドにするとこうなります!
f:id:paiza:20170621144703j:plain
2行目だけハイライトになり、コメントも同時に表示されていますね。

複数の箇所をハイライトすることも可能で、ページ送りする毎に次々と表示されるのでコードを解説する時にとても便利な機能だと思います。

また、読み込んだソースコードが長い場合に、特定の箇所を一瞬で表示できるのも特徴の1つです。


スライドでよく使う機能として、1つずつ順番にアニメーション表示させるというのがありますが、「GitPitch」の場合は文末に「 | 」を付与するだけで実現可能です。

---


### 順番にアニメーション表示


- Java
- JavaScript |
- Kotlin |
- Go |
- Scala |


---


たったこれだけで、「ページ送り」する度に表示されるようになります!
f:id:paiza:20170621144739g:plain


「Chart.js」をベースにしたグラフやチャートを描画する機能も搭載されています。

例えば、「レーダーチャート」を作って表示する場合は次のようになります。

---


### グラフやチャートの表示


<canvas data-chart="radar">


    Month, 1月, 2月, 3月, 4月, 5月, 6月, 7月
    1980, 65, 59, 80, 81, 56, 55, 40
    2017, 28, 48, 40, 19, 86, 27, 90


</canvas>


---


スライドにするとこうなります!
f:id:paiza:20170621144818j:plain
(この機能は、後述する詳細設定で機能をONにしましょう…)

他にも、HTML記述ができたり、画像・動画などを埋め込んだり、難しい数式を美しく表示する機能…など、非常に多彩な機能が盛りだくさんなのが魅力的です。

公式のWikiには、さらに詳細な解説があるのでご興味ある方はぜひチェックしてみてください!

■詳細設定のカスタマイズについて!

GitPitch」は、デフォルトのままでも素敵なスライドが作成できるのですが、自分の好みに合わせて細かくカスタマイズできる機能も搭載されています。

方法は簡単で、同じリポジトリ内に「PITCHME.yaml」ファイルを作成するだけです!
f:id:paiza:20170621144845j:plain
(新しいファイルの作成は「Create new file」ボタンをクリックすれば作れます…)

あとは、指定された項目にしたがってテキストを記述するだけなので、非常にお手軽なカスタマイズ方法と言えるでしょう。


実際の記述例は次のようになります!

#テーマの設定
theme : sky


#ロゴアイコンの設定
logo : logo.png


#フットノートの設定
footnote : "© 2017 sample Inc."


#スライドのページ数表示の設定
slide-number: true

たったこれだけの記述で、自分好みのスライド資料を作成できるわけです!(#行はコメントなので無くてもOKです…)


このカスタマイズでは、「①テーマの変更」「②ロゴアイコンの追加」「③フットノートの追加」「④ページ数の表示」を行っています。
f:id:paiza:20170621144921j:plain
他にも、カスタムCSSを設定することも可能で、やり方次第でまったく異なるデザインを作ることも可能なのが面白いところです。


カスタマイズの設定項目は非常にたくさん用意されており、特に便利だと思う設定例を掲載しておきます!

#コードのシンタックスハイライトの設定
highlight : monokai


#スライド自動再生の設定
autoslide : 5000


#スライドのループ設定
loop : true


#トランジションの設定
transition : fade


#チャート / グラフ機能の設定
charts : true

このように、スライドを自動再生できたり、画面遷移のトランジションを好みのアニメーションに変更したり出来るわけです。

また、チャートやグラフを利用する場合は「true」を設定するのを忘れないようにしましょう。

さらに、リモートコントロールに対応させたり、Googleアナリティクスを設定するなど、高度な使い方にも柔軟に対応できるポテンシャルも秘めています。


今回ご紹介した「GitPitch」の機能を使ったサンプルのスライド資料を作成しているので、以下のURLから体験してみてください!

GitPitchを使ったスライド資料|GitHub

■「GitPitch」の便利な機能紹介!

GitPitch」には、デフォルトの状態で利用できる便利な機能がいくつか用意されています。

この機能は、スライドを表示した時に出現する「フッターメニュー」から利用することが可能です!
f:id:paiza:20170621145024j:plain


例えば、「GitPitch」のヘッダー/フッターを排除して、フルスクリーンモードで表示できる機能や…
f:id:paiza:20170621145037j:plain


スライドの全体像をまとめて表示したりもできます。
f:id:paiza:20170621145047j:plain


さらに、「Print」メニューから現在表示しているスライドをPDFに変換する機能もあります。
f:id:paiza:20170621145057j:plain


この機能を使うと、新規タブでPDFとして表示されるのが分かりますね。
f:id:paiza:20170621145109j:plain
もちろん、このままPDFファイルとしてダウンロードすることも可能です。


「Embed」メニューを利用すると、埋め込み用のタグを生成することも出来ます!
f:id:paiza:20170621145121j:plain
これにより、自分のWebサイトやブログなどにスライド資料を簡単に埋め込むことができるので非常に便利でしょう。

他にも、SNSでシェアしたり「テーマ」を変更することも可能で、ローカルサーバー上でスライドを表示できる機能もあります。

■まとめ

今回は「GitPitch」の機能について駆け足でご紹介しました。

Markdownでサクサク文書を書くだけで、すぐにスライド資料として公開できるのは非常に便利で、実際に使ってみるともう手放せなくなりそうです。

特にエンジニア系職種の人であれば、「GitPitch」だけでスライド資料の作成は十分なのではないかと感じてます。

今後スライドを作成する機会のある人は、ぜひ一度トライしてみてください!


<参考>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

現在、普段有料公開しているPHP、DB/SQL、Webアプリ開発入門(PHP+MySQL編)のレッスンを、期間限定で連続無料公開中ですのでぜひごらんください。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編