<h1 id="h42b5e30b4c">シークバーを作る</h1> <a href="/posts/javascript_audio-player">前回</a>までは再生・停止ボタンと再生時間の表示を作りました。 <h2 id="h8c0f39d58a">シークバーとは</h2> シークバーは、再生中の楽曲のどの部分なのかを表示するUIで、操作することで再生時間の変更ができる機能のことです。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/057036b9030c49cdad636d0da0bba6f5/javascript_audio-seekbar_seekbar-sample.png" alt=""> これを追加します。 <h3 id="ha1ca45811a">HTMLの追加</h3> <code>#seekbar</code>という要素を追加します。 <pre><code>[html:HTML]
&lt;div id="seekbar"&gt;&lt;/div&gt;</code></pre> <h3 id="h7c923cf2a5">CSSの追加</h3> <pre><code>[css:CSS]
#seekbar {
 width: 160px;
 height: 10px;
 margin: 1em;
 border-radius: 5px;
 background: linear-gradient(#ccc, #ccc) no-repeat #eee;
}</code></pre> こんな感じ。とりあえず再生時間の下に追加しました。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/785992565bfa4552b9c00440ddbcb858/javascript_audio-seekbar_controls-003.png" alt=""> このままだとしょぼいので、ちゃんとプレイヤーを作るときはCSSでうまく作ってください！笑 <h3 id="hcadb99ac2a">JavaScriptを編集</h3> <code>timeupdate</code>のイベントに以下の2行を追加します。 <pre><code>[javascript{9,10}:JavaScript]
const audio = document.getElementsByTagName("audio")[0]

audio.addEventListener("timeupdate", (e) =&gt; {
 const current = Math.floor(audio.currentTime)
 const duration = Math.round(audio.duration)
 if (!isNaN(duration)) {
 document.getElementById('current').innerHTML = current
 document.getElementById('duration').innerHTML = duration
 const percent = Math.round((audio.currentTime/audio.duration)*1000)/10
 document.getElementById('seekbar').style.backgroundSize = percent + '%'
 }
})</code></pre> <h2 id="ha4e4e52441">このシークバーの仕組み</h2>CSSの<code>background: linear-gradient(#ccc, #ccc) no-repeat #eee;</code>がポイントです。<code>background-image</code>に<code>linear-gradient</code>が指定され、<code>background-color</code>に<code>#eee</code>が指定されています。<code>background-size</code>はCSSからは指定しません。<code>background-size</code>は<code>background-image</code>の幅を変更できますので、これをJavaScriptから変更することで、再生位置を表示します。 参考: <a href="https://developer.mozilla.org/ja/docs/Web/CSS/background-size" target="_blank" rel="noopener noreferrer">background-size | MDN</a> <h2 id="h88f9522244">再生位置の移動</h2> 通常のシークバーはシークという名の通り再生位置を変更できます。 シークバーをクリックした位置を取得してそこから再生時間を計算します。 <pre><code>[javascript:JavaScript]
document.getElementById('seekbar').addEventListener("click", (e) =&gt; {
 const duration = Math.round(audio.duration)
 if(!isNaN(duration)){
 const mouse = e.pageX
 const element = document.getElementById('seekbar')
 const rect = element.getBoundingClientRect()
 const position = rect.left + window.pageXOffset
 const offset = mouse - position
 const width = rect.right - rect.left
 audio.currentTime = Math.round(duration * (offset / width))
 }
})</code></pre> 要素がクリックされたときにクリックされた座標と要素のサイズから割合を出します。<code>currentTime</code>属性に代入することでシークすることができます。 <h2 id="ha214098e44">まとめ</h2> だいぶプレイヤーっぽくなってきました。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/d18eb356a17e41aab214081425c66aaa/javascript_audio-seekbar_controls-004.png" alt=""> 最後にここまでをひとつにまとめたものです。 <pre><code>[html:index.html]
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;HTML5のAudioタグテスト&lt;/title&gt;
 &lt;style&gt;
 audio {
 display: none
 }
 #play, #stop {
 display: inline-block;
 width: 60px;
 height: 60px;
 margin: 1em;
 border-radius: 50%;
 background: #ddd;
 text-align: center;
 line-height: 60px;
 cursor: pointer;
 }
 #play:hover, #stop:hover {
 background: #eee;
 }
 #time {
 margin: 0 1em;
 }
 #current, #duration {
 padding: 0;
 margin: .2em;
 }
 #seekbar {
 width: 160px;
 height: 10px;
 margin: 1em;
 border-radius: 5px;
 background: linear-gradient(#ccc, #ccc) no-repeat #eee;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div&gt;
 &lt;audio src="sample.mp3"&gt;&lt;/audio&gt;
 &lt;div id="play"&gt;Play&lt;/div&gt;
 &lt;div id="stop"&gt;Stop&lt;/div&gt;
 &lt;div id="time"&gt;
 &lt;span id="current"&gt;00:00&lt;/span&gt;
 &lt;span id="duration"&gt;00:00&lt;/span&gt;
 &lt;/div&gt;
 &lt;div id="seekbar"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;script&gt;
 const audio = document.getElementsByTagName("audio")[0]
 const playButton = document.getElementById("play")
 const stopButton = document.getElementById("stop")
 playButton.addEventListener('click', () =&gt; {
 if (audio.paused) {
 audio.play()
 play.innerHTML = play.innerHTML === 'Play' ? 'Pause' : 'Play'
 } else {
 audio.pause()
 play.innerHTML = 'Play'
 }
 })
 stopButton.addEventListener('click', () =&gt; {
 audio.pause()
 audio.currentTime = 0
 })

 audio.addEventListener("timeupdate", (e) =&gt; {
 const current = Math.floor(audio.currentTime)
 const duration = Math.round(audio.duration)
 if(!isNaN(duration)){
 document.getElementById('current').innerHTML = playTime(current)
 document.getElementById('duration').innerHTML = playTime(duration)
 const percent = Math.round((audio.currentTime/audio.duration)*1000)/10
 document.getElementById('seekbar').style.backgroundSize = percent + '%'
 }
 })

 document.getElementById('seekbar').addEventListener("click", (e) =&gt; {
 const duration = Math.round(audio.duration)
 if(!isNaN(duration)){
 const mouse = e.pageX
 const element = document.getElementById('seekbar')
 const rect = element.getBoundingClientRect()
 const position = rect.left + window.pageXOffset
 const offset = mouse - position
 const width = rect.right - rect.left
 audio.currentTime = Math.round(duration * (offset / width))
 }
 })

 function playTime (t) {
 let hms = ''
 const h = t / 3600 | 0
 const m = t % 3600 / 60 | 0
 const s = t % 60
 const z2 = (v) =&gt; {
 const s = '00' + v
 return s.substr(s.length - 2, 2)
 }
 if(h != 0){
 hms = h + ':' + z2(m) + ':' + z2(s)
 }else if(m != 0){
 hms = z2(m) + ':' + z2(s)
 }else{
 hms = '00:' + z2(s)
 }
 return hms
 }
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

audioプレイヤーをシークバーで操作する

<h1 id="hb2cf465d5e">オリジナルオーディオプレイヤー</h1> <a href="/posts/javascript_audio-tag">前回</a>はオーディオを再生、一時停止するところまで作りました。次はプレイヤーっぽくしましょう。 <h2 id="hb4dd4545d4">再生時間の表示</h2> オーディオを再生するのであれば時間の表示は欲しいですよね。時間を表示する要素を追加します。HTMLは好きな場所に追加してください。必要なのは<code>id</code>属性だけです。 <h3 id="ha1ca45811a">HTMLの追加</h3> <pre><code>[html:HTML]
&lt;div id="time"&gt;
 &lt;span id="current"&gt;00:00&lt;/span&gt;
 &lt;span id="duration"&gt;00:00&lt;/span&gt;
&lt;/div&gt;</code></pre> <h3 id="h7c923cf2a5">CSSの追加</h3> <pre><code>[css:CSS]
#time {
 margin: 0 1em;
}
#current, #duration {
 padding: 0;
 margin: .2em;
}</code></pre> はい！できました。左側が現在の時間で右側が全体の再生時間です。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/513b8033367342e688d6a63c62bfc6d0/javascript_audio-player_controls-002.png" alt=""> <h3 id="h23fb360eb1">JavaScriptの編集</h3> これをJavaScriptでaudioタグから情報をもらって更新します。現在時刻と再生時間は<code>audio.currentTime</code>と<code>audio.duration</code>で取得できますが、そのタイミングのデータしか得られません。audio再生中は<code>timeupdate</code>イベントが起こるのでそれを拾ってそれぞれ取得・更新します。 <code>duration</code>はたまに<code>null</code>になったりするので数字かどうかを確認します。 <pre><code>[javascript:JavaScript]
const audio = document.getElementsByTagName("audio")[0]

audio.addEventListener("timeupdate", (e) =&gt; {
 const current = Math.floor(audio.currentTime)
 const duration = Math.round(audio.duration)
 if (!isNaN(duration)) {
 document.getElementById('current').innerHTML = current
 document.getElementById('duration').innerHTML = duration
 }
})</code></pre> 1秒間に4回くらい<code>timeupdate</code>が走ります。 <h3 id="h90811430bc">再生時間表示用関数</h3> <code>audio</code>から取得できる時間データは秒ですので、<code>mm:ss</code>形式に直す関数を用意します。 <pre><code>[javascript{24,25}:JavaScript]
function playTime (t) {
 let hms = ''
 const h = t / 3600 | 0
 const m = t % 3600 / 60 | 0
 const s = t % 60
 const z2 = (v) =&gt; {
 const s = '00' + v
 return s.substr(s.length - 2, 2)
 }
 if(h != 0){
 hms = h + ':' + z2(m) + ':' + z2(s)
 }else if(m != 0){
 hms = z2(m) + ':' + z2(s)
 }else{
 hms = '00:' + z2(s)
 }
 return hms
}

audio.addEventListener("timeupdate", (e) =&gt; {
 const current = Math.floor(audio.currentTime)
 const duration = Math.round(audio.duration)
 if (!isNaN(duration)) {
 document.getElementById('current').innerHTML = playTime(current)
 document.getElementById('duration').innerHTML = playTime(duration)
 }
})</code></pre> <h2 id="h5538f1472c">再生ボタンの機能変更</h2> <a href="unsafe:../audio">前回</a>作ったコントローラは再生と停止(一時停止)ボタンを別にしていましたが、それらを1つのボタンにまとめ、停止ボタンは停止と曲頭に戻るようにします。 再生ボタンが押されたときに、audioが再生しているかをみて再生中であれば一時停止、一時停止中であれば再生します。ついでに再生ボタンの文字も変えます。また、停止ボタンを押すと曲の頭に戻ります。 <pre><code>[javascript:JavaScript]
const audio = document.getElementsByTagName("audio")[0]
const playButton = document.getElementById("play")
const stopButton = document.getElementById("stop")

playButton.addEventListener('click', () =&gt; {
 if (audio.paused) {
 audio.play()
 play.innerHTML = play.innerHTML === 'Play' ? 'Pause' : 'Play'
 } else {
 audio.pause()
 play.innerHTML = 'Play'
 }
})

stopButton.addEventListener('click', () =&gt; {
 audio.pause()
 audio.currentTime = 0
})</code></pre> <h2 id="ha214098e44">まとめ</h2> オーディオ再生に加え、再生時間の表示ができました。 次はシークバーを追加したいと思います。 ここまでをひとつのHTMLにまとめるとこんな感じ。 <pre><code>[html:index.html]
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;HTML5のAudioタグテスト&lt;/title&gt;
 &lt;style&gt;
 audio {
 display: none
 }
 #play, #stop {
 display: inline-block;
 width: 60px;
 height: 60px;
 margin: 1em;
 border-radius: 50%;
 background: #ddd;
 text-align: center;
 line-height: 60px;
 cursor: pointer;
 }
 #play:hover, #stop:hover {
 background: #eee;
 }
 #time {
 margin: 0 1em;
 }
 #current, #duration {
 padding: 0;
 margin: .2em;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div&gt;
 &lt;audio src="sample.mp3"&gt;&lt;/audio&gt;
 &lt;div id="play"&gt;Play&lt;/div&gt;
 &lt;div id="stop"&gt;Stop&lt;/div&gt;
 &lt;div id="time"&gt;
 &lt;span id="current"&gt;00:00&lt;/span&gt;
 &lt;span id="duration"&gt;00:00&lt;/span&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;script&gt;
 const audio = document.getElementsByTagName("audio")[0]
 const playButton = document.getElementById("play")
 const stopButton = document.getElementById("stop")
 playButton.addEventListener('click', () =&gt; {
 if (audio.paused) {
 audio.play()
 play.innerHTML = play.innerHTML === 'Play' ? 'Pause' : 'Play'
 } else {
 audio.pause()
 play.innerHTML = 'Play'
 }
 })
 stopButton.addEventListener('click', () =&gt; {
 audio.pause()
 audio.currentTime = 0
 })

 audio.addEventListener("timeupdate", (e) =&gt; {
 const current = Math.floor(audio.currentTime)
 const duration = Math.round(audio.duration)
 if(!isNaN(duration)){
 document.getElementById('current').innerHTML = playTime(current)
 document.getElementById('duration').innerHTML = playTime(duration)
 }
 })

 function playTime (t) {
 let hms = ''
 const h = t / 3600 | 0
 const m = t % 3600 / 60 | 0
 const s = t % 60
 const z2 = (v) =&gt; {
 const s = '00' + v
 return s.substr(s.length - 2, 2)
 }
 if(h != 0){
 hms = h + ':' + z2(m) + ':' + z2(s)
 }else if(m != 0){
 hms = z2(m) + ':' + z2(s)
 }else{
 hms = '00:' + z2(s)
 }
 return hms
 }
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

オリジナルのaudioプレイヤーを作る

<h1 id="hc1bda9749e">Webでオーディオ再生</h1> ホームページ上で音楽を流す方法はいくつかあります。 最も手っ取り早いのはHTML5で追加された<code>audio</code>タグを使う方法です。これにはブラウザ標準のコントローラが使えるのでとても手軽です。 HTMLに<code>audio</code>タグを書くだけ。 <pre><code>[html:HTML]
&lt;audio src="sample.mp3" controls&gt;&lt;/audio&gt;</code></pre> Google Chrome 71ではこのようになります。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/6f866bb6bf544cf9a4582fd3bdebe021/javascript_audio-tag_audio-controls-chrome.png" alt=""> めちゃくちゃ簡単です。 しかし、標準コントローラはブラウザごとにUIが異なるのでホームページでデザインを統一したい時などに厄介です。例えば、Edgeのコントローラはこんな感じ。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/3f54634c10d249d3b3e9aa71b9745ad7/javascript_audio-tag_audio-controls-edge.png" alt=""> サイズも結構違って、Chromeは 300 x 54、Edgeは 300 x 30 です。 単純に音楽を流したいだけならこの方法が最も手軽です。 参考: <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio" target="_blank" rel="noopener noreferrer">&lt;audio&gt;: 埋め込み音声要素 | MDN</a> <blockquote>WebでAudioを扱うもうひとつの方法はWeb Audio APIを使います。こちらは改めて書こうと思います。</blockquote> <h2 id="h2fc24cd80b">オリジナルコントローラを作る</h2> とりあえず、ブラウザ標準のコントローラが気に入らないので、オリジナルのものを作成しましょう。 <code>audio</code>タグでコントローラを使わずに操作するにはJavaScriptを使う必要があります。要素の<code>onClick</code>を元にJavaScriptを介して<code>audio</code>タグを操作します。 <h3 id="h9f7ee0926a">HTMLを編集</h3> 全体を<code>div</code>で囲ってコントローラのボタンとなる要素を追加します。<code>div</code>をボタンにしてますが、別になんの要素でも構いません。 <pre><code>[html:HTML]
&lt;div&gt;
 &lt;audio src="sample.mp3"&gt;&lt;/audio&gt;
 &lt;div id="play"&gt;Play&lt;/div&gt;
 &lt;div id="stop"&gt;Stop&lt;/div&gt;
&lt;/div&gt;</code></pre> <h3 id="h3e570790fd">CSSを追加</h3> <code>div</code>要素をボタンっぽくします。<code>audio</code>タグに<code>controls</code>を書かなければだいたいコントローラは消えますが念のためCSSでも消します。 <pre><code>[css:CSS]
audio {
 display: none
}
#play, #stop {
 display: inline-block;
 width: 60px;
 height: 60px;
 margin: 1em;
 border-radius: 50%;
 background: #ddd;
 text-align: center;
 line-height: 60px;
 cursor: pointer;
}
#play:hover, #stop:hover {
 background: #eee;
}</code></pre> 再生ボタン用にアイコンを作ったり、<a href="https://fontawesome.com" target="_blank" rel="noopener noreferrer">Font Awesome</a>などを使うのも良いですね。 今回は適当プレイヤーなのでダイレクトにPlayと書きます笑 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/95fcf06c5ecd45e685ed5ffb929e894b/javascript_audio-tag_controls-001.png" alt=""> <h3 id="h4a853fe769">JavaScriptを追加</h3> JavaScriptで要素のクリックから<code>audio.play()</code>を呼び出せば良いだけです。 <pre><code>[javascript:JavaScript]
const audio = document.getElementsByTagName("audio")[0]
const playButton = document.getElementById("play")
const stopButton = document.getElementById("stop")

playButton.addEventListener('click', () =&gt; {
 audio.play()
})

stopButton.addEventListener('click', () =&gt; {
 audio.pause()
})</code></pre> <h2 id="ha214098e44">まとめ</h2> これで要素からaudioタグを操作し、音楽を再生・停止(一時停止)することができます。オリジナルのコントローラはこれだけでは機能不十分ですのでさらに追加していきます。 ここまでをひとつのHTMLにまとめるとこんな感じ。 <pre><code>[html:index.html]
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;HTML5のAudioタグテスト&lt;/title&gt;
 &lt;style&gt;
 audio {
 display: none
 }
 #play, #stop {
 display: inline-block;
 width: 60px;
 height: 60px;
 margin: 1em;
 border-radius: 50%;
 background: #ddd;
 text-align: center;
 line-height: 60px;
 cursor: pointer;
 }
 #play:hover, #stop:hover {
 background: #eee;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div&gt;
 &lt;audio src="sample.mp3"&gt;&lt;/audio&gt;
 &lt;div id="play"&gt;Play&lt;/div&gt;
 &lt;div id="stop"&gt;Stop&lt;/div&gt;
 &lt;/div&gt;
 &lt;script&gt;
 const audio = document.getElementsByTagName("audio")[0]
 const playButton = document.getElementById("play")
 const stopButton = document.getElementById("stop")
 playButton.addEventListener('click', () =&gt; {
 audio.play()
 })
 stopButton.addEventListener('click', () =&gt; {
 audio.pause()
 })
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> 初めての技術解説(？)投稿ですが、どこまで詳しく書くのかしっかり決めてから書き始めないとだめですね。ちょっと細かく書きすぎたので次はもうちょっと適当に書きます。

HTML5のaudioタグを使って音楽を再生する

<h1 id="h0f67b71d5d">LAME MP3 Encoder</h1>Linuxでディレクトリ内のwavファイルをすべてmp3ファイルに変換するシェルスクリプトです。 <pre><code>[shell:lame.sh]
#!/bin/sh

find ~/music/ -name *.wav | while read file; do
 lame -V2 "$file" "${file%.wav}.mp3"
 rm -v "$file"
done</code></pre> このスクリプトは指定ディレクトリ(<code>~/music/</code>)以下の<code>*.wav</code>ファイルを探し、ひとつずつ<code>lame</code>を実行します。実行後、もとの<code>*.wav</code>ファイルは削除します。この例ではVBRのオプション(<code>-V2</code>)を指定しています。 <h3 id="ha9285a982d"><code>lame</code>のオプション</h3> <h4 id="h27bf77d22f">固定ビットレート(CBR)</h4><code>-b</code>に続いてビットレートを指定する<pre><code>[shell]
lame -b 192 sample.wav</code></pre> <h4 id="h929d58c996">可変ビットレート(ABR)</h4><code>--abr</code>に続いてビットレートを指定する。<pre><code>[shell]
lame --abr 192 sample.wav</code></pre> <h4 id="h1ef05eb287">可変ビットレート(VBR)</h4><code>-V</code>に続いてスペースを挟まず品質を指定する。品質は0から10までで小数点以下まで指定可能。0が最も品質が高く容量が多くなる。 <pre><code>[shell]
lame -V2 sample.wav</code></pre>

lameで特定のディレクトリ以下のファイルをmp3にする

<h1 id="h22a4067eb8">Gatsbyとは</h1>GatsbyはReactをベースにしていてとにかく爆速なのが売りのようです。基本的なプロジェクトのStarterが用意されていて、機能を追加したいときはPluginを追加していく、という感じです。やりたいことに対してPluginがないときはどうすればいいのでしょうか...。自分で作るのかな？ Reactのみで作成したアプリケーション(SPA)では、SEOの観点から少し難があります。head内のmetaタグを動的に変えるには<a href="https://github.com/nfl/react-helmet" target="_blank" rel="noopener noreferrer">react-helmet</a>を使いますが、JavaScriptが実行される必要があり、ページアクセス時に取得されるHTMLには反映されず、正しくインデックスされるのか疑問です。 Gatsbyでは公開前にbuildし各ページを生成しておくので、その辺もいい感じに対応してくれています。 <h3 id="h3d4c031cb2">Gatsbyのメリット</h3><ul><li>とにかく速い</li><li>外観が100%自由に作成できる</li><li>ブラウザから編集できない</li><li>ReactアプリよりSEOに強い気がする</li></ul> <h3 id="h17d34280d9">Gatsbyのデメリット</h3><ul><li>速すぎる</li><li>フロントエンドの知識がいる気がする</li><li>ビルドの流れがよくわからない</li><li>CLIが使えないとだめ</li></ul> <h1 id="h64aacec53f">Gatsbyを使う</h1> なにはともあれGatsbyを使うには`gatsby`コマンドが必要なので使えるようにします。 <pre><code>[shell]
# npm i -g gatsby-cli</code></pre> <code>-cli</code>をつけないとGatsby本体が来ちゃうので気を付けてください。 ブログのベースは<a href="https://github.com/gatsbyjs/gatsby-starter-blog" target="_blank" rel="noopener noreferrer">gatsby-starter-blog</a>です。 <pre><code>[shell]
// gatsby new [プロジェクト名] [ベースのダウンロード先]
# gatsby new blog-starter https://github.com/gatsbyjs/gatsby-starter-blog</code></pre> <code>blog-starter</code>ディレクトリができるので、移動して<code>develop</code>コマンドでブラウザからアクセスできます。 <pre><code>[shell]
# cd blog-starter
# gatsby develop
// http://localhost:8000</code></pre> もし、ローカルLANからアクセスする場合は以下のオプションをつけます。 <pre><code>[shell]
# gatsby develop -H 192.168.1.2 -p 8000
// http://192.168.1.2:8000</code></pre> <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/83991fdc9fb64088b8b8cd1cbc039ae1/gatsby_how-to-use_blog-starter-sample.png" alt=""> <h2 id="he76eaaf984">プロジェクトディレクトリの構成</h2> プロジェクトディレクトリの構成は以下のような感じになっています。 <pre><code>[text]
├─ content // コンテンツ置き場
│&nbsp;&nbsp; ├─ assets // 画像ファイル
│&nbsp;&nbsp; └─ blog // 記事ファイル
├─ gatsby-browser.js
├─ gatsby-config.js // プロジェクトの設定ファイル
├─ gatsby-node.js // developやbuildの時に実行される
├─ LICENSE
├─ node_modules
├─ package.json
├─ package-lock.json
├─ public
├─ README.md
├─ src // ページ構成のファイル
│&nbsp;&nbsp; ├─ components
│&nbsp;&nbsp; ├─ pages
│&nbsp;&nbsp; ├─ templates
│&nbsp;&nbsp; └─ utils
└─ static
 ├─ favicon.ico
 └─ robots.txt</code></pre> <code>./content/blog</code>以下に置いたファイルが自動的にルーティングされます。 <code>gatsby develop</code>や<code>gatsby build</code>を行うと<code>./src</code>以下のファイルを読み込んで各ページが自動的に生成されます。 <h2 id="h9dcc071ccd">デプロイ</h2> Gatsbyプロジェクトのデプロイ方法はいくつかありますが、ここでは一般的なLinuxサーバで配信する場合の実行方法を紹介します。 デプロイには今回は<a href="http://pm2.keymetrics.io/" target="_blank" rel="noopener noreferrer">pm2</a>を使います。開発サーバとデプロイするサーバが別の場合には<code>gatsby-cli</code>もインストールします。(Nodeアプリをデーモン化する方法は他にも<a href="https://github.com/foreverjs/forever" target="_blank" rel="noopener noreferrer">forever</a>などがあります。) <pre><code>[shell]
# npm i -g pm2</code></pre> プロジェクトディレクトリ内にpm2の設定ファイルを配置します。 <pre><code>[yml:pm2config.yml]
name: blog
script: gatsby serve</code></pre> json形式で<code>.json</code>ファイルにしても構いません。 以上で準備が整いました。 <pre><code>[shell]
# gatsby build
# pm2 start pm2config.yml --name 'blog'</code></pre> これで、デフォルトの設定であれば9000番ポートに公開されます。Webサーバを別で立てている場合はプロキシを通してください。 記事を更新したい時は、<code>content</code>ディレクトリにコピーしてから<code>gatsby build</code>を実行すればOKです。

Gatsbyを使う

<h1 id="h9473f11ee3">WordPressをやめてGatsbyを導入した</h1>相変わらず始めてはやめを繰り返してまた放置していたブログを再開することにしたのはいいけど、再開するにあたってどうにもWordPressを使う気にはなりませんでした。 つまるところブログというのはテキスト編集なのだけど、WordPressはあんまり純粋なテキスト編集に向いていない気がする。リロードの度にいちいち画面が瞬くのも気になる。 一番はWordPressの編集アプリがGutenbergになって初期のころ、編集画面に画面の半分がフォームで隠れるバグがあって満足に記事の投稿ができなくなったのが大きいかも。もちろんGutenbergはベータだったのだけどね。 CMSはWordPressだけじゃないので、他のCMSも試してみたが、PHP系にはちょっと気にいるものはなかったかな。 そのとき見つけたのが<a href="https://www.gatsbyjs.org/" target="_blank" rel="noopener noreferrer">Gatsby</a>で、前にも一度触ったことがあったけど試してみることにした。

GatsbyをWordPressの代わりに使ってみる

<h2 id="hebe98a0e3b">Gatsby開発コマンド</h2>Reactベースの静的サイトジェネレータのGatsbyで通常の開発コマンドでローカルLAN上でアクセスできなかったのでメモ。<pre><code>[shell]
# gatsby develop</code></pre>すると、<code>http://localhost:8000/</code>にてアクセスできるが、ローカルサーバで開発し他のPCからアクセスなどはできない。この場合は以下のコマンドでローカルLAN上に展開できる。<pre><code>[shell]
# gatsby develop -H ローカルIPアドレス -p ポート番号</code></pre> <code>192.168.1.2</code>で開発している場合は以下のようになる。<pre><code>[shell]
# gatsby develop -H 192.168.1.2 -p 8000</code></pre>

Gatsby DevelopにローカルLAN上からアクセスする

<h1 id="h2ffa8c86bd">Ubuntu 18.04 LTSにNode.jsの実行環境を用意する</h1>Ubuntu 18.04 LTSにNode.jsの環境を作るメモUbuntu 16.04でもこの方法でOKです nvmを使った構築手順です。 <h2 id="h3374efd879">nvmとは</h2>Node.jsは頻繁にアップデートがされており、逐次更新するのは大変です。 そこで、Node.jsのインストールやアップデートを管理するためのアプリがいくつかあります。 そのうちのひとつがnvmで、nvmはNode Version Managerの略です。 ちなみにapt経由でもNode.jsのインストールは可能ですが、かなり古いバージョンになっております。(未確認) <h2 id="h1cdd49e5ae">使用するライブラリをインストール</h2>まず、関連するライブラリをapt経由でインストールします。 (文頭の#はrootでコマンド実行すること意味します) <pre><code>[shell:shell]
# apt-get install build-essential libssl-dev
# apt-get install curl</code></pre> <h2 id="h2445e2ce6b">nvmのインストール</h2> これだけです。 <pre><code>[shell:shell]
# curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
# source ~/.bashrc</code></pre> これでnvmコマンドが使えるようになりました。 <pre><code>[shell:shell]
# nvm --version
v0.33.1</code></pre> ダウンロードできるNode.jsのバージョンは以下のコマンドで確認できます。 <pre><code>[shell:shell]
# nvm ls-remote</code></pre> ひたすら大量のバージョンリストが表示されます。 <pre><code>[shell:shell]
# nvm install v10.14.2</code></pre> バージョン番号の後にLTSと書かれている最新の安定版です。初めてインストールを行った場合は自動でデフォルトのバージョンとして扱われます。 これでNode.jsの実行環境が用意できました。Node.js用パッケージ管理ツールの<code>npm</code>もインストールされています。 <pre><code>[shell:shell]
# node -v
v10.14.2
# npm -v</code></pre> <code>nvm</code>と<code>npm</code>は一文字違いですが、全く別のツールです。npmはアプリを作成するときなどプロジェクト単位で頻繁に使いますが、nvmは基本的にNode.jsのインストールやバージョン切り替えでしか使いません。私はその都度使い方を調べています笑 <h2 id="h3483a5f0d2">nvmの使い方</h2> インストール済みのバージョンの一覧の確認や使用するバージョンを変更するコマンドです。 <pre><code>[shell:shell]
# nvm ls // インストールしているバージョン一覧
# nvm use v10.14.2 // 使用するバージョンを指定</code></pre> <code>use</code>コマンドでは一時的にバージョンが変更になり、再起動などを行うとデフォルトで設定されたバージョンに戻ります。デフォルトのバージョンを変更したい場合は以下のコマンドを使います。 <pre><code>[shell:shell]
# nvm alias default v10.14.2</code></pre>

Ubuntu Server 18.04にNode.jsをインストールする

<h2 id="haea94789c8">Githubとかでよく見るREADME.md</h2><code>.md</code>ってなにかと思ったらMarkdownのことらしい。Markdownの拡張子って<code>.md</code>なんか...いま知った

.mdとは

<h1 id="he6c083c2bc">このブログについて</h1>このページはJavaScriptについて日々学んだことを書き留めておこうと思って作りました。アウトプット用のものです。 <h1 id="h04ded3dc1e">自身について</h1>中学の時に、ホームページを作るという授業がありました。文字がmarqueeしたり、音が突然鳴ったり、またgeocitiesなどを使った個人ページが大活躍していた時代でした。授業が面白かった私は、同様にgeocitiesで個人ページを作り、Webで使える素材や音源などを配信していました。(2018/12/5に閉鎖) 高専へ進学し、大学院まで機械を学びましたが、解析に使うプログラムに興味を持ち、卒業研究や修士論文はPCを使った解析系を取り扱いました。Fortranをめちゃくちゃ使いました。 その後、新卒で工作機械メーカーに勤めましたが、趣味のホームページ作りが楽しく、もっと専念したくて辞めてしまいました。 お仕事は機械設計業務でしたが、Web技術を使って業務が楽になるように簡単な調べものツールを作ってました笑これは主にPHPとMySQL、Apacheの組み合わせで動かしていました。同期にも使ってもらって好評でした。 辞めてからはフリーランスプログラマーとして活動(しようと)しています。ホームページの制作が楽しかった延長で、今はWeb技術についてあれこれ調べたり試したりするのが好きです。 昔はHTMLとCSSでベースを作ってから、どうしても動きをつけたい時にJavaScriptを使う、というスタイルでしたが、いま個人製作のアプリはReactをベースにWebpackでJSXとSCSSをまとめちゃってます。サーバサイドにはPHPやNode.jsを使っています。 ちなみに、「あかね」という名前は本名とはなんら関係なく、ドラベースのあかねフライヤーズから取りました笑 <h2 id="h1b8d2f8fd4">そんなこんなで</h2>JavaScriptをちゃんとやろうと思ってからもう二年。いくつかの本やDocumentを読み漁り、いくつかアプリを作ってみましたが、その過程でいくつものエラーに出会い、そのたびに解消していたのですが、何もメモったりしていなかったのでほとんど忘れてしまいました。複雑なエラー解消にはGoogleで調べるのが一番手っ取り早く、たくさんの先人の方々の記録のお世話になりました。今後は私の記録も何かの役に立つかもしれないと思い、ここで公開していけたらなと思います。

ゆったりWeb手帳

気になったことをのんびり書くよ