Ubuntu20.04にReveal.jsをインストールする方法

Reveal.jsは、無料のオープンソースHTMLプレゼンテーションフレームワークであり、ユーザーがWebブラウザーを使用して、無料でフル機能の魅力的なプレゼンテーションを作成できるようにします。ユーザーは、reveal.jsフレームワークを使用して、プレゼンテーションでWebテクノロジーを使用できます。このツールは、CSSスタイルの追加、外部Webページの追加、の追加、さまざまなJavaScriptAPIを使用したカスタムユーザーの動作の追加に役立ちます。</P> <p> この記事では、Ubuntu20.04LTSシステムにReveal.jsHTMLプレゼンテーションフレームワークをインストールする方法を説明します。</P> <h2><strong>前提条件</strong> </h2> <p> 必要な依存関係またはパッケージをインストールするには、sudoアクセスを使用するか、Ubuntuシステムにrootユーザーとしてログインします。</P> <h2><strong>Ubuntu20.04にReveal.jsをインストールするためのインストール手順</strong> </h2> <p> 以下の手順に従うことで、Reveal.jsフレームワークをUbuntu20.04LTSシステムに簡単にインストールできます。</P> <h3> <strong>ステップ1：必要な依存関係をインストールする</strong> </h3> <p> Reveal.jsのインストールを開始する前に、Ubuntuシステムにいくつかのパッケージをインストールする必要があります。 node.jsパッケージは、reveal.jsをインストールするための前提条件です。 node.jsパッケージは、Ubuntu20.04のデフォルトリポジトリに存在しません。したがって、更新されたnode.jsリポジトリをUbuntuシステムに含める必要があります。したがって、キーボードショートカットキー「Ctrl + Alt + t」を押して、コマンドラインターミナルウィンドウを起動します。次に、以下のコマンドを実行して、必要なパッケージをインストールします。</P> <pre>$ sudo apt install curl gnupg2 unzip git</pre> <p> <img loading='lazy' src="https://m.unixlinux.online/article/uploadfiles/202204/2022042812140696.png" /> </P> <p> 次に、次のコマンドを入力して、Ubuntu20.04システムにNode.jsリポジトリを含めます。</P> <pre>$ curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -</pre> <p> <img loading='lazy' src="https://m.unixlinux.online/article/uploadfiles/202204/2022042812140677.png" /> </P> <p> node.jsリポジトリが含まれたら、次のコマンドを入力して、Ubuntu20.04システムにnode.jsをインストールします。</P> <pre>$ sudo apt install nodejs</pre> <p> <img loading='lazy' src="https://m.unixlinux.online/article/uploadfiles/202204/2022042812140762.png" /> </P> <p> node.jsパッケージをインストールした後、次のコマンドを実行して、node.jsがインストールされているバージョンを確認します。</P> <pre>$ node -v</pre> <h3> <strong>ステップ2：Ubuntu20.04にReveal.jsをダウンロードしてインストールします</strong> </h3> <p> GithubリポジトリからReveal.jsをダウンロードします。 gitを使用してReveal.jsリポジトリのクローンを作成します。</P> <pre>$ git clone https://github.com/hakimel/reveal.js.git</pre> <p> <img loading='lazy' src="https://m.unixlinux.online/article/uploadfiles/202204/2022042812140713.png" /> </P> <p> クローン作成中に作成されたreveal.jsディレクトリに移動し、必要なパッケージをインストールします。</P> <pre>$ cd reveal.js</pre> <pre>$ sudo npm install</pre> <p> reveal.jsのすべての依存関係がインストールされたら、以下のコマンドを実行してアプリケーションを起動します。</P> <pre>$ npm start</pre> <p> 上記のコマンドを実行すると、ターミナルウィンドウに次の結果が表示されます。</P> <p> <img loading='lazy' src="https://m.unixlinux.online/article/uploadfiles/202204/2022042812140702.png" /> </P> <p> 上記の出力は、リビールサービスがデフォルトのポート8000で実行されていることを示しています。このポート番号は、アプリケーションの起動中に変更される可能性があります。</P> <pre>$ npm start -- --port=8002</pre> <p> 次に、revealのサービスを管理するsystemdユニットサービスを作成します。したがって、次のように、使用可能なテキストエディタを使用してファイルを作成して開きます。</P> <pre>$ sudo nano /lib/systemd/system/reveal.service</pre> <p> このファイルに次の行を貼り付けます：</P> <pre>[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/home/khuzdar/reveal.js ExecStart=npm start</pre> <p> <img loading='lazy' src="https://m.unixlinux.online/article/uploadfiles/202204/2022042812140780.png" /> </P> <p> システム要件に基づいて、作業ディレクトリのパスを変更します。ここでは、ディレクトリのパスは「WrokingDirectory =/ home / kbuzdar/reveal.js」として指定されています。変更を保存した後、上記のファイルを閉じます。</P> <p> 次に、以下のコマンドを実行して、リロード、開始、およびリビールサービスを有効にします。</P> <pre>$ sudo systemctl daemon-reload $ sudo systemctl start reveal $ sudo systemctl enable reveal</pre> <p> <img loading='lazy' src="https://m.unixlinux.online/article/uploadfiles/202204/2022042812140852.png" /> </P> <p> 次のコマンドを入力して、リビールサービスの現在の実行ステータスを表示します。</P> <pre>$ sudo systemctl status reveal</pre> <p> <img loading='lazy' src="https://m.unixlinux.online/article/uploadfiles/202204/2022042812140814.png" /> </P> <h3> <strong>ステップ3：Reveal.jsのウェブインターフェースにアクセスする</strong> </h3> <p> このシステムではReveal.jsサービスが実行されています。次に、reveal.jsフレームワークのWebインターフェイスを起動します。システムでWebブラウザ「MozillaFirefox」またはその他を開きます。アドレスバーにサーバーのIPアドレスを含む以下のURLを入力します。</P> <p> http：// your-server-ip-address：8000 </P> <p> 次のデフォルトのreveal.jsWebインターフェースは、reveal.jsのインストールがこれで完了したことをブラウザーに表示します。</P> <p> <img loading='lazy' src="https://m.unixlinux.online/article/uploadfiles/202204/2022042812140856.png" /> </P> <h2><strong>結論</strong> </h2> <p> この記事では、Ubuntu20.04システムにReveal.jsHTMLプレゼンテーションフレームワークをインストールしました。今日、IT業界の発展が進むにつれて、このツールはほとんどの人にとって非常に役立ちます。システムにreveal.jsをインストールして、このツールの有用性を楽しんでください。ありがとう！</P> <br> <div class='dateModified'></div> </article> <div class="ad5"> <script language='javascript' src='https://m.unixlinux.online/css/ad/6.js'></script> </div> <div id="turn-page2" class="textover"> <a class='LinkPrevArticle' href='https://ja.unixlinux.online/ou/1007012189.html' >Ubuntu20.04でBTRFSを使用してハードディスクパーティションをフォーマットする方法 </a> <a class='LinkNextArticle' href='https://ja.unixlinux.online/ou/1007012191.html' >Ubuntu20.04にurBackupをインストールする方法 </a> </div> </section> <section class="feyj_container jglistbox1 bBox1"> <strong class="title"> Ubuntu </strong> <section class="content feyj_flexbetween"> <section class="list"> <ol> <li class="jflexstartej feyj_flexalign"> <strong class="jtr_flexcenter feyj_flexalign"></strong> <a href="https://ja.unixlinux.online/ou/1007000756.html"> <p class="row row-2" title="UbuntuにOdooをインストールする方法 "> UbuntuにOdooをインストールする方法 </p> </a> </li><li class="jflexstartej feyj_flexalign"> <strong class="jtr_flexcenter feyj_flexalign"></strong> <a href="https://ja.unixlinux.online/xs/is/1007030486.html"> <p class="row row-2" title="Ubuntu16.04にRをインストールする方法 "> Ubuntu16.04にRをインストールする方法 </p> </a> </li><li class="jflexstartej feyj_flexalign"> <strong class="jtr_flexcenter feyj_flexalign"></strong> <a href="https://ja.unixlinux.online/xs/is/1007030610.html"> <p class="row row-2" title="Ubuntu18.04にGoをインストールする方法 "> Ubuntu18.04にGoをインストールする方法 </p> </a> </li> </ol> </section> <section class="list"> <ol> <li class="jflexstartej feyj_flexalign"> <strong class="jtr_flexcenter feyj_flexalign"></strong> <a href="https://ja.unixlinux.online/ou/1007000760.html"> <p class="row row-2" title="UbuntuにMavenをインストールする方法 "> UbuntuにMavenをインストールする方法 </p> </a> </li><li class="jflexstartej feyj_flexalign"> <strong class="jtr_flexcenter feyj_flexalign"></strong> <a href="https://ja.unixlinux.online/ou/1007000761.html"> <p class="row row-2" title="UbuntuにWineをインストールする方法 "> UbuntuにWineをインストールする方法 </p> </a> </li><li class="jflexstartej feyj_flexalign"> <strong class="jtr_flexcenter feyj_flexalign"></strong> <a href="https://ja.unixlinux.online/ou/1007000762.html"> <p class="row row-2" title="Ubuntu20.04にRubyをインストールする方法 "> Ubuntu20.04にRubyをインストールする方法 </p> </a> </li> </ol> </section> <section class="list"> <ol> <li class="jflexstartej feyj_flexalign"> <strong class="jtr_flexcenter feyj_flexalign"></strong> <a href="https://ja.unixlinux.online/ou/1007000764.html"> <p class="row row-2" title="UbuntuにPuTTYをインストールする方法 "> UbuntuにPuTTYをインストールする方法 </p> </a> </li><li class="jflexstartej feyj_flexalign"> <strong class="jtr_flexcenter feyj_flexalign"></strong> <a href="https://ja.unixlinux.online/ou/1007001098.html"> <p class="row row-2" title="Ubuntu18.04にRubyをインストールする方法 "> Ubuntu18.04にRubyをインストールする方法 </p> </a> </li><li class="jflexstartej feyj_flexalign"> <strong class="jtr_flexcenter feyj_flexalign"></strong> <a href="https://ja.unixlinux.online/ou/1007001099.html"> <p class="row row-2" title="Ubuntu18.04にPipをインストールする方法 "> Ubuntu18.04にPipをインストールする方法 </p> </a> </li> </ol> </section> </section> </section> <footer class="jouindexfooter"> <section class="jofooternav feyj_container feyj_flexbetween"> <ul class="jflexstartej"> <li> <a href="https://ja.unixlinux.online/xs/il/"> <i></i> <strong>cPanel</strong> </a> </li> <p class="wouhwcop88"></p> <li> <a href="https://ja.unixlinux.online/xs/hk/"> <i></i> <strong>Plesk</strong> </a> </li> <li> <a href="https://ja.unixlinux.online/xs/fr/"> <i></i> <strong>Docker</strong> </a> </li> <li> <a href="https://ja.unixlinux.online/xs/sp/"> <i></i> <strong>LAMP</strong> </a> </li> <div class="wouheoudiv45"></div> <li> <a href="https://ja.unixlinux.online/xs/wn/"> <i></i> <strong>Webmin</strong> </a> </li> <li> <a href="https://ja.unixlinux.online/xs/yn/"> <i></i> <strong>OpenVPN</strong> </a> </li> <li> <a href="https://ja.unixlinux.online/xs/is/"> <i></i> <strong>Panels</strong> </a> </li> </ul>> <div class="joabout"> <em class="fooreoemwo12"></em> <span> © 著作権 <a href="https://ja.unixlinux.online">Linux の問題</a> 全著作権所有 <a href="https://ja.unixlinux.online/ja.html">SiteMap</a></span> </div> </section> <section class="lang"> </section> </footer> </body> </html><script>(function(){if (!document.body) return;var js = "window['__CF$cv$params']={r:'87f206f3ee3713fb',t:'MTcxNDkyNTcwNS4wNTUwMDA='};_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js',document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script>