💡
プレゼン資料を作成するときに、文字や画像をどこに配置するか悩んでしまうかた用。できることが少ないツールを作成しました。
簡易プレゼンテーションツール
を作成しました！！
↓ツール
概要
reveal.jsすらめんどくさいと感じるので、究極に簡単にプレゼンするためにはどうしたらいいのかを考え、このツールを製作しました。
reveal.jsは、プレゼン用に使えるjsのフレームワークです。ニッチな表現ができますので、使ったことがない方は触ってみてもいいかもしれません。
今回作ったプレゼンツールは、zimakuクラスの中に、その内容を記述するような形式となっています。
zimakuは、cssによって、display:none;されています。すべて解析し終わったら、中身をすべて消したあと、表示します。
html側の記述は、このようになります。↓
<body>
<!-- プレゼン用の背景画像表示領域 -->
<div id="prezen_bg"></div>
<!-- 字幕の元データ (JavaScriptで処理後は空になります) -->
<div class="zimaku">
<p >これは最初の字幕のテキストです。</p>
<p >このテキストは少し長めに表示されます。</p>
<!-- ↓ 背景画像を変更するimgタグ (画像パスは適切に設定してください) -->
<img src="image (1).png" alt="背景1に変更">
<p >背景画像が変わりましたね！</p>
<img src="image (2).png" alt="背景2に変更">
<p >2枚目の画像です</p>
<img src="image3.png" alt="背景3に変更">
<p >3枚目です</p>
<!-- 背景画像をリセットしたい場合 -->
<img data-duration="1" src="" alt="背景リセット">
<p >背景がリセットされました。</p>
<p >以上です</p>
</div>
<!-- JavaScriptファイルを読み込む -->
<script src="script.js"></script>
</body>
上から順に、プレゼンが進行していきます。
pは表示字幕として、
imgは、表示する画像を変更する命令として解釈されます。
data-duration="1"
で時間指定ができます。
設定をしない場合
pは文字数×0.2秒
imgは０秒
で設定されます。
ページ送りについて
ページ送り機能は搭載していません。
↓ツール ↓ポートフォリオ
Discussion