<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<id></id>
<title>イズミログ</title>
<updated>2024-11-19T05:47:25.015Z</updated>
<generator>https://github.com/nuxt-community/feed-module</generator>
<link rel="alternate" href="https://izm51.com/feed"/>
<subtitle>イズミログ - フィード</subtitle>
<category term="blog">
</category>
<contributor>
<name>Izm51</name>
<uri>https://izm51.com/</uri>
</contributor>
<entry>
<title type="html"><![CDATA[Google Cloud認定の初受験で氏名の表記を修正するために焦った話]]></title>
<id>https://izm51.com/posts/google-cloud-certification-name/</id>
<link href="https://izm51.com/posts/google-cloud-certification-name/">
</link>
<updated>2024-11-19T05:26:46.414Z</updated>
<summary type="html"><![CDATA[初めてGoogle Cloud認定資格の試験を受験しました。 その際、登録した氏名が身分証の表記と異なっていることに試験直前で気づき、受験できない可能性があり焦ってしまいました。 しかし、今回受験したテストセンターでは表記が異なっていても受験することができました。この記事では、サポートへの問い合わせや当日のやり取りを共有し、同じような状況に陥った方の参考になればと思います。]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/3DMk6RYPp2XnenGQRB2Wcl/af173ca17f2f1af4d88d8d2838468e1d/google-cloud-cert-thumb.png?w=1080"><p>初めてGoogle Cloud認定資格の試験を受験しました。</p>
<p>その際、登録した氏名が身分証の表記と異なっていることに試験直前で気づき、受験できない可能性があり焦ってしまいました。しかし、今回受験したテストセンターでは表記が異なっていても受験することができました。</p>
<p>この記事では、サポートへの問い合わせや当日のやり取りを共有し、同じような状況に陥った方の参考になればと思います。</p>
<p>[[toc]]</p>
<h1>登録氏名の表記について</h1>
<p>Google Cloud認定資格を受験する際、氏名はWebassessorで登録します。<br>
私はこの際、<strong>氏名をローマ字表記で登録していました。</strong></p>
<p>しかし、受験登録完了時に送られてくるメールには、次のように記載されています。</p>
<blockquote>
<p>CertMetrics に登録されている氏名は、テストセンターにお持ちになる身分証明書と一致している必要があります。</p>
</blockquote>
<p>この注意書きを読んで、<strong>自分が所持している身分証には漢字表記のものしかなく、登録した氏名と一致していないことに気づきました。</strong> Webassessorに登録した氏名を修正しようとしましたが、<strong>WebAssessor上では氏名の修正はできないようになっており、修正にはGoogle Cloud認定のサポートチームへの問い合わせが必要であることが分かりました。</strong></p>
<h1>Google認定資格のサポートへの問い合わせ</h1>
<p>この問題に気づいたのは、受験当日の寝る前の深夜1時でした。<br>
修正が間に合わない可能性も感じつつ、急いでGoogle Cloud認定のサポートチームに問い合わせました。<br>
https://support.google.com/a/contact/certification</p>
<p>すると、翌朝6時頃にサポートから返信が届いており、以下の情報を提供するよう求められました：</p>
<blockquote>
<p>Please provide us with the below details to confirm your identity and update your legal names:</p>
<p>(Registered with Webassessor):<br>
Primary email address:<br>
Address:<br>
Zip code:<br>
Birthday:</p>
<p>To update legal names:</p>
<p>Legal first name:<br>
Legal last name:</p>
</blockquote>
<p>これを受け、8時頃に必要な情報を提供して返信しました。<br>
しかし、<strong>結果的に氏名が修正されたのは受験終了後の深夜1時頃で、試験には間に合いませんでした。</strong></p>
<p>Google Cloud認定のサポート対応時間は 5 AM to 6 PM PT (日本時間：午後10時〜翌日午前11時) でした。<br>
そのため、この時点で当日中に修正が完了しない可能性が高いと感じ、リスケジュールも検討し始めました。</p>
<h1>テストセンターへの問い合わせ</h1>
<p>今回の試験はテストセンターでの受験を予約していました。<br>
試験のリスケジュールには費用がかかるため、最終確認としてテストセンターに直接問い合わせてみました。</p>
<p>問い合わせた結果、<strong>ローマ字表記と漢字表記の差は問題なく受験可能との回答を得ました。</strong><br>
当日、試験会場では運転免許証とクレジットカードを提示し、本人確認を行ってもらった後、<strong>無事に受験することができました。</strong></p>
<p>ただし、この対応はテストセンターによって異なる可能性があります。事前に確認することをお勧めします。<br>
もし受験が認められない場合は、リスケジュールせざるを得ないでしょう。</p>
<h1>おわりに</h1>
<ul>
<li>氏名の修正にはサポートへの連絡が必要で、今回は問い合わせから約24時間後に修正されました。</li>
<li>ローマ字と漢字の表記違いでも受験できる可能性があるため、緊急時はテストセンターに問い合わせてみましょう。</li>
<li>氏名を身分証と一致させられているか、よくチェックしましょう。</li>
</ul>
<p>ちなみに今回は、Associate Cloud Engineer (ACE) に無事合格できました。<br>
プロフェッショナルレベルの取得も狙っていきます。</p>
<p>これから受験される方の参考になれば幸いです。</p>
]]></content>
<published>2024-11-19T05:26:46.414Z</published>
</entry>
<entry>
<title type="html"><![CDATA[Fitbitの文字盤を自作して目標歩数までの所要時間を表示してみた！開発者用ブリッジ接続の有効化の備忘も記録]]></title>
<id>https://izm51.com/posts/fitbit-clock-face-time-to-goal/</id>
<link href="https://izm51.com/posts/fitbit-clock-face-time-to-goal/">
</link>
<updated>2023-05-07T11:37:59.920Z</updated>
<summary type="html"><![CDATA[GWの休日を使って、Fitbitの文字盤(Clock Face)を自作してみました。目標達成までの所要時間が予想できるような文字盤作ってみました。参照した情報をまとめつつ、開発者アカウントの登録や開発者用ブリッジ接続の設定でつまづいたポイントについて書き残します。]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/7naDk1I4OzoMlarQR75tt6/9862c8aa94a22bd8bc5fa341f7105d3c/fitbit-clock-face-time-to-goal-thumbnail__3_.jpg?w=1080"><p>GWの休日を使って、Fitbitの文字盤(Clock Face)を自作してみました。</p>
<p>文字盤の開発は、HTMLやJSのような文法で、シミュレーターやリファレンスも整備されているので比較的簡単に感じました。<br>
参照した情報をまとめつつ、開発者アカウントの登録や開発者用ブリッジ接続の設定でつまづいたポイントについて書き残します。</p>
<p>[[toc]]</p>
<h1>つくったもの</h1>
<p>リモートワークで一日に一歩も外に出ない日が平気である生活をしていたのですが、<br>
このままでは不健康まっしぐらと感じたので、最近は意識的に一定の歩数(9000歩)を歩くことを日課にしています。</p>
<p>その日課の継続ができるように、目標達成までの所要時間が予想できるような文字盤作ってみました。</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/4NkRGYxYoPEdRDvENdSvbG/5deb13cbbcc52c05361c4821f79aae9e/______________________2023_05_07_18_19.jpg" alt="fitbit-time-to-goal-preview"></p>
<p>https://gallery.fitbit.com/details/ab76e03b-4b2e-4052-bb1b-2563f2fe9b62</p>
<h1>開発の事前準備</h1>
<p>以下の記事を参考にしながら開発手順の大枠を掴むことにしました。</p>
<ul>
<li>「Fitbit Versa 3 / Sense の文字盤を作る - Qiita」<br>
https://qiita.com/ChiiAyano/items/17fe390e00c292514350</li>
</ul>
<p>しかし、記事内で触れられている "Fitbit Studio" は <code>April 20, 2023</code> にクローズされており、一部手順が異なっていました。以下、2023/5月時点での自分が実施した準備作業の備忘録を残します。</p>
<h2>前提状況</h2>
<p>今回の開発を始める前の自分の状態は以下です。</p>
<ul>
<li>Fitbitのアカウント(利用者として普通に使うためのアカウント)は作成済み</li>
<li>Fitbitのアプリ(自分の場合はAndroidアプリ)がインストール済み・ログイン済み</li>
<li>アプリとFitbitデバイスの紐付け済み</li>
</ul>
<h2>開発者アカウントの登録手順</h2>
<p>FitbitのDeveloperサイトのガイド"Getting Started"の手順を参考に進めます。<br>
https://dev.fitbit.com/getting-started/</p>
<p>このガイドには説明がなかったですが、開発をすすめるためには自分のFitbitアカウントを開発者アカウントとして登録しておく必要がありました。</p>
<p>上部のメニューバーから開発者向けページを開くと、アカウントが未登録の場合「enroll」のボタンが表示されました。<br>
<img src="//images.ctfassets.net/p9ol5zmjn52c/LjLE3XebN2MQaU1Kzyn0Y/c4f5a8a35ddc4ab5d912091b34d3413c/______________________2023_05_07_19_12.jpg" alt="fitbit-create-developer-account"></p>
<p>このとき、"Register An App"と"Gallery App Manager"の2つのリンクがあり、どちらも開発者向けページですが、自分の場合は"Gallery App Manager"の方で「enroll」ボタンを押すまでFitbitシミュレーター等がうまく動作しませんでした。(<code>You must be enrolled as a developer to use this application.</code>というエラーメッセージが出た。)</p>
<p>"Register An App"の方でログイン等しても開発者アカウントのenrollとはならないようです。<br>
(Clock Face の作成にあたってはこちらのページでの操作は特に必要なさそうでした。)</p>
<h2>ローカル開発環境の準備</h2>
<p>ローカル環境構築は、ガイドの通り進めることができました。<br>
https://dev.fitbit.com/getting-started/</p>
<p>概要</p>
<ul>
<li>node.js のインストール (自分は元から完了済み)</li>
<li>Fitbitシミュレータのインストール (自分はmac版をインストール)</li>
<li>プロジェクトの作成 (コマンド: <code>npx create-fitbit-app my-first-clock</code> )</li>
<li>シミュレーターでの動作確認 (<code>npx fitbit</code> でfitbitのCLIに入ってから <code>bi</code> コマンド)</li>
</ul>
<h2>実機での動作確認手順</h2>
<p>実機での動作確認方法も"Getting Started"のガイド内に記載があります。</p>
<blockquote>
<p>If you're using a Fitbit device, you need to enable the Developer Bridge. On the watch, go to Settings and tap Developer Bridge, then wait until it says Connected to Server.</p>
</blockquote>
<p>Developer Bridge(開発者用ブリッジ接続)の有効化には２つの操作が必要でした。</p>
<ul>
<li>スマホアプリでの"開発者用ブリッジ接続"の有効化
<ul>
<li>Androidアプリの場合: 左上の丸いプロフィールアイコンをタップ→自分の端末("Versa 3"など)をタップ→"開発者メニュー"→"開発者用ブリッジ接続"のトグルを有効化</li>
</ul>
</li>
<li>Fitbitデバイスでの"開発者用ブリッジ接続"の有効化
<ul>
<li>設定を開く→"開発者用ブリッジ接続"("Versa 3について"と"シャットダウン"の間に表示されました)→トグルを有効化</li>
</ul>
</li>
</ul>
<p>また、これらのボタンが表示されるようにするためには、前述の開発者アカウントの登録が先に必要でした。
開発者アカウントの登録ができたあと、アプリからログアウトして再ログインすることでボタンが表示されるようになりました。</p>
<p>※ 参考にした記事: <a href="https://qiita.com/2fbCvmiYKX/items/3020ddce0ecf20638b5f">Fitbit Ionic の設定画面に "開発者向けメニュー" を出す方法 - Qiita</a></p>
<p>ちなみに"開発者用ブリッジ接続"を有効にしても、開発していると十数分ごとくらいで接続が切れてしまい、都度再有効化する必要がありました…。</p>
<p>アプリとFitbitデバイスの両方で開発者用ブリッジ接続を有効にした状態で、fitbitのCLIに <code>bi</code> もしくは <code>install</code> を入力すると、Fitbitデバイスに開発中の文字盤がインストールされて動作確認ができました。</p>
<h2>開発で参考にしたリファレンス</h2>
<p>ロジック関連</p>
<ul>
<li>日時の表示<br>
https://dev.fitbit.com/build/reference/device-api/clock/</li>
<li>歩数等の取得<br>
https://dev.fitbit.com/build/reference/device-api/user-activity/</li>
</ul>
<p>表示関連</p>
<ul>
<li>SVG: WebでいうHTMLのような構造構築関連 (いわゆるベクターを書くようなものではなかった)<br>
https://dev.fitbit.com/build/guides/user-interface/svg/</li>
<li>CSS: Styling関連<br>
https://dev.fitbit.com/build/guides/user-interface/css/</li>
<li>Javascript: Domの操作関連<br>
https://dev.fitbit.com/build/guides/user-interface/javascript/</li>
</ul>
<h2>文字盤の公開方法</h2>
<p>Gallery App Manager からビルドしたファイルアップロードや説明項目の登録ができました。<br>
https://gam.fitbit.com/apps</p>
<p>手順は最初にも紹介した下記の記事が参考になりました。</p>
<ul>
<li>「Fitbit Versa 3 / Sense の文字盤を作る - Qiita」<br>
https://qiita.com/ChiiAyano/items/17fe390e00c292514350</li>
</ul>
<p>項目を入力すると審査に提出することができ、審査を通れば一般に公開することができるようです。</p>
<h1>感想</h1>
<p>環境構築(というよりも開発者用ブリッジ接続の有効化周り)で少し苦戦しましたが、文字盤の作成自体はとても簡単で、また違う用途の文字盤やアプリを作ってみたいと思いました。</p>
<p>APIドキュメントをみると、FetchやPOSTができるメソッドも用意されているようなので、いろいろなことができそうです。<br>
https://dev.fitbit.com/build/reference/companion-api/fetch/</p>
<p>最近、M5StickCやラズパイも調達したので、組み合わせてなにか面白いことできないかなーと考え中です。この記事はここまで、ではまた〜！</p>
]]></content>
<published>2023-05-07T11:37:59.920Z</published>
</entry>
<entry>
<title type="html"><![CDATA[P5.jsでAudio Visualizerを作ってみた！【ビート検知】]]></title>
<id>https://izm51.com/posts/p5-js-audio-visualizer/</id>
<link href="https://izm51.com/posts/p5-js-audio-visualizer/">
</link>
<updated>2020-06-20T23:15:24.017Z</updated>
<summary type="html"><![CDATA[今回はP5.jsをつかってサウンドビジュアライザーを作成してみました。P5.jsはオーディオを扱うにも便利ですが、ビートの検知で苦労したところがありました。かなり荒い調整なので参考になるかどうかはわかりませんが、簡単に記事に残しておこうと思います。]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/1idZZ4FTooxhFxPWRoiZ6q/1d232d1d5104f7f136d8b290a6fbf08f/pastel-visualizer.png?w=1080"><p>こんにちは。<br>
今回は<a href="https://p5js.org/">P5.js</a>をつかってサウンドビジュアライザーを作成してみました。</p>
<p>P5.jsは、プログラミングで絵を描くためによく使われているProcessingという言語のJavaScript版ライブラリになります。<br>
以前からビジュアライザーを作りに興味はあったのですが、今回はコチラの記事</p>
<p><a href="https://and-engineer.com/articles/Xs4BlxEAACQAIRmg">Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは</a></p>
<p>に触発されまして、Web上にビジュアライザーを作れたら面白いと思いやってみました！！</p>
<p>P5.jsはオーディオを扱うにも便利ですが、ビートの検知で苦労したところがありました。<br>
かなり荒い調整なので参考になるかどうかはわかりませんが、簡単に記事に残しておこうと思います。</p>
<p>[[toc]]</p>
<h2>作ったもの</h2>
<h3>Web版</h3>
<p>イメージ画像</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/1idZZ4FTooxhFxPWRoiZ6q/1d232d1d5104f7f136d8b290a6fbf08f/pastel-visualizer.png" alt="pastel-visualizer"></p>
<p><a href="https://izm51.github.io/visual-coding/visualizer1-pastel/">https://izm51.github.io/visual-coding/visualizer1-pastel/</a></p>
<p>※ブラウザの設定でマイクを許可し、画面をクリックすると開始します。</p>
<h3>YouTube Demo</h3>
<p>デモ動画</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/GD0aorbX3Wk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>背景はパステルカラーがくるくると回っていて、スネア(の音域)に合わせて色が変わります。<br>
そしてキックに合わせて中央の丸が大きくなり、そこから円や四角が近づいてくるようになっています。<br>
下辺にはスペクトラムも設置しました。</p>
<p>始めは何となくで決めた色でしたが、パステルカラーとホワイトのおかげでKawaii感じになりました。</p>
<h2>Beat Detection の実装</h2>
<p>P5.jsには描画だけでなく、Audioに関する便利な関数もたくさんありました。<br>
おかげでマイクの取得やfftなどは非常に簡単でした！</p>
<p>しかしビートの検知には若干苦労しました。<br>
P5.js自体にもPeakDetectという関数があったのですが、ちょっと反応がとがりすぎという印象でした。<br>
(触り始めのときの感想なので、チューニング次第では普通に使えるかも？)</p>
<p>そこで今回は、下記記事を参考に簡単なBeatDetectorも実装してみました。</p>
<p><a href="https://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/">https://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/</a></p>
<p>※テンポを計算するものではなく、ある周波数領域の音量が大きくなったのを検知するものです。</p>
<pre><code class="language-js">class BeatDetect {
constructor(mode = 'kick', freq2) {
if (!isNaN(freq2) && !isNaN(mode)) {
this.freq1 = mode;
this.freq2 = freq2;
} else {
if (mode == 'snare') {
this.freq1 = 2000;
this.freq2 = 6000;
} else if (mode == 'male') {
this.freq1 = 200;
this.freq2 = 2000;
} else {
// mode == "kick"
this.freq1 = 20;
this.freq2 = 80;
}
}
this.time = 0;
this.threshold = 0;
this.minThreshold = 0;
this.decayRate = 0.01;
this.minThresholdRate = 0.8;
this.holdTime = 45;
this.marginThresholdTime = 10;
this.marginThreshold = 0.06;
}
update(fft) {
const e = fft.getEnergy(this.freq1, this.freq2);
const level = e / 255.0 || 0.0;
let isBeat = false;
if (level > this.threshold && level > this.minThreshold) {
this.threshold = level * 1.05;
this.minThreshold = max(this.minThreshold, level * this.minThresholdRate);
if (this.time > this.marginThresholdTime) {
isBeat = true;
}
this.time = 0;
} else {
if (this.time == this.marginThresholdTime) {
this.threshold -= this.marginThreshold;
}
this.time += 1;
if (this.time > this.holdTime) {
this.threshold -= this.decayRate;
}
}
return { threshold: this.threshold, level: level, isBeat: isBeat };
}
}
</code></pre>
<p>全体のコードは<a href="https://github.com/izm51/visual-coding/tree/master/docs/visualizer1-pastel">GitHub</a>にあります。</p>
<p>課題としては、</p>
<ul>
<li>反応の良い周波数帯を探る</li>
<li>一つの音に何回も反応させたくない(短時間で反応しすぎるのを防ぐ)</li>
<li>逆にアクセントの強弱で弱くなってるキック等にはちゃんと反応させたい</li>
</ul>
<p>という感じでした。</p>
<h3>キックとスネアを検知する</h3>
<p>まずは曲のリズムに良い感じに反応する周波数帯を探しました。</p>
<p>自分がよく聞くのはMathRock(バンド系)とFutureBounce(クラブ系)、あとはアイドル系です。<br>
なので、今回はその3ジャンルで探りました。</p>
<p>ビートを取るためであれば低音域が最適かと思っていましたが、キックにメロディがかぶりまくることもあれば、低音域で全く音が鳴っていないこともあり、低音だけでは絵の変化に面白みがないパターンがありました。<br>
いろいろ試した結果、バスドラの音域(20Hz~80Hz)とスネアやクラップらへんの音域(2000Hz~6000Hz)が曲への反応がよさそうだったので、この2領域を使うことにしてみました。</p>
<h3>ビートが連続で検知されまくるのを防ぐ</h3>
<p>次に、一回のバスドラで何回もビートが検知されたり、曲が静かになって音量に変化がない時に連続で反応してしまうことがあり、そこに対処しました。</p>
<p><img src="https://lh3.googleusercontent.com/Ws0DhpxtEG2bIaMDc1puG3mt41TvszBnupVyf6Axsu4WOVSkA5GoU3kcNr19LfyuDq-yjzX2R2OqZPFpr8zJOhQf_I-cXNiPiycc_9Nba8hP8d-uFotY-q7SyknFO1DrUNDcU04Uxg" alt="beat-detect-visualizer"></p>
<p><a href="https://izm51.github.io/visual-coding/visualizer0-3band/">threshold等の変数調整時につかっていたデモ</a></p>
<p>始めはthreshold、decayRate、holdTimeの変数だけでちょうどいい調整を探していたのですが、曲によってどうにも反応が変わってしまい、いろいろと手探りで変数を増やしました。<br>
具体的には下記の部分になります。</p>
<pre><code class="language-js"> if (level > this.threshold && level > this.minThreshold) {
this.threshold = level * 1.05;
this.minThreshold = max(this.minThreshold, level * this.minThresholdRate);
if (this.time > this.marginThresholdTime) {
isBeat = true;
}
</code></pre>
<p><code>if (this.time > this.marginThresholdTime)</code><br>
で連続の検知を防止し、</p>
<p><code>this.minThreshold = max(this.minThreshold, level * this.minThresholdRate);</code><br>
で曲中の静かな部分ではビートを検知しすぎないようにしました。</p>
<h3>強弱のあるキックにもうまく反応させる</h3>
<p>今回のビート検知の仕組みでは少し前に鳴った音量がビート検知の閾値になるため、例えばバンド系の曲でバスドラがダブルで踏まれているときに、二つ目が少し弱かったりすると反応が悪くなってしまいました。</p>
<p>そこで、無理やり感はありますがビート検知から少し時間が経過したら、holdTimeより少し早いタイミングでthresholdを少しだけガクッと下げるようにしました。</p>
<pre><code class="language-js"> if (this.time == this.marginThresholdTime) {
this.threshold -= this.marginThreshold;
} // this.marginThreshold = 0.06
</code></pre>
<p>なにかもっとちゃんとしたチューニングはありそうですが、今回はいい感じの反応になったので一旦これで満足しています。</p>
<h2>まとめ</h2>
<p>という訳で、今回は初めてのビジュアライザーを作成してみました。<br>
思い返せば中学生くらいの頃から音に合わせて動くプロジェクションマッピングとか、高校時代もインスタレーションに興味がありましたがなんだか手が出せずにいました。</p>
<p>少しずつWebやオーディオの知識をためてきたおかげで、気づいたら昔憧れていた領域に手を出せるようになっていました。</p>
<p>Processingなら気軽にビジュアルコーディングができます！<br>
今後もまた面白いものを作っていきたいと思います。</p>
<p>ではまた。</p>
]]></content>
<published>2020-06-20T23:15:24.017Z</published>
</entry>
<entry>
<title type="html"><![CDATA[Nuxt + Contentful のブログにFeedを追加する方法【Markdown対応】]]></title>
<id>https://izm51.com/posts/nuxt-contentful-blog-feed/</id>
<link href="https://izm51.com/posts/nuxt-contentful-blog-feed/">
</link>
<updated>2020-05-04T02:06:50.501Z</updated>
<summary type="html"><![CDATA["@nuxtjs/feed"を使ってブログの更新情報をフィードで提供する手順を紹介します。]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/45h0BXIvLw7AThubuOqeY3/bff07d1698e0dd81abad7b46ae1b71d4/nuxt-blog-rss.jpg?w=1080"><p>最近InoreaderというRSSリーダーで情報収集をするようになり、自分のブログもフィードに対応させたいと思うようになりました。<br>
そこでこの記事では、"@nuxtjs/feed"を使ってブログの更新情報をフィードで提供する手順を紹介します。</p>
<p>[[toc]]</p>
<h2>使用するプラグインのインストール</h2>
<p>まず、今回使用するプラグイン <a href="https://www.npmjs.com/package/@nuxtjs/feed">@nuxtjs/feed</a>をインストールします。</p>
<pre><code class="language-bash">$ npm install @nuxtjs/feed
</code></pre>
<p><code>nuxt.config.js</code>のmodulesに追加します。</p>
<pre><code class="language-js">modules: [
'@nuxtjs/feed' // 追加
],
</code></pre>
<p>そして、<code>nuxt.config.js</code>にfeedの設定を記入するセクションを追加します。</p>
<pre><code class="language-js">modules: [
'@nuxtjs/feed'
],
// ここから追加
feed: [
// この中に設定を記述していく
]
</code></pre>
<h2>Feedの設定</h2>
<p>Contentfulから記事一覧を取得するために、<code>~/plugins/contentful</code>を読み込みます。<br>
<code>nuxt.config.js</code>の最初のほうに次の行を追加します。</p>
<pre><code class="language-js">const client = require("./plugins/contentful");
</code></pre>
<p>feedの設定項目を記述していきます。</p>
<p>まず、フィードを書きだすURLを相対パスで設定します。<br>
一般的には、"/feed", "/feed/", "/feed.xml"などが多いようです。</p>
<pre><code class="language-js">feed: [
{
path: '/feed' // 追加
}
]
</code></pre>
<p>次に、フィードに記事の一覧が登録されるように設定していきます。<br>
当ブログの設定を例として紹介しますので、適宜書き換えて参考にしてください！</p>
<pre><code class="language-js">feed: [
{
path: '/feed',
// ここから追加
async create(feed) {
feed.options = {
title: "イズミログ",
link: "https://izm51.com/feed", // 上のpathで設定したものと対応するように
description: "イズミログ - フィード"
};
// 記事を取得
await client
.getEntries({
content_type: "post",
order: "-sys.createdAt"
})
.then(entries => {
entries.items.forEach(post => {
feed.addItem({
title: post.fields.title,
id: `https://izm51.com/posts/${post.fields.slug}/`, // 記事のURL
link: `https://izm51.com/posts/${post.fields.slug}/`, // 記事のURL
description: post.fields.description,
content: post.fields.content,
date: post.fields.update ? new Date(post.fields.update) : new Date(post.sys.createdAt), // 記事の最終更新日
published: new Date(post.sys.createdAt), // 記事の公開日
});
});
feed.addCategory("blog");
feed.addContributor({
name: "Izm51",
link: "https://izm51.com/"
});
});
},
}
]
</code></pre>
<p>dateについて補足しますと、このブログではContentfulのContent modelにupdateという日付型の入力欄を設置し、記事を修正したときに手動で書き換える形式にしています。<br>
ちょっとした修正だけで毎回最終更新日を更新したくないため、このようにしています。</p>
<p>最後に、cacheTimeとフィードのタイプを設定します。</p>
<pre><code class="language-js">feed: [
{
path: '/feed',
async create(feed) { /* 略 */ },
// ここから追加
cacheTime: 1000 * 60 * 15,
type: "atom1"
}
]
</code></pre>
<p>フィードのタイプは"rss2", "atom1", "json1"の3種類が設定できます。<br>
これらのタイプとはフィードの規格のことですが、"rss2"か"atom1"に設定しておけばたいていのRSSリーダに対応しているかと思います。</p>
<h2>MarkdownをHTMLに展開する</h2>
<p>ここまでで一応フィードの設定は完了ですが、このままでは記事の内容がMarkdown形式のまま配信されてしまいます。<br>
そこで、markdown-itで記事内容ををHTML形式に展開してから登録するように設定していきます。</p>
<p><code>nuxt.config.js</code>の最初の方に次の一行を追加して、markdown-itを読み込みます。</p>
<pre><code class="language-js">import MarkdownIt from 'markdown-it';
</code></pre>
<p>feedのcreateの中で、markdown-itを使用するための準備をしておきます。</p>
<pre><code class="language-js"> async create(feed) {
feed.options = {
// 略
};
// 追加
const md = new MarkdownIt({
html: true,
typography: true,
})
</code></pre>
<p>feed.addItemの部分で、記事の内容をmarkdown-itでHTMLにレンダリングしたものをcontentに登録するように設定します。</p>
<pre><code class="language-js"> feed.addItem({
// 略
content: md.render(post.fields.content), // 変更
</code></pre>
<p>記事内にある画像とは別にサムネイル画像を設定している場合は、このように記事の最初に画像を挿入してしまうのもおすすめです。</p>
<pre><code class="language-js">content: `<img src="https:${post.fields.image.fields.file.url}?w=1080">` + md.render(post.fields.content),
</code></pre>
<h2>まとめ</h2>
<p>最終的な完成版は次のようになりました。</p>
<pre><code class="language-js">feed: [
{
path: '/feed',
async create(feed) {
feed.options = {
title: "イズミログ",
link: "https://izm51.com/feed",
description: "イズミログ - フィード"
};
const md = new MarkdownIt({
html: true,
typography: true,
})
await client
.getEntries({
content_type: "post",
order: "-sys.createdAt"
})
.then(entries => {
entries.items.forEach(post => {
feed.addItem({
title: post.fields.title,
id: `https://izm51.com/posts/${post.fields.slug}/`,
link: `https://izm51.com/posts/${post.fields.slug}/`,
description: post.fields.description,
content: `<img src="https:${post.fields.image.fields.file.url}?w=1080">` + md.render(post.fields.content),
date: post.fields.update ? new Date(post.fields.update) : new Date(post.sys.createdAt),
published: new Date(post.sys.createdAt),
});
});
feed.addCategory("blog");
feed.addContributor({
name: "Izm51",
link: "https://izm51.com/"
});
});
},
cacheTime: 1000 * 60 * 15,
type: "atom1"
}
]
</code></pre>
<p><code>$ npm run generate</code>することでフィードが生成されるようにできました！<br>
あとはトップページなどにフィードへのリンクを追加すれば設定完了です。</p>
<p>これで、普段使用しているRSSリーダーでも自分のブログが見られるようになりました！<br>
<a href="https://izm51.com/feed">https://izm51.com/feed</a></p>
<p>ではまた。</p>
<hr>
<p>【参考】<br>
generate時にエラーが出たときの対処<br>
<a href="https://stackoverflow.com/questions/55414766/typeerror-cannot-add-module-namespace-property-nuxtconfigfile-to-nuxt-config">javascript - TypeError: Cannot add module namespace property '_nuxtConfigFile' to nuxt.config.js with NUXT 2.4.5 - Stack Overflow</a></p>
<blockquote>
<p><code>nuxt.config.js</code> の <code>module.exports = {}</code> を <code>export default { }</code> に変更する</p>
</blockquote>
]]></content>
<published>2020-05-04T02:06:50.501Z</published>
</entry>
<entry>
<title type="html"><![CDATA[Googleフォトのアルバムから埋め込みコードを生成するツールを作った【ブログに便利】]]></title>
<id>https://izm51.com/posts/google-photos-embed-link-generator/</id>
<link href="https://izm51.com/posts/google-photos-embed-link-generator/">
</link>
<updated>2020-04-02T11:54:54.677Z</updated>
<summary type="html"><![CDATA[Googleフォトのアルバム共有リンクから、そのアルバムに含まれる画像すべての埋め込み用タグをいっきに生成するツールを作成しました。ブログの画像サーバーとしてGoogleフォトを使用する場合に便利なツールです。この記事には、このツールの使い方と、作成時に参考にしたことなどを残しておきます。]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/jfmSG2JA2pFQXH7gHA83d/8bb7464519aac00dd94b44ad9ae3c788/Google_Photos_Embed_Link_Generator.jpg?w=1080"><p>こんにちは、イズミです。</p>
<p>今回は、Googleフォトのアルバム共有リンクから、アルバムに含まれる画像の埋め込み用タグを一気に生成するツールを作成しました。</p>
<p>リンク：<a href="https://google-photos-embed-generator.glitch.me/">Google Photos Embed Link Generator</a></p>
<p><img src="https://lh3.googleusercontent.com/KHhtkEXJWlykXU5QYkb9EVSt7AaQX94rGYgLIyx6tijvCgYlrWtT7O-T4AP4QVhyHGiMtoETJvbW19G2hKg81uVFXgya90G0RNWjsK6FOVIrmf0n5iN4k82MmatpfvmUy5YcY8gHJA" alt=""></p>
<p>この記事には、このツールの使い方と、作成時に参考にしたことなどを残しておきます。</p>
<p>[[toc]]</p>
<h2>Googleフォトから埋め込みコードを生成したい理由</h2>
<p>このブログでは、ブログ記事の管理に <strong>Contentful</strong> を使用しています。<br>
Contentfulは、 <strong>無料プランの場合に保存できるレコード数が5000まで</strong> という制限があります。<br>
※レコード数は、記事などの"エントリー数"と、アップロードした画像などの"アセット数"の合計</p>
<p>そこで本ブログではレコード数を節約するため、 <strong>画像サーバーとしてGoogleフォト</strong> を使用しています。<br>
（過去記事：<a href="/posts/nuxt-blog-first-settings#%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E7%94%BB%E5%83%8F%E3%82%B5%E3%83%BC%E3%83%90%E3%81%A8%E3%81%97%E3%81%A6google%E3%83%95%E3%82%A9%E3%83%88%E3%82%92%E4%BD%BF%E3%81%86">ブログの画像サーバとしてGoogleフォトを使う</a></p>
<p>しかし、この過去記事で紹介した方法では画像一枚一枚に手間がかかってしまい面倒になったため、アルバムから一気に <strong>埋め込み用コードを生成するWebツール</strong> を作成してみました。</p>
<h2>アルバムの作成手順と埋め込みコード生成の仕方</h2>
<p>使い方はいたって簡単で、Googleフォト上でアルバムを作成し、その共有URLを張り付けるだけです。</p>
<p>アルバムの作成方法から、実際に手順を追って説明していきます。</p>
<p><img src="https://lh3.googleusercontent.com/LwdTS3weqfBZl12D67V_IV__RzyFAlvM9ESRI2J8AQ7T4fVBJ2SfY-qQNpON31jrqj6WqKHVOCF3bpQXXCqDLhZP3QsQaN5Qc5qW4to4FwU9WFj9sVUc0OC88quRbEiL0JQGKdV3qw" alt=""><br>
まず、ブログに使用したい画像たちをGoogleフォトにアップロードします</p>
<p><img src="https://lh3.googleusercontent.com/asfru0SZAVPAMavVFnVUabvzZx1f4LgICczB60Z_Y9WOHZ9a81hipZd6j2toBTmFQIy78QVPFfcyR2BuM_7txU9x9ZaJnpGTX_n6DHTrgjNph8eKyV0CwjvUmRJZJ5mY5mvshjFs7Q" alt=""><br>
アップロードが完了すると、左下にモーダルが出現します。<br>
ここで、「アルバムに追加」のボタンを押して、先ほどアップロードした画像たちのアルバムを作成します。<br>
（「共有アルバム」のボタンを押すと手順を若干飛ばせます。お好みで）</p>
<p><img src="https://lh3.googleusercontent.com/LRWJbr2OXphOUnRcVMzsXL2y6UYTLNlzpeiXT4NCk_da5RoZE-B86EGSUzuwInwnATks58SD5unl60a34wR7zCXlFC2z9GhtHYwak9zxLTA3F-y_apBGVWBqMEykVLZqwVKF1RDKXg" alt=""><br>
「新しいアルバム」を押してアルバムを作成します。<br>
既存のアルバムに追加しても問題ないです。</p>
<p><img src="https://lh3.googleusercontent.com/_mx7bv4zb3lgLHUMvcfE8ZT_bhwnJJds0OfvCtbDsU3gVbDJLwn-DWhyd9mGR40VCzxmFgvvYO3lNc3d9VaFiZGZP_yWYMES4b1I3oEx_A0Np661daeGxTwH0PA01uZwVQrmfzQ4Sg" alt=""><br>
タイトルを適当に入力し、左上の☑ボタンを押します。</p>
<p><img src="https://lh3.googleusercontent.com/dZcgdjGgQnsDJesj7h-IRxEMVYUM7t-57uc1heNCyopTiQzVWMmJsO-CMr_Zvn3ePe9-VGmatzXHlEWPy498mvvX4gYocBplRIG9PurZT10GKWenxCM6-l2oNRkdfDYXCwlWZchxPA" alt=""><br>
右上の共有ボタンを押します。</p>
<p><img src="https://lh3.googleusercontent.com/2LV_6eWKj8VCEzaUL7vKLoBWTbSVapRMdlIq9x_OD7mW2AsBpb4e0A-wH3rNsMI2PaI2zkbEfBB_MpX7J5HchtbunZH1oKui98NxRu6iMHHHFhxvi87YSAwWrisCmmn2BRwtfH1Snw" alt=""><br>
「リンクを作成」ボタンを押します。</p>
<p><img src="https://lh3.googleusercontent.com/__YEjM4D9S0Y9odqi44MiZb-3zqYkda9FrX-dtT24pb5Y3W0TcBo6MWUkSV_YPWTbKXE4sNcLlBq7Vr61SEY7K4fxz-LI8pl03APPshoE3KfB3lUek7DPZk906Z2pjiR7CRyXqJTdQ" alt=""><br>
少し待つと共有用リンクが作成されるので、それをコピーします。</p>
<p><img src="https://lh3.googleusercontent.com/hUDqyVl2xLmGEodjsvYX-IHbAxaJgMw_CpzH995AWViqXHN_UQUdvUBBj7G6ECdFIXLeJrsD2NZOCeqVJEsJu0mJ99tgy63MUxnUbg4hHrLbqXfuKl_zanUfS4fTqlyfQWHVJAbjrA" alt=""><br>
<a href="https://google-photos-embed-generator.glitch.me/">Google Photos Embed Link Generator</a> を開きます。<br>
入力欄に先ほどコピーしたアルバムの共有リンクを張り付けて、「GENERATE」ボタンを押します。<br>
（リンクのURLではなく、<code>https://photos.app.goo.gl/</code> 以後のIDのみ張り付けても動作します。）</p>
<p><img src="https://lh3.googleusercontent.com/KHhtkEXJWlykXU5QYkb9EVSt7AaQX94rGYgLIyx6tijvCgYlrWtT7O-T4AP4QVhyHGiMtoETJvbW19G2hKg81uVFXgya90G0RNWjsK6FOVIrmf0n5iN4k82MmatpfvmUy5YcY8gHJA" alt=""><br>
するとこのようにアルバム内の画像一覧が表示されます。</p>
<p><img src="https://lh3.googleusercontent.com/hH5vg_kZW8k1FFxmst6IKu0wFhwcaOZlsCyY2--RdNjw7A_pcm4Ah3VdEOQvhedBV_kSM9QGRWjGKVrgNf_3v1vYpF0DCaLA-HQMtpcR8MnJOog2bG_8GI2mVvWfruMzDvcRbD2xrw" alt=""><br>
オプション欄で次のような設定をできるようにしています。</p>
<ul>
<li>Width：Googleフォトから取得する画像の横幅を指定できます。</li>
<li>Markdown：有効にするとマークダウンで画像を挿入するためのシンタックスを自動で追加します。</li>
</ul>
<p><img src="https://lh3.googleusercontent.com/XWZ_4aOuYLKlBgHWAzUeB7NmpWY2Ts_326sdxtyDUc5xAU-cCVUtB63CWFYpOyd_fJ1YFl8QRv88Nb4x5p6brVRQjgyXrDK5r-YaqIiVjOeU5z_FloMb9khDonwjW1u9hfCiiUG88g" alt=""><br>
画像自体をクリックするか、各画像の右下の「Copy!」ボタンを押すと、埋め込みコードがクリップボードにコピーされます。<br>
これをブログ編集画面等の埋め込みたい箇所に張り付ければ完了です！</p>
<p>埋め込みコード作成後の画面はそのままブックマークしておいて、作業を中断してまた別のタイミングで開くこともできます。</p>
<p><code>https://google-photos-embed-generator.glitch.me/***</code><br>
の***の部分にアルバムのIDを入力して直接開くことも可能です。</p>
<p><strong>※利用上の注意</strong></p>
<ul>
<li>アルバムの共有を無効にしてしまうと、ブログに張り付けた画像も表示できなくなると思います。</li>
<li>本ツールによる画像の流出などについて責任は持てません。ブログ等でパブリックに公開する用の画像のみで利用してください。</li>
</ul>
<h2>参考記事</h2>
<p>今回のツール作成では、以下の記事を大いに参考にしました。<br>
<a href="https://medium.com/@ValentinHervieu/how-i-used-google-photos-to-host-my-website-pictures-gallery-d49f037c8e3c">How I used Google Photos to host my website picture gallery</a></p>
<p>Googleフォトのアルバムから貼り付け用のURLを取得するところまでは上の記事の内容をそのまま使用しています。<br>
この記事のサンプルでは画像の一覧をjsonのようにただ並べて取得するだけだったので、ブログ作成に利用しやすいようにアレンジしてみました。</p>
<p>今回はexpressで作成しましたが、慣れていなかったのでたぶん簡単そうなところでもつまずいてしまいました。</p>
<ul>
<li><a href="https://va2577.github.io/post/99/">Node.js の express で POST した値を取ろうとしたら request.body が undefined になる</a></li>
<li><a href="https://qiita.com/kamihork/items/1b13d2157979d1837849">Expressにおけるejsの使い方 - Qiita</a></li>
</ul>
<h2>まとめ</h2>
<p>最後に、今回作成したツールのソースコードを一応貼っておきます。<br>
リンク：<a href="https://glitch.com/edit/#!/google-photos-embed-generator">Glitch</a></p>
<p>そもそも根幹部分は僕の製作ではないですが、ご自由に参考にしてください！</p>
<p>もし使ってみて感想や要望があれば、ぜひコメント欄まで！！</p>
<p>あと最近、東京の隠れフォトスポットを探すブログを始めたので、興味のある方は見てみてください！<br>
<a href="https://tokyizm.com/">Tokyizm - 「ココで撮りたい」を見つけるWebメディア -</a></p>
<p>ではまたー！</p>
]]></content>
<published>2020-04-02T11:54:54.677Z</published>
</entry>
<entry>
<title type="html"><![CDATA[国際学会に初参加した感想と観光の写真【大阪】]]></title>
<id>https://izm51.com/posts/osaka-photo-Oct-2019/</id>
<link href="https://izm51.com/posts/osaka-photo-Oct-2019/">
</link>
<updated>2019-10-29T23:44:12.551Z</updated>
<summary type="html"><![CDATA[10/15~18に大阪で開催された国際会議"2019 IEEE 8th GCCE"でポスター発表してきました。 あっさり目の感想と観光の写真で記事にします。]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/1SdJ7yhACiZ1wm5AQY6iii/447cc08e24c9f06dd8c5b83eed3c7b89/P1030565.jpg?w=1080"><p>10/15~18に大阪で開催された国際会議 <strong>“2019 IEEE 8th GCCE”</strong> でポスター発表してきました。<br>
今回はそのあっさり目の感想と観光の写真を記事にしたいと思います。</p>
<h2>初めての学会参加で感じたこと</h2>
<p>今回の学会参加を通して僕は、学会とは <strong>“情報交換の場”</strong> だと感じました。<br>
(経験者の方々にとってはすごく当然のことだと思いますが。)</p>
<p>学会初参加の僕にとって、学会は雰囲気の想像できない未知の場所で不安もありました。上手く発表できるのか、英語の質疑に対応できるのか、など心配事も多かったです。</p>
<p>実際に参加してみると、今回僕は「ポスター発表」だったこともあり、“発表”というよりは <strong>“コミュニケーション”</strong> という感じで、あまり緊張はなかったです。会話を通して自分の研究内容を知ってもらい、様々な視点から意見をもらうことができました。</p>
<h2>ポスター発表のよさ</h2>
<p>今回の学会では、「口頭発表」、「ポスター発表」、「デモ発表」の3種類の発表形式がありました。</p>
<p>「口頭発表」は会議室のような部屋の前にスライドを表示して発表する “The学会”感のある形式、「ポスター発表」は研究内容をまとめたポスターの前に立ち、興味を持ってくれた人に説明する形式、「デモ発表」はポスターに加えてPCやハードウェアを持参し、実際にデモが行える形式です。</p>
<p>「口頭発表」は発表15分+質疑5分でしたが、「ポスター」「デモ」は1時間40分の長い発表時間がありました。この <strong>長い時間で色々な人と意見交換ができる</strong> ことは、「ポスター発表」形式の良い点だと感じました。今回は専門の近い人だけでなく、分野の異なる人にも発表を聞いてもらうことができたので、専門的な意見だけでなく素朴な疑問や感想もいただくことができました。</p>
<h2>まとめ</h2>
<p>学会期間中には観光のバスツアーやヒルトンホテルでの夕食会のようなイベントもあり、全体を通して <strong>とても楽しかった</strong> です。刺激ばかりで、今後のモチベーションにもつながる良い経験となりました。</p>
<hr>
<p>ここからは大阪観光の写真。<br>
2日目の夜に開催されたバスツアーでは、夜の大阪城と梅田スカイビルを観光しました。</p>
<p><img src="https://lh3.googleusercontent.com/ojrDVgjh6Phzba6LORv_ss2CJw0ih3az9AnyCX449sFS6xN_3iEHUvOsZeP1uJjMQI1b59bVLQYADRsN5FY69AEjoknjn27qZv8uixB_2NR20IvV1O8jEwCg1A_Meq5roTaCrh8-ng=w2400" alt=""></p>
<p>梅田スカイビル展望台からの景色。</p>
<p><img src="https://lh3.googleusercontent.com/Nd6Jb5z31fCKiIMeNhpRLD8wlss6LZTI-czgbhRpRhTUWgDlIoBnPpga0No9NDxfJECNixAh1xI_Sg5zxO7UpSXp9LcroCwXd_481DjFZjtR4_uF7iVYLc-sSAn8p2pPWS15QnAQHw=w2400" alt=""></p>
<p>梅田スカイビル・屋上の空中庭園展望台からの下りエスカレーター。</p>
<p><img src="https://lh3.googleusercontent.com/mc6oeEzwkX_nECKybo2p3aeEK3bz_7-bWRvMWCEQMQAfC3QNKE0OYydqxmhg7gJGHAwoMZi3Wc3SkUlL09Pk6gZyx6SB10HBG7Aqa7vY9sWtSViN-L6S2dAx8A8AS0uVY8e9HiAnpg=w2400" alt=""></p>
<p>梅田スカイビル（下から）</p>
<p><img src="https://lh3.googleusercontent.com/uXelCa8GCc-5kyAyFIu98axdgZhVapILlSYZ3MD5wtAe03Wrj6X7jcWNeOORx2w4QUml1QRECxZx56Dq6vUs_W1DGentkkFSrnMCoMzPnBSDn6VZYm-KKbkdr-1fkW8ktL8ACnfrNg=w2400" alt=""></p>
<p>夜の大阪駅。蔦屋書店が大きくて便利そう。</p>
<p><img src="https://lh3.googleusercontent.com/cSmPnb1Yn_ZsKO2JpBGICSbu3IkP3gnqb8aM4ViJN4HrPQrsh8H4wESovjiwX841sp3voCNEHigOOSfBQLYR5Da0VDyYBh4sCB8xoxjdIuv020YtNQxnlrMkVOlZjzEXjxy7BK8KuA=w2400" alt=""></p>
<p>大阪駅内で撮影。良いカーブ。</p>
<p><img src="https://lh3.googleusercontent.com/v1Y9W-oQmKofg5bON5vIesJaxoIsClsrKlCovtmCY_PiWPF2Srs6A3Xo0V72tQaD2q6n539Gvtkq2rE-0Al2p0ydJRT5KSeYmi13KOGL5lM4S_RZ0P9hWwA10YLrG2K656avhZ4cgw=w2400" alt=""></p>
<p>大阪駅から宿までの帰り道で撮影。</p>
<p><img src="https://lh3.googleusercontent.com/JjmZxgXHMxpEY2bIBcqVhMgR1ELXHatq9oUeB_dxGlpavh00Nw7e3Dg4e8Yn5lTjbBHSGCASVbmdH-iLsM9SHE6ncrDEU9zmzzNmpqOPzKHj35ChhfIxu8ETjFLYYZzMB_D6HS_s5w=w2400" alt=""></p>
<p>最終日は発表と閉会式の後、通天閣など大阪の名所を巡り、グルメも堪能。</p>
<p>学会も観光も非常に有意義な大阪旅でした。<br>
海外で開催の学会にも挑戦できるように頑張りたい。</p>
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/B38okp3BvIF/?utm_source=ig_embed&utm_campaign=loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/B38okp3BvIF/?utm_source=ig_embed&utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> この投稿をInstagramで見る</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div></div></a><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/B38okp3BvIF/?utm_source=ig_embed&utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">Tatsuhiko Imaizumi(@mimizm51)がシェアした投稿</a> - <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2019-10-23T04:31:53+00:00">2019年10月月22日午後9時31分PDT</time></p></div></blockquote> <script async src="//www.instagram.com/embed.js"></script>]]></content>
<published>2019-10-29T23:44:12.551Z</published>
</entry>
<entry>
<title type="html"><![CDATA[スマホのブラウザに最適なミニマルなブックマークリストサイトを作った]]></title>
<id>https://izm51.com/posts/the-homepage/</id>
<link href="https://izm51.com/posts/the-homepage/">
</link>
<updated>2019-09-24T02:38:05.735Z</updated>
<summary type="html"><![CDATA[スマホ版ブラウザのホームページに使えそうな、シンプルなブックマークリストサイトを作ってみました。ログイン不要で、自由に設定したブックマークリストを表示できます。見た目はダークでミニマル。落ち着いたデザインを目指しました。]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/2fDwUcagY6zjDukQErM54t/2f5ae216fa88dcd52290c1dc31429985/Bookmark_List_WebApp.jpg?w=1080"><p>今回は、スマホ版ブラウザのホームページに使えそうな、シンプルなブックマークリストサイトを作ってみました。</p>
<p>ログイン不要で、自由に設定したブックマークリストを表示できます。<br>
見た目はダークでミニマル。落ち着いたデザインを目指しました。</p>
<p>リンク： https://izm51.github.io/home/</p>
<p><img src="https://lh3.googleusercontent.com/BMW98TfoH94hv3bltQs82Afqaa8GipP3zsiel1_i_8KHDQf1tlMYxuahz81JDf4CMnz24-820F0py7_6UkkZ1dfgT_dY0QIXfEyH8gLuDLQ4dDnRp5gqdIHKTrnbuWyZ-zwbaGDlBQ" alt="Preview"></p>
<p>[[toc]]</p>
<h2>仕様</h2>
<ul>
<li>サイト上でブックマークの追加・削除ができる。</li>
<li>ブックマークリストを更新するとURLのクエリが変更される。</li>
<li>リストが完成したら、そのURLをホームに設定する。</li>
<li>ログインやCookie情報が不要で誰でも利用できる！</li>
</ul>
<h2>使い方</h2>
<ul>
<li>最下部のOptionからブックマークを追加
<ul>
<li>タイトル未入力の場合はURLがタイトルになる</li>
</ul>
</li>
<li>各リンク右端のバツボタンでリストから消去</li>
<li>編集完了後のURLをブラウザのホームに設定</li>
</ul>
<h2>経緯</h2>
<p>僕はAndroidでChromeを使っています。</p>
<p>Android版Chromeでは、新しいタブを開くとChromeが自動で判断した「よく使うサイト」と「おすすめの記事」が表示されます。<br>
しかしこの「新しいタブ」ページはカスタマイズができず、「よく使うサイト」も自由に設定することができませんでした。</p>
<p>僕はシンプルにブックマークさえ表示できればよかったので、それができるサイトを探しましたが見つかりませんでした。(どこかには絶対あると思うが)</p>
<p>というわけで探すより作ってしまった方が早いと思ったので、今回はシンプルなブックマークリストサイトを作ってみました。</p>
<p>しかし結果として、新しいタブに表示することはできませんでした。<br>
このサイトをChromeのホームページに設定することで新しいタブを開いた際に表示されるページを変更できると思っていました。<br>
しかし、ホームページを変更しても新しいタブページは変更されませんでした(泣)<br>
ホームページのデフォルトはchrome://newtab/でしたが、ホームページ＝新しいタブで表示されるページ というわけではありませんでした。</p>
<p>せっかく作成したので、Chromeのホームボタンから飛べるブックマークリストとして使うことにしました。<br>
Chromeのブックマークは表示するまでに2回タップ操作(メニューボタン→ブックマーク)が必要だったので、それが1回に短縮できて少し便利になりました。</p>
<h2>プログラム</h2>
<p>リポジトリ： https://github.com/izm51/home</p>
<p>シンプルにHTMLと素のJavascriptのみ。<br>
(スタイルはSCSSで書いてます。)</p>
<p>以下作成時のメモを記録します。</p>
<h2>アイコンの取得</h2>
<p>faviconを取得するGoogleのAPIを使用しました。</p>
<pre><code class="language-html"><img src="http://www.google.com/s2/favicons?domain=[URL]">
</code></pre>
<p><code>http://www.google.com/s2/favicons?domain=[URL]</code> の <code>[URL]</code> にアイコンを取得したいサイトのURLを指定するだけで画像を取得できます。</p>
<p>しかし、サイズが16x16で非常に小さいのが難点です。<br>
touch iconなどを取得できる方法はあるんでしょうか。探し中です</p>
<h2>クエリの取得</h2>
<p>今回のサイトでは、ブックマークのリストをクエリにしてURL内に保管しています。<br>
クエリは <code>?[サイト名]=[URL]&[サイト名]=[URL]...</code> という形にしています。</p>
<p>素のJavascriptでのクエリの取得は初だったので、以下を参考にしました。<br>
参考： <a href="https://qiita.com/akinov/items/26a7fc36d7c0045dd2db">JavaScriptでURLクエリを取得する - Qiita</a></p>
<p>参考記事内では</p>
<pre><code class="language-js">var queryArr = queryStr.split('=');
queries[queryArr[0]] = queryArr[1];
</code></pre>
<p>という形でkeyとvalueを分けていましたが、今回のvalueとなるURLには <code>=</code> が含まれる場合もあるので以下のように変更しました。(14,15行目)</p>
<pre><code class="language-js">//クエリの取得
function getUrlQueries() {
var queryStr = window.location.search.slice(1); // 文頭?を除外
queries = {};
// クエリがない場合は空のオブジェクトを返す
if (!queryStr) {
return queries;
}
// クエリ文字列を & で分割して処理
queryStr.split('&').forEach(function(queryStr) {
// = で分割してkey,valueをオブジェクトに格納
var eqIndex = queryStr.indexOf('=')
queries[queryStr.slice(0, eqIndex)] = queryStr.slice(eqIndex+1)
});
return queries;
}
</code></pre>
<h2>リンクの作成(DOM操作)</h2>
<p>クエリから取得したブックマークのリストをもとにリンクを作成します。</p>
<p>今回はひたすらに要素を追加していくだけです。<br>
一気に複数の要素を追加する際は、一度 <code>DocumentFragment</code> に集めた後で追加することでパフォーマンスが向上するようです。</p>
<p>参考： <a href="https://www.webprofessional.jp/dom-manipulation-vanilla-javascript-no-jquery/">もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識 - WPJ</a></p>
<pre><code class="language-html"><body>
<div id="wrap"></div>
</body>
</code></pre>
<pre><code class="language-js">const pages = getUrlQueries()
const wrap = document.getElementById('wrap')
const fragment = document.createDocumentFragment()
for (const k in pages) {
const page = pages[k]
const box = document.createElement('div')
box.setAttribute('class', 'link-box')
const a = document.createElement('a')
a.setAttribute('class', 'link-button')
a.setAttribute('href', page)
const img = document.createElement('img')
img.setAttribute('src', 'http://www.google.com/s2/favicons?domain='+page)
const p = document.createElement('p')
p.textContent = decodeURI(k)
const btn = document.createElement('button')
btn.setAttribute('class', 'remove-button')
btn.setAttribute('onclick', 'removeQuery("'+decodeURI(k)+'")')
btn.textContent = 'X'
a.appendChild(img)
a.appendChild(p)
box.appendChild(a)
box.appendChild(btn)
fragment.appendChild(box)
}
wrap.appendChild(fragment)
</code></pre>
<h2>リストの更新</h2>
<p>ブックマーク追加の場合は、入力欄の内容をクエリに追加し、URLへ移動します。<br>
逆に削除の場合は、バツを押されたキーをクエリから消去し、URLへ移動します。</p>
<p>ブックマークの追加</p>
<pre><code class="language-html"><input type="text" name="title" id="title">
<input type="text" name="url" id="url">
</code></pre>
<pre><code class="language-js">function addQuery() {
const queries = getUrlQueries()
const url = document.getElementById('url').value
let title = document.getElementById('title').value
if (title == "") {
title = url
title = title.replace(/=/g, "")
}
if (title!=""&url!="") {
queries[title] = url
updateParams(queries)
}
}
</code></pre>
<p>ブックマークの削除</p>
<pre><code class="language-html"><div class="link-box">
<a class="link-button" href="https://izm51.com/">
<img src="http://www.google.com/s2/favicons?domain=https://izm51.com/">
<p>イズミログ</p>
</a>
<button class="remove-button" onclick="removeQuery(&quot;イズミログ&quot;)">X</button>
</div>
</code></pre>
<pre><code class="language-js">function removeQuery(q) {
if (window.confirm(q+' のリンクをリストから消去しますか?')) {
const queries = getUrlQueries()
delete queries[encodeURI(q)]
updateParams(queries)
}
}
</code></pre>
<p>ページの更新(URLの更新)<br>
参考： <a href="https://webnooboegaki.com/javascript/parameter">Javascriptでパラメータを取得したり設定したりする | webの覚え書き</a></p>
<pre><code class="language-js">function updateParams(queries) {
let setParam = '?'
for (k in queries) {
setParam = setParam + k + '=' + queries[k] + '&'
}
setParam = setParam.slice(0, -1)
location.search = setParam
}
</code></pre>
<h2>その他参考</h2>
<ul>
<li>VSCodeでSCSSを使用する準備、リセット用CSS<br>
<a href="https://qiita.com/Y_ASAMOTO/items/d5f33ecf5bfbb7f028a5">【爆速】HTML + Sass(SCSS)で簡単にレスポンシブ対応のLPを作ろう！ - Qiita</a></li>
<li>下部のオプションの表示切り替え<br>
<a href="https://q-az.net/hamburger-menu-checkbox-only-css/">checkboxを使ってCSSだけでハンバーガーメニュー | q-Az</a></li>
<li><a href="https://kuzlog.com/2018/01/23/2474/">Android版Chromeのタブ（アドレスバー）の色を変更する方法 | KuzLog</a></li>
</ul>
<h2>まとめ</h2>
<p>今回は、シンプルなブックマークリストサイトを作ってみました！</p>
<p>リンク： https://izm51.github.io/home/<br>
リポジトリ： https://github.com/izm51/home</p>
<p>機能としては単純ですが、自分好みの最小構成で作れたので良かったです。</p>
<p>新しいタブに表示できなかったのは残念ですが、ブックマークが少し便利になりました。<br>
もしよければ誰でもご自由にご利用ください！</p>
<p>ではまた。</p>
]]></content>
<published>2019-09-24T02:38:05.735Z</published>
</entry>
<entry>
<title type="html"><![CDATA[英会話の練習を始めようと思う話 - DMM英会話体験談]]></title>
<id>https://izm51.com/posts/eikaiwa-hajimeru-story/</id>
<link href="https://izm51.com/posts/eikaiwa-hajimeru-story/">
</link>
<updated>2019-08-17T17:02:30.741Z</updated>
<summary type="html"><![CDATA[以前から英語を学ぶことへのモチベーションは持ち続けてきました。勉強やプログラミングで困ったときに英語の情報しかないことは多々あります。そして僕は海外のEDMやドラマ・ゲームも好きなので、そのクリエイターへのインタビューやメイキングストーリーなどを楽しむには英語力が必要なのです。せっかくなら英語でコミュニケーションできるようになりたい！というわけで前々から考えていた英会話学習を本格的に始めることにしました。]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/5fYPOm1nUVGNxOXAr2eBVT/c7dffaea4e598d737f8bda5cba8756ec/eikaiwa-hajimeru.jpg?w=1080"><p>勉強やプログラミングで困ったときに英語の情報しかないことは多々あります。<br>
そして僕は海外のEDMやドラマ・ゲームも好きなので、そのクリエイターへのインタビューやメイキングストーリーなどを楽しむにも英語力が必要です。</p>
<p>これらを理解できるようになるだけでなく、せっかくなら英語でコミュニケーションできるようになりたい！<br>
というわけで前々から考えていた<strong>英会話学習</strong>を本格的に始めることにしました！</p>
<p>[[toc]]</p>
<h2>勉強方法</h2>
<p>勉強方法は、僕の大好きなバンド"PENs+"のボーカル<strong>新井リオさん</strong>が昔から発信している英語勉強法を実践することにします。<br>
<a href="http://arairio.com/english/how-to-study">独学3年間の努力と道のり。日本で英語が話せるようになった僕の勉強法</a></p>
<blockquote>
<p><strong>【勉強法】</strong></p>
<p>①英語日記を書く<br>
時間を決めて書く(15分間)<br>
分からない単語は調べてとりあえず書いてみる</p>
<p>②オンライン英会話で添削してもらう<br>
自然な表現に直してもらう</p>
<p>③添削してもらった日記を暗唱できるまで繰り返し練習する
読み上げ機能を使ってシャドーイングする</p>
</blockquote>
<p>英語日記の書き方はYouTubeチャンネル"<strong>Hapa 英会話</strong>"さんの方法も参考にすることにします。<br>
<a href="https://youtu.be/VySCeL63SeU">着実に英会話力を伸ばす学習法「Journaling」【#106】</a></p>
<p>英語日記は1週間前から書き始めていて、privateなinstagramアカウントに投稿しています。</p>
<p><img src="https://lh3.googleusercontent.com/-dqi8814k1RB4JDFBb8wVYPtkVDhF6CaMfXa10i8iAsxWp5wK1Wdzy_Gx7LrYT3GvaZon-IYDwKZDFIk5jYL4Q6jZd3Rr-BaxcLLTgwlXVR9bz-T6uuC6YacvY-RxMtivBUaDLYiCQ=w300" alt="instagram-english-journaling"></p>
<p>日本語で3行程度の日記を書き、これを基に英文を作成してます。<br>
単純に日記として毎日を振り返ること自体が結構楽しいです。</p>
<h2>継続のために</h2>
<p>これもリオさんの継続のコツを参考にします。</p>
<p><a href="http://arairio.com/english/01">僕が英語勉強を【5年間継続】させた、3つの方法とコツ【勉強が続かない人へ】</a></p>
<h3>①【理由】を明確にしておく</h3>
<blockquote>
<p>―「なぜ英語を勉強する？」</p>
<ul>
<li>秋にある国際学会で英語で発表する必要がある。事前に用意した発表内容のほかに、質疑応答にもしっかりと対応できるようになりたい。(直近の目標)</li>
<li>目標としては、スピーキングでは、事前に想定したシチュエーションでは気軽にコミュニケーションができ、友達を作れるくらいになりたい。そのためには、自分が<strong>言いそうなフレーズ</strong>を一通り覚えている必要がある。</li>
<li>リスニングでは、海外の俳優やエンジニアが英語でインタビューを受けている動画を聞いて理解できるようになりたい。そのためには、リアルタイムに聞いて理解できる<strong>語彙の量</strong>を増やす必要がある。</li>
</ul>
</blockquote>
<h3>②【時間】を決めておく</h3>
<blockquote>
<p><strong>【英語勉強時間】</strong></p>
<ul>
<li>英語日記を書く・教材の予習をする(30分間)</li>
<li>英会話レッスンを受ける(30分間)</li>
<li>授業の復習をする・読み上げ機能を使って日記のシャドーイング(30分間)</li>
</ul>
</blockquote>
<p>理想は6時30分ごろに起床して朝のうちに勉強したいが、今回は<strong>所要時間</strong>のみ決めておくことにする。</p>
<h3>③勉強過程を誰かに【報告】する</h3>
<p>日記をインスタの非公開アカウントに投稿していき、たまに誰かに見せることにします。<br>
ある程度期間が経ったら、ブログに経過を記録します。<br>
ブログは、英語学習の軌跡として残ればいいと思います。</p>
<h2>DMM英会話に初挑戦</h2>
<p>DMM英会話の無料体験で、オンライン英会話に初挑戦しました。<br>
以下、本当にただの日記です。</p>
<p>先生はフィリピンの女性講師の方で予約しました。<br>
先生は色々な特徴で検索することができて、今回は「初心者向け」「講師歴3年以上」に加えて「キッズ向け」も条件に加えて探してみました。(優しそうなので)</p>
<p>予約時の要望には</p>
<blockquote>
<p>This is my first lesson.<br>
I have almost never talked in English.<br>
Please speak slowly.</p>
</blockquote>
<p>と書きました。たぶん伝わりました。</p>
<p>さすがに何も準備しないまま臨んでも大変なことになると思ったので、自己紹介を事前に英語で用意しておきました。</p>
<ul>
<li>基本的な自己紹介(出身・大学で学んでいること)</li>
<li>趣味(音楽鑑賞や作曲・ゲーム・海外ドラマ(表現が分からなかったのでNetflixと言った))</li>
<li>自分が英語を学びたい理由</li>
</ul>
<p>また、ここ一週間で英語日記を書いてるときにどう表現すれば良いか分からなかった部分を書き出しておきました。<br>
そして、予約をしてから始まるまでの40分間くらいで、困ったときに使えそうな英語フレーズをかき集めました。</p>
<ul>
<li>What does **** mean?</li>
<li>Could you say that again?</li>
<li>Could you please speak slowly?</li>
<li>Could you type it in the chat?</li>
</ul>
<p>で、時間になりレッスン開始です。ビデオ通話で25分間のレッスンです。<br>
はじめに、</p>
<blockquote>
<p>How was your day?</p>
</blockquote>
<p>と聞かれたので、とりあえずテンプレ回答の</p>
<blockquote>
<p>It was good!</p>
</blockquote>
<p>と答えました。しかしそれだけでは簡単すぎると思ったので、<br>
<strong>「ここ数日間オンライン英会話を始めようと思っていて、ついに今日始める決心をしたんだよ！」</strong><br>
みたいなことを言おうと思いました。</p>
<p>しかしどう言えばいいのかわからず...🤯<br>
書きのテストなら1分くらい考えて英語にできそうでも、会話だと間に合いませんでした。</p>
<p>よく覚えてないですが、"plan", "several days", "decide"あたりの単語を使って必死に文章っぽい何かを話しました。<br>
困りながらもなんとか伝わったようで、「い、、いいね！」みたいな反応をしてくれてたと思います。(余裕が全くなかったので覚えていない)</p>
<p><strong>開始早々英語力不足に直面</strong>しながらも、気持ちを切り替えて自己紹介をしました。<br>
先生は僕の自己紹介を聞きながらいろいろと質問してくれました。<br>
そして僕が拙い英文で返答するたびに、雰囲気を汲み取って正しい英文を教えてくれました。</p>
<p>文字で見たらすぐにわかるような間違いをいくつもしてしまいました。<br>
言いたいことを表現できそうな単語を見つけるのに必死で、文法を考える余裕が全くなかったです。</p>
<p>自己紹介が一段落したら、英語日記を書いていた時の疑問を質問しました。<br>
しかし、聞き方もイマイチだったのでしっくりくる答えはもらえず、これは早めに諦めました。</p>
<p>最後はまた雑談に戻り、ドラマの話に。<br>
プリズンブレイクの話になり、先生は途中までしかストーリーを知らなかったようで、マイケルは実は生きてたんだよ～とか話してたら結構盛り上がりました。</p>
<p>で、時間が来て終了です。<br>
25分間、長いようで一瞬です。</p>
<p>感想としては、</p>
<ul>
<li><strong>"ゆっくり話してもらえば理解できる"</strong></li>
<li><strong>"自分の言いたいことはうまく言えない"</strong></li>
</ul>
<p>という感じでした。特に先生からの質問ではない発言への返答に困りました。<br>
「ってことは～」や「それなら～」のような表現が分からなかったので、発言の糸口が難しかったです。</p>
<blockquote>
<p>【次回使ってみたいフレーズ】</p>
<ul>
<li>Which means, ~ 「ということは～」</li>
<li>Well then ~ 「それなら～」</li>
</ul>
</blockquote>
<p>でも、先生が優しかったので苦痛の時間にはならなかったです。<br>
フリートークはまだ難しそうなので、次回は教材を使ったレッスンにしてみようと思います。</p>
<p>以上、今後の勉強計画とオンライン英会話初挑戦の感想でした。</p>
<p>3か月後の目標は https://youtu.be/v1em-y-a6Ag</p>
]]></content>
<published>2019-08-17T17:02:30.741Z</published>
</entry>
<entry>
<title type="html"><![CDATA[Nuxt+Contentfulでmarkdown-itを使ったブログで目次を作る方法]]></title>
<id>https://izm51.com/posts/nuxt-contentful-blog-markdown-it-toc/</id>
<link href="https://izm51.com/posts/nuxt-contentful-blog-markdown-it-toc/">
</link>
<updated>2020-01-21T00:00:00.000Z</updated>
<summary type="html"><![CDATA[今回は、記事の内容から自動で目次を生成する設定を紹介します。markdown-itの追加プラグインmarkdown-it-anchor, markdown-it-table-of-contentsで実装しています。]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/21oW5YfrjPJdPuNPdndd0O/ac945563131d579f6ffbf2f3edf39052/toc.jpg?w=1080"><p>Nuxt.jsならJavascriptだけでブログが作れて簡単なのですが、Wordpressならプラグインで導入できるようなことでも自分で実装しなければいけないことがあり少々面倒ですね...！</p>
<p>今回は、記事の内容から自動で目次を生成する設定を紹介します。<br>
markdown-itの追加プラグインで実装しています。<br>
設定すると、↓のような目次を自動で生成することができます。</p>
<p>[[toc]]</p>
<h2>使用するプラグインのインストール</h2>
<p>今回追加するプラグインをインストールします。<br>
<a href="https://www.npmjs.com/package/markdown-it-anchor">markdown-it-anchor - npm</a> : ヘッダー(h2など)までスクロールするアンカーリンクを作成する<br>
<a href="https://www.npmjs.com/package/markdown-it-table-of-contents">markdown-it-table-of-contents - npm</a> : 記事のヘッダー要素から目次を作成する</p>
<pre><code class="language-bash">$ npm install markdown-it-anchor markdown-it-table-of-contents
</code></pre>
<p>インストールしたプラグインを<code>plugins/markdownit.js</code>の中で読み込みます。<br>
<a href="/posts/markdown-it-target-blank-anchor">以前の記事</a>で作成した<code>plugins/markdownit.js</code>内に以下の2行を追加します。<br>
もし<code>plugins/markdownit.js</code>がない場合は作成し、nuxt.comfig.jsのpluginsに<code>~/plugins/markdownit.js</code>を追加します。</p>
<pre><code class="language-js">// plugins/markdownit.js
import MarkdownIt from 'markdown-it'
export default ({ app }, inject) => {
const md = new MarkdownIt({
html: true,
linkify: true,
typography: true,
})
md.use(require("markdown-it-anchor")) // 追加
md.use(require("markdown-it-table-of-contents")) // 追加
// 後略
}
</code></pre>
<p>ここまでで目次の自動生成ができるようになっています。<br>
Contentfulの記事内で目次を表示したい箇所に<code>[[toc]]</code>と記述することで、次のような目次が生成されます。</p>
<p><img src="https://lh3.googleusercontent.com/6kS8jEqwWSRgHyNBQnq6GDHZMVI2pbL7zvcPuE0leijt_kG4yB43v1Lkk8c2NopgvpNNDiYMlpy93ABsfmY1-jHWwPSGg5QsoYXt72T7c9bi4qsgRuMZnL0JfnCFxWmmsZ8GouSwyg=w2400" alt="contentful-markdown-toc"></p>
<p><img src="https://lh3.googleusercontent.com/xVOUhAqUOuPDN35WJt6z6RuFQXJyopOc6P0C5MPdVzRbZvbUZUWmo6GVQoENqVnvXvgOvr_Ejo9-umgt8OXoqiTYVK5GOtYMLIbbMh5uAWnVYnChf_gPoKgnfBQsx_ag0WTJB7qr6Q=w2400" alt="toc-preview"></p>
<p>しかし、これだけでは目次なのか何かのリストなのか分かりにくいので、デザインを変更していきます。</p>
<h2>目次のデザインを変更</h2>
<p>markdown-it-table-of-contentsのプラグインで生成された目次は<code><div class="table-of-contents"></div></code>で囲まれます。<br>
なので、このクラスのスタイルを変更していきます。<br>
今回は以下のように設定してみます。</p>
<p><code>_slug.vue</code></p>
<pre><code class="language-css">/* scss */
.post-content {
padding: 0 0 15px;
position: relative;
z-index: 1;
> * {
position: relative;
z-index: 10; // h2のpadding部分より前面に来るように
}
.table-of-contents {
background: #f3f3f3;
border: 1px solid #ccc;
padding: 5px 10px;
width: fit-content;
ul {
padding-left: 24px;
}
&:before {
content: '目次';
font-weight: bold;
font-size: 16px;
}
}
}
</code></pre>
<p>すると、↓のように表示できます。<br>
CSSのbeforeセレクタで"目次"の文字を追加しています。</p>
<p><img src="https://lh3.googleusercontent.com/Xhid4RA8WHw7FP11gy4S5GqBsrNMDoPweOMRKEDXCYDgpsmaLyPFPfeiC4nkiA1VjSfeMDQPw2c1YD5C7LgqEDdYLhA4hMwWZ4kcxCTveT6oQkqSHGKHHgvHfWnmgUQGTLwOl3QcZw=w2400" alt="toc-design"></p>
<p>目次のリンクをクリックすることで、該当するヘッダー要素までスクロールします。</p>
<p>しかしこのままでは、当ブログのようにブログ上部にメニューなどの固定された要素がある場合、ヘッダー要素が下に潜り込んで隠れてしまいます。 (※2020/1/21追記：現在ヘッダーの固定はスマホ表示のみにしています。)<br>
そこで、marginとpaddingをセットすることで重ならない位置までスクロールさせることが出来ます。</p>
<p>当ブログではh2要素に次のようなスタイルを設定しています。</p>
<pre><code class="language-css">/* scss */
h2 {
font-size: 24px;
margin-top: -64px;
padding: 80px 5px 0;
position: relative;
z-index: 1;
&:before {
content: '';
height: 34px;
width: 100%;
background: #d6d6d6;
position: absolute;
top: 80px;
left: 0;
z-index: -1;
}
}
</code></pre>
<p><img src="https://lh3.googleusercontent.com/B_eZTHpURlhws8c8LHz4hO0Usv9_x1AAsregbchn--oaH69OBhjsyCSOgf8iblc67-rI_hNvnD_keFuuTXpvCwBImkyPUH-MrlWvXWy5Z-Ck6v2kZyvV7KBnGjeSqsSHYtEG7WhnXg=w2400" alt="toc-header-margin"></p>
<p>参考にしていただければと思います！</p>
<p>これで、記事内のヘッダーへジャンプできる目次を自動で生成することが出来るようになりました。<br>
あとは、目次を表示したい記事の箇所に<code>[[toc]]</code>を記述するのみです。</p>
<p>nuxtでブログを作成した際に公開したリポジトリに、これまでのmarkdown系の設定を反映したmarkdownブランチを作成しました。<br>
<a href="https://github.com/izm51/nuxt-blog-test/tree/markdown">Github - izm51/nuxt-blog-test at markdown</a></p>
<p>これでブログ作成時のメモが尽きたので、これからは新しいことを記事にしていきます！！<br>
ではまた！</p>
]]></content>
<published>2019-06-25T21:36:35.316Z</published>
</entry>
<entry>
<title type="html"><![CDATA[Nuxtで作ったブログにコメント欄を設置【Disqus】]]></title>
<id>https://izm51.com/posts/nuxt-blog-install-disqus/</id>
<link href="https://izm51.com/posts/nuxt-blog-install-disqus/">
</link>
<updated>2019-06-16T06:53:36.896Z</updated>
<summary type="html"><![CDATA[個人ブログなのでコメントがつくことはあまりないかもしれませんが、Disqusのコメント欄を設置しました。 この記事では、”vue-disqus”を使ってDisqusを設置する手順を紹介します。]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/48hmnlW0YVGoomvnqxSlA8/0f04795db1b037156bada14648df071f/nuxt-disqus-2.jpg?w=1080"><p>個人ブログなのでコメントがつくことはあまりないかもしれませんが、Disqusのコメント欄を設置しました。<br>
この記事では、"vue-disqus"を使ってDisqusを設置する手順を紹介します。</p>
<h2>Disqusの作成</h2>
<p>まず、<a href="https://disqus.com/">Disqus</a> でアカウントを作り、<a href="https://disqus.com/admin/create/">Create a new siteのページ</a> を開きます。<br>
入力事項を入力し、「Create Site」をクリック。</p>
<p><img src="https://lh3.googleusercontent.com/kB_S9dwUzD8VXIPLr5bRrvapDiIEO_jZpVqjDSm2HQTWNLaL-LgQ0C1GjbujSnUZ1KDtoyM6UHgEFacwqxwjgvQEcXvCAf4cUqI_KRHdYj1S41ejBAcF9pGSKTMMMkA1WDNZOAR7IA=w2400" alt="Disqus-create"></p>
<p>料金プランを選ぶ画面になるので、どれかを選択。(僕の場合はBasic)</p>
<p><img src="https://lh3.googleusercontent.com/rGKzOXs7whcaOyDNGUjd825mUYr604_mmbc3F9LWFl8jat2THMD4Ox-SkGYwz8g3ZnRYi7-j6FMf-qz0n7gayqBJJEAj5Z1fQmgLbXKdunWQZ8F11P2JHuKPHONcD43Gk5-xcIvUew=w2400" alt="Disqus-select-plan"></p>
<p>すると様々なプラットフォームの一覧が表示されますが、一番下の「マニュアルインストール」ボタンをクリック。</p>
<p><img src="https://lh3.googleusercontent.com/3D8b3xxB2HzDRzUS4S1DfoAHHtsKleOzmud72fDeTL-Ugi23FP-EhQgMGKYVtHndzcwu94aSLFkeFc7Vk08J7J3FQNFtcGaGdm2qCzUPxyDVeAoucwEKqdGA6mT5LAbZ1rSAiaGadA=w2400" alt="Disqus-manually"></p>
<p>ここに表示される埋め込みタグは今回は使用しないので読み飛ばして、一番右下の「Configure」をクリック</p>
<p><img src="https://lh3.googleusercontent.com/OTnyEF_Oo5vlaIJTuCb8S6pVXeNxngrNculRoy3SvqIJ2tuuiyagcjfcoYYgxOXPkEOYuRe0rVTO1i1U4c6RoXn9MWwgohsXV4-8464S2hu0ezpYu3KBKirLlMDF-CSm46DyBVVIlA=w2400" alt="Disqus-code"></p>
<p>設定項目の入力欄が表示されるので、入力して「Complete Setup」をクリック</p>
<p><img src="https://lh3.googleusercontent.com/YZ-DIP53wJFJ_p0KmeDAIRrw-Pz7LRcMgnRjCPtGW13ou-SfYqBMnX9i4mp2GPRvHomQzEnhGON4ImA-wtlO095yNMZmcKQEArZs7VBcy66pUWP8RFWhaYzjeBG_XnKRvia4QyiU7g=w2400" alt="Disqus-configure"></p>
<p>これでDisqusの設定は完了です。<br>
しかし、コピーしておきたいものがあるので、「Configure your site's・・・」または上部メニューの「Setting」をクリックして設定画面を開きます</p>
<p><img src="https://lh3.googleusercontent.com/zqzTE52W30KQRa0fUApiif9aCBevO8t2piLyddnicZkNBYG2FEUzy7QYbIRZxpIxIHzfsO1Njwl-ihY60WgQ301FL3_lxQWO_IRJM2UH7IfTpcvd5AbL3SHKbHlb3K-FCgyTyo6Iig=w2400" alt="Disqus-complete"></p>
<p>下の画像で赤く囲った場所に「Shortname」というキーがあるので、コピーしておきます。</p>
<p><img src="https://lh3.googleusercontent.com/FMDQnj8kv0BAZyDAuUMTUTD6nnwf9QmSh7vKt7z3vh7xBVMOBEbryXkhxHKwW5crYQGy1vbMqDRDTWFMXmy3NeKzbnMOUE4DQKpgnBlg2U5p50ZpPVApJ226XW-Pl6ZKJwS-dim3CQ=w2400" alt="Disqus--shortname"></p>
<h2>vue-disqusの設定</h2>
<p>ここからは"vue-disqus"の設定になります。<br>
<a href="https://github.com/ktquez/vue-disqus#install-in-nuxt">ktquez/vue-disqus</a>の設置方法通りとなります。</p>
<p>まず"vue-disqus"をインストール</p>
<pre><code class="language-bash">$ npm install vue-disqus
</code></pre>
<p><code>plugins/disqus.js</code>を作成。</p>
<pre><code class="language-js">import Vue from 'vue'
import VueDisqus from 'vue-disqus'
Vue.use(VueDisqus)
</code></pre>
<p><code>nuxt.config.js</code>のプラグインに追加</p>
<pre><code class="language-js"> plugins: [
'~/plugins/contentful',
'~/plugins/markdownit',
'~/plugins/prism',
'~/plugins/disqus' // 追加
],
</code></pre>
<p>コメント欄を設置したい箇所に↓を追加<br>
<code>pages/posts/_slug.vue</code></p>
<pre><code class="language-html"> <!-- post.fields.titleにContentfulから取得した記事のタイトルが入っている -->
<div class="comments">
<vue-disqus shortname="your_shortname_disqus" :identifier="'post/'+post.fields.title" :url="'http://example.com/path/'+post.fields.title"></vue-disqus>
</div> <!-- shortname等は書き換えてください -->
</code></pre>
<p>ログインが必要なコメント欄なので若干ハードルは高いですが、ないよりはマシだと考えてます！<br>
はたしてコメント欄が使われるときは来るのでしょうか</p>
<p>ではまた。</p>
]]></content>
<published>2019-06-16T06:53:36.896Z</published>
</entry>
<entry>
<title type="html"><![CDATA[markdown-itで外部へのリンクのみtarget="_blank"する方法]]></title>
<id>https://izm51.com/posts/markdown-it-target-blank-anchor/</id>
<link href="https://izm51.com/posts/markdown-it-target-blank-anchor/">
</link>
<updated>2019-06-15T23:59:45.465Z</updated>
<summary type="html"><![CDATA[今回は、"markdown-it"でmarkdown→HTMLの変換をする際に、リンク先が相対パス(同ドメイン内)の場合は同じタブ、リンク先が"http"から始まる場合は新しいタブで開くようにaタグにtarget="_blank"を書き加える設定を紹介します。]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/H3iPJSGrmz1rj8iRRUmJb/7e1c654fefd6e60ddad556852e918f58/markdown-target-blank.jpg?w=1080"><p>4月頃、本屋で「アウトプット」系の本が多く並ぶのを見て意気込んでブログを作りましたが、<br>
大学院生生活が思っていたより忙しく、久々の更新になってしまいました。</p>
<p>ブログ作成時に書き溜めていたメモがもったいないので、思い出しながら記事にしていきます。</p>
<p>今回は、"markdown-it"でmarkdown→HTMLの変換をする際に、</p>
<ul>
<li>リンク先が相対パス(同ドメイン内)の場合は同じタブ</li>
<li>リンク先が"http"から始まる場合は新しいタブ</li>
</ul>
<p>で開くように<code><a></code>タグに<code>target="_blank"</code>を書き加える設定を紹介します。</p>
<h2>plugins/markdownit.jsの設定</h2>
<p>さっそくですがソースコードです。</p>
<p><code>plugins/markdownit.js</code></p>
<pre><code class="language-js">import MarkdownIt from 'markdown-it'
export default ({ app }, inject) => {
const md = new MarkdownIt({ //markdownitのオプション
html: true,
linkify: true,
typography: true,
})
const defaultRender = md.renderer.rules.link_open || function (tokens, idx, options, env, self) {
return self.renderToken(tokens, idx, options)
}
md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
const aIndex = tokens[idx].attrIndex('target')
if (tokens[idx]['attrs'][0][1].match('http')) {
if (aIndex < 0 ) {
tokens[idx].attrPush(['target', '_blank'])
} else {
tokens[idx].attrs[aIndex][1] = '_blank'
}
}
return defaultRender(tokens, idx, options, env, self);
}
inject('md', md)
}
</code></pre>
<p><code>nuxt.config.js</code>のpluginsに、markdownit.jsを追加します。<br>
<code>nuxt.config.js</code>でmarkdownitのオプションを設定していた場合は、重複してしまうので削除します。</p>
<pre><code class="language-js"> plugins: [
'~/plugins/contentful',
'~/plugins/markdownit', // 追加
'~/plugins/prism',
],
modules: [
'@nuxtjs/dotenv',
'@nuxtjs/markdownit'
],
// オプションはplugins/markdownit.js内に移動
// markdownit: {
// injected: true,
// html: true,
// linkify: true,
// typography: true,
// },
</code></pre>
<p>下記参考リンクをもとに、リンク先の判別を追加してNuxtのプラグインとして組み込みました。<br>
参考：<a href="https://blog.odoruinu.net/2016/09/01/overriding-rendering-rule-of-markdown-it/">Markdown-Itで独自レンダリングする方法 – 踊る犬.netブログ (旧)</a><br>
参考：<a href="https://github.com/nuxt-community/modules/tree/master/packages/markdownit">nuxt-community/modules</a></p>
<p>僕はブログなどの記事で別サイトへのリンクが同じタブのまま移動してしまうのがあまり好みではないので、<br>
細かな設定ではありますがカスタマイズしてみました。</p>
<p>ではまた。</p>
]]></content>
<published>2019-06-15T23:59:45.465Z</published>
</entry>
<entry>
<title type="html"><![CDATA[お名前.comのドメインが「このサイトにアクセスできません」になったときの対処法]]></title>
<id>https://izm51.com/posts/onamae-domain-mitukarimasen/</id>
<link href="https://izm51.com/posts/onamae-domain-mitukarimasen/">
</link>
<updated>2019-04-26T16:11:47.662Z</updated>
<summary type="html"><![CDATA[名前.comに新規登録してから数週間目で突然「このサイトにアクセスできません」と表示されてしまった時の対処法を紹介。]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/62JMnMjqI1hkiA3KpDAqZz/eb607d616560143e7d83752a76ed0196/onamae-domain-mitukarimasen.jpg?w=1080"><p>ブログをはじめようと思い立ち、ドメインを取得してから約2週間がたちました。<br>
ところが今日、突然このブログにアクセスできなくなってしまいました。</p>
<p><img src="https://lh3.googleusercontent.com/Ftzx6w6f5ZB1Gh32M022FjWVVVIGw6kB8SNtPp61ebJ-RLS07LkNYMWqJT6pEpI88R6-RcXgifNBrUi9zjdAPDbUawzWYjQ65UpQhKyqKTSehX2VEnj_MeLKuTUmzBEhK-9h1DLltQ=w2400" alt="onamae-domain-access-dekimasen"></p>
<p>何も設定をいじっていないはずなのにと思いながら、<br>
お名前.comとNetlifyのDNS設定を全部消しては埋めなおす作業を2回繰り返しても、何も変化なし。</p>
<p>しかし、原因は他の箇所でした！</p>
<p><img src="https://lh3.googleusercontent.com/e6k4eKKqF5ao6NBLac4oFCp-jmXoEqb4-Q-HUuvJSPlqXQ-XCjPkYU06vW7rA9lgPyZkDWfVlc4Pkzwgl65GcKRpoleq5mfCeLhZ4aanrDrVnuX7EGyxwKYVScxOw7z6aUFBtpLifQ=w2400" alt="onamae-domain-seigen-tuuti"></p>
<p>メールアドレスの有効性を確認していなかったのが原因で、ドメインが一時的に停止されてました。<br>
メール内に記載されたURLリンクからメールアドレスを有効化すると、5分ほどでウェブサイトにアクセスできるようになりました。</p>
<p>お名前.comに新規登録してから2週間くらいメールを有効化していないと、ドメインが制限されるようです。<br>
登録してからドメインの割引案内メールばかりたくさん来ていたのでチェックするのをやめてしまってました。</p>
<p>もし登録してから2週間ほどで同様の症状に困っている方は、メールを確認してみましょう。</p>
]]></content>
<published>2019-04-26T16:11:47.662Z</published>
</entry>
<entry>
<title type="html"><![CDATA[markdown-it + Prism.jsでシンタックスハイライト]]></title>
<id>https://izm51.com/posts/markdown-it-prismjs/</id>
<link href="https://izm51.com/posts/markdown-it-prismjs/">
</link>
<updated>2019-04-26T05:42:06.491Z</updated>
<summary type="html"><![CDATA[当ブログではContentfulから取得した記事本文のパースに”markdown-it”を使用しています。“markdown-it”だけではコードブロックが見づらかったため、Prism.jsを導入してみました！]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/6gqn1emhEQvEVJ4JHKhee9/bdf76260c6626e0fe0925feaaecd4341/markdownit-prism.jpg?w=1080"><p><img src="https://lh3.googleusercontent.com/wm_-JL47RSJrc1M5O_jG5cYXHPiOhx2r8NelnZ4PIh4Q2b-2bJCAolyBfcalBC8tFtcnwZmLDhx9Hh0dsOVN1MTgOBcnj5ob1O1exTzuNCM7cpbTnxoukswbt_YmHM5TOlwFfg2CJw=w2400" alt="prism-0"></p>
<p><a href="/posts/nuxt-contentful-netlify-blog-making-1">Nuxt + Contentful + Netlifyでブログ作成</a>の関連記事です。</p>
<p>当ブログでは、記事はContentful上にてMarkdown記法で作成、保存しています。<br>
そして、Markdown記法からHTMLへの変換には"markdown-it"を使用しています。</p>
<p>しかし、"markdown-it"だけではソースコード部分が見づらかったため、"Prism.js"でシンタックスハイライトする設定をしました。<br>
Nuxt.js + markdown-itでPrism.jsを使用している記事があまりなかったので、簡単にまとめてみました。</p>
<h2>Prism.jsの導入方法</h2>
<p><a href="https://github.com/nuxt-community/modules/tree/master/packages/markdownit">@nuxtjs/markdownit</a>はインストール済みとして、<a href="https://prismjs.com/">Prism.js</a>をインストール</p>
<pre><code class="language-bash">$ npm install prismjs
</code></pre>
<p>pluginsフォルダに<code>prism.js</code>を作成します。</p>
<pre><code class="language-js">import Prism from 'prismjs'
import 'prismjs/themes/prism-okaidia.css'
export default Prism
</code></pre>
<p>2行目でimportしているcssファイルを変更すればスタイルを変更できます。<br>
テーマは<code>/node_modules/prismjs/themes/</code>に入っています。<br>
スタイルの比較は<a href="https://prismjs.com/">Prism.js</a>を参照してください。</p>
<p><code>nuxt.config.js</code>のプラグインに<code>~/plugins/prism.js</code>を追加</p>
<pre><code class="language-js"> plugins: [
'~/plugins/contentful',
'~/plugins/prism',
],
</code></pre>
<p>Prism.jsを有効にするページのmounttdに<code>Prism.highlightAll()</code>を追加。</p>
<p><code>/pages/posts/_slug.vue</code></p>
<pre><code class="language-js"> mounted() {
Prism.highlightAll()
}
</code></pre>
<p>ここまでの設定で、ソースコードのシンタックスハイライトを有効にできました。<br>
Contentful上で、以下のようにバッククォート(<code>`</code>)3つで囲むことでコードブロックにできます。<br>
バッククォートの後に言語を指定することができます。</p>
<pre class="language-md">
<code>```js
export default {
mounted() {
console.log("mounted!")
}
}
```</code>
</pre>
<p>上のコードが↓のように表示されます。</p>
<p><img src="https://lh3.googleusercontent.com/Fvqg4iJx9zD9YHVw9cE0qLZFqGglInlydvwKhuleQK6Nf1qmm33SIAIPYb2rhm3Azv-0RbMNSO4CeQ5YAvkcvLrAR9etG_fzzSBch5zcOlPycSvQmwndkudjsdHI-Bb7K9_ugT0wwg=w2400" alt="prismjs-1"></p>
<h2>Line Numbersで行番号を表示</h2>
<p>より見やすさを向上するため、行番号を表示するプラグインを有効にします。
プラグインは<code>/node_modules/prismjs/plugins/</code>に入っています。</p>
<p>先ほど作成した<code>/plugins/prism.js</code>にline-numbersのプラグインを追加</p>
<pre><code class="language-js">import Prism from 'prismjs'
import 'prismjs/themes/prism-okaidia.css'
import 'prismjs/plugins/line-numbers/prism-line-numbers.min.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
export default Prism
</code></pre>
<p>そして、<code><pre></code>またはその親の要素に<code>class="line-numbers"</code>を設定すると、行番号が表示されるようになります。
Contentfulから取得した記事本文を表示する要素のクラスにline-numbersを追加します。</p>
<p><code>/pages/posts/_slug.vue</code></p>
<pre><code class="language-html"> <div class="post-content line-numbers" v-html="$md.render(post.fields.content)"></div>
</code></pre>
<p>すると行番号が表示されます。</p>
<p><img src="https://lh3.googleusercontent.com/bi4u-8IaOLUgzEGUnJ9cbQnZ9wShH3EquSVnIlWpEVz4Mi8OnGpeNkiaBb0y3WSXTVnuQ_-gaq7kmwaJ8l8_IJGy62vVmt4TU2NI6_M5vRfBBVp8F18ppJeIMnzkTmC79EE7B7l1MA=w2400" alt="prism-2"></p>
<p>以上で設定完了になります。<br>
markdown-itだけの状態と比べるとかなり見やすくなりました。</p>
]]></content>
<published>2019-04-26T05:42:06.491Z</published>
</entry>
<entry>
<title type="html"><![CDATA[Nuxtで作ったブログにオススメの便利な設定たち（備忘録）]]></title>
<id>https://izm51.com/posts/nuxt-blog-first-settings/</id>
<link href="https://izm51.com/posts/nuxt-blog-first-settings/">
</link>
<updated>2020-04-03T00:00:00.000Z</updated>
<summary type="html"><![CDATA[Nuxtでのブログ作成において設定しておいた方がよさそうな項目をリストアップしてみました。head・metaタグの設定、]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/11OCSYrFTlxnc3H1km2XYo/2c08164d982274c887e0ad38eabcd2b1/nuxt-blog-first-setting.jpg?w=1080"><p>前回までの記事で、<a href="/posts/nuxt-contentful-netlify-blog-making-1">Nuxt + Contentful + Netlifyでブログ作成</a>ができました。<br>
そこで、Nuxtでのブログ作成において設定しておいた方がよさそうな項目をリストアップしてみました。<br>
手順についても簡単に紹介しています。<br>
初心者なりの備忘録なので、必要な項目を見つけ次第、随時追加していきます。</p>
<p>[[toc]]</p>
<h2>headとmetaタグの設定</h2>
<p>head、metaタグによってブログのタイトルや説明文を設定します。<br>
Nuxtでは<code>nuxt.config.js</code>で全ページ共通の設定に加え、各ページごとにタグの設定ができます。<br>
注意点として、modeが<strong>universal</strong>でない(spaになっている)と、ページごとの設定が反映されません。<br>
設定方法：<a href="https://ja.nuxtjs.org/api/configuration-head">API: head プロパティ - Nuxt.js</a><br>
設定の例：<a href="https://ja.nuxtjs.org/examples/seo-html-head/#codefund_ad">SEO HTML Head - Nuxt.js</a></p>
<p><strong>設定例</strong><br>
<code>nuxt.config.js</code>（全体で共通の設定）</p>
<pre><code class="language-js"> head: {
// デフォルトとなるタイトル
title: 'イズミログ',
// タイトルの書式 (%sの中にtitleの文字列が入る)
titleTemplate: '%s - Izm Log',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'ブログの説明文' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/static/izm-icon.jpg' },
{ rel: 'shortcut icon', size: '196x196', href: '/static/izm-icon.jpg' },
{ rel: 'apple-touch-icon', href: '/static/izm-icon.png' }
]
}
</code></pre>
<p><code>pages/posts/_slug.vue</code>（各記事の設定）</p>
<pre><code class="language-js"> //this.postにContentfulから取得した記事内容が入っている
head() {
return {
title: this.post.fields.title,
meta: [
{ hid: 'description', name: 'description', content: this.post.fields.description }
}
}
</code></pre>
<p>記事ごとにheadの内容を上書きして設定することができます。<br>
僕はContentfulのFieldsにDescriptionという説明文の入力欄を追加して、記事毎にこれを設定するようにしています。</p>
<p><img src="https://lh3.googleusercontent.com/t9Bpa3buJGe67Pg8lhYqCNReg6caQIq17IhCd_S8xRn9Z7Gff_TBW_01axMfkU6G5_lDNdC9lPdIB81mxnKmaWQNbhbwSal6TU9jm6X0A2IvKJmcG4EFSAbgMk4x5n31JUO03d-7NA=w2400" alt="nuxt-blog-seo-description-1"></p>
<h2>SNS用 OGPタグとTwitterカードの設定</h2>
<p>FacebookやTwitterでシェアされた時に表示される文章や画像を設定します。<br>
上の項目で記述したheadの設定に次のように追記していきます。</p>
<p><code>pages/posts/_slug.vue</code>（各記事の設定）</p>
<pre><code class="language-js"> //this.postにContentfulから取得した記事内容が入っている
head() {
return {
title: this.post.fields.title,
meta: [
{ hid: 'description', name: 'description', content: this.post.fields.description },
{ hid: 'og:site_name', property: 'og:site_name', content: this.post.fields.title + ' - Izm Log' },
{ hid: 'og:type', property: 'og:type', content: 'website' },
{ hid: 'og:url', property: 'og:url', content: 'https://izm51.com/posts/' + this.post.fields.slug },
{ hid: 'og:title', property: 'og:title', content: this.post.fields.title },
{ hid: 'og:description', property: 'og:description', content: this.post.fields.description },
{ hid: 'og:image', property: 'og:image', content: "https:"+this.post.fields.image.fields.file.url },
{ hid: 'twitter:card', name: 'twitter:card', content: "summary" },
{ hid: 'twitter:site', name: 'twitter:site', content: "@immzm51"}
]
}
},
</code></pre>
<p>OGPやTwitter Cardの詳細についてはこちらのサイトが参考になります。<br>
リンク：<a href="https://saruwakakun.com/html-css/wordpress/ogp">【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法</a></p>
<h2>サイトマップの生成</h2>
<p>サイトマップを設置すると検索エンジンにサイトの構成を伝えることができ、検索にのりやすくなります。<br>
<a href="https://www.npmjs.com/package/@nuxtjs/sitemap">@nuxtjs/sitemap</a>を使用すれば、ビルド時に自動でサイトマップを生成できます。</p>
<pre><code class="language-bash">$ npm install @nuxtjs/sitemap
</code></pre>
<p><code>nuxt.config.js</code>のモジュールに@nuxtjs/sitemapを追加します。<br>
また、sitemapのセクションも追加し、sitemap生成の設定を記述します。</p>
<p>静的ページは自動でサイトマップに追加されます。<br>
しかし、動的生成されるページのパスは<code>routes</code>に自分で設定する必要があります。</p>
<p>このブログの場合は個別記事ページが動的ページです。<br>
<code>generate</code>の<code>routes</code>の内容を少しアレンジして記述しました。<br>
その他の設定項目は"@nuxtjs/sitemap"のReadmeを参照してください。</p>
<pre><code class="language-js"> modules: [
'@nuxtjs/sitemap',
],
sitemap: {
hostname: 'https://example.com',
routes() {
return client
.getEntries({ content_type: 'post' })
.then(entries => {
return entries.items.map(entry => {
return "/posts/" + entry.fields.slug
})
})
}
},
</code></pre>
<h2>Googleアナリティクスの設置</h2>
<p>ブログの閲覧数などを解析するために、Googleアナリティクスを設置します。<br>
<a href="https://www.npmjs.com/package/@nuxtjs/google-analytics">@nuxtjs/google-analytics</a>を使用すれば設定は簡単です。</p>
<pre><code class="language-bash">$ npm install @nuxtjs/google-analytics
</code></pre>
<p>'nuxt.config.js'のモジュールに'@nuxtjs/google-analytics'とアナリティクスのトラッキングIDを追加</p>
<pre><code class="language-js"> modules: [
['@nuxtjs/google-analytics', {
id: 'UA-XXXXXXXXX-X'
}]
]
</code></pre>
<p>詳細：<a href="https://ja.nuxtjs.org/faq/google-analytics/">Google アナリティクスの統合 - Nuxt.js</a></p>
<h2>Google Search Consoleの設定</h2>
<p>Googleの検索結果を分析するため、Google Search Consoleの設定をしておきます。<br>
TXTレコードの設定方法など、少しややこしい箇所もあります。</p>
<p>まず、<a href="https://search.google.com/u/1/search-console/welcome">Google Search Console</a>の入力欄にドメインを入力します。</p>
<p><img src="https://lh3.googleusercontent.com/VOGNuU5GSpebFHX_qot9g20m6QqpJDu2XA-yTBPCfFLZuS-9C7PbUpTq65VHdEoE0aP8f2AmBKiVsBx60sELhPUmhjofvePECDzw5ZCVcvGaKspC0neMPa_pEEvKeSRznFOSdjt-Ig=w2400" alt="google-search-console-0"></p>
<p>「続行」ボタンを押すと、ドメインの所有者確認画面が表示されます。<br>
ここで「コピー」ボタンを押し、TXTレコードをコピーします。</p>
<p>当ブログのようにNetlifyのネームサーバーを使用している場合は、NetlifyのDNSパネルを開きます。<br>
Netlifyの管理ページで「Domain settings」をクリック</p>
<p><img src="https://lh3.googleusercontent.com/ZnpXhrsgMoq84W1SapdYNHZKaU8NbcwiCLvkQ9zb_qnskdAm02kI22voqOOFrUh8DXEzWm8uT4zSU5pT2ttX1Bl547PKvtKF-5BGZSAZpw-VbA7BvjPsoPqE1H4VP1kg1FdcyYML3g=w2400" alt="Netlify-domain-setting"></p>
<p>⇓「・・・」を押し、「Go to DNS panel」をクリック</p>
<p><img src="https://lh3.googleusercontent.com/MTyqK0jj0Gd2QvVYk6RIRCHXM3Tw_jP4F8Id1-Ixx_hab2I4zEzbYksSYiHvfFLGvuK_AbjymWtsfQvztlwTWrwrNnZr16HvzKvsD-PstXawQwTq7Dsld4ejg9wjCf8XfTJXrZCAHA=w2400" alt="go-to-DNS-panel"></p>
<p>⇓「Add new record」をクリック</p>
<p><img src="https://lh3.googleusercontent.com/krYTZoLfJTeCreWMFzfXdCKQqbkS9eespfTnAlrGu-aC20KCqShcEez-axVr_OkAjA-x7brzP0ZPlD_6IAWpZWHROhylXciFmxxhCmJy5ALF9GbDey8uOzY-jDj7l2L455ssOiATBw=w2400" alt="dns-settings"></p>
<p>⇓「Record type」を「TXT」、「Name」を「＠」にし、「Value」にGoogle Search Consoleでコピーした「TXTレコード」を張り付ける。<br>
そして「Save」をクリック</p>
<p><img src="https://lh3.googleusercontent.com/cRi4wl0iSVEzaitDT2NPDcwasH2-96BYQu_xP_L_u1C56s9BPuxBlWSMVfOTsmaRnCTQxaFwukso0zzDlOqShuAmWdk9DTNn-bWJZU3hWSHqqJpziL_D2a1bxtINS0J8HejVqCvOXg=w2400" alt=""></p>
<p>DNSの設定が反映されるまで数分待ち、Google Search Consoleの確認ボタンを押すと、設定完了の画面が表示されます。</p>
<p><img src="https://lh3.googleusercontent.com/N7oJWooXO1EJdf2nTUiG0zGG49-S2b3a4mlCZajuMZLjxLFDBCgZMHpokMnkjV7yesHt0wi6_wbvXF0N6uPijmzwaRrXcRaLLeuHL3pSRaqu8Y76SJtdM5MgvQE3NtStcn2KA-T3xA=w2400" alt="google-search-console-2"></p>
<h2>コードのシンタックスハイライト</h2>
<p><img src="https://lh3.googleusercontent.com/wm_-JL47RSJrc1M5O_jG5cYXHPiOhx2r8NelnZ4PIh4Q2b-2bJCAolyBfcalBC8tFtcnwZmLDhx9Hh0dsOVN1MTgOBcnj5ob1O1exTzuNCM7cpbTnxoukswbt_YmHM5TOlwFfg2CJw=w2400" alt="prism-0"></p>
<p>プログラミング系のブログの場合、記事内にコードが多く含まれると思います。<br>
そのプログラミングコードを見やすくするために、シンタックスハイライトを設定します。</p>
<p>下記記事に手順をまとめました。<br>
<a href="/posts/markdown-it-prismjs">markdown-it + Prism.jsでシンタックスハイライト - Izm Log</a></p>
<h2>ブログの画像サーバとしてGoogleフォトを使う</h2>
<blockquote>
<p>(2020/4/3 追記)<br>
<strong>下記の手順を楽にするツールを作成しました！</strong><br>
<a href="/posts/google-photos-embed-link-generator">Googleフォトのアルバムから埋め込みコードを生成するツールを作った【ブログに便利】 - Izm Log</a></p>
</blockquote>
<p>ContentfulではFreeタイプの場合、保存できる記事や画像などの合計個数が5000個までです。<br>
(記事投稿時点)<br>
5000記事にはしばらく到達しないと思いますが、<br>
画像も合わせて5000個までとなるとすぐにオーバーしてしまいそうです。</p>
<p>そこで、記事はContentful、画像はGooglePhotoに保管することにしてみました。<br>
(注：GooglePhotoの仕様変更などにより画像が表示できなくなる可能性アリ)</p>
<p>まず、記事に使用したい画像をGooglePhotoで開き、右上にある「共有ボタン」をクリック</p>
<p><img src="https://lh3.googleusercontent.com/uf1-B1DuzKBFq8BBDMedMccxCykKpKF2-ryytRW7yhTgYIjQe0h2Txzwmen7R6OPga4gMW1oFO0fO7hP-sud2KV2xIcVmu-j93Z2QfwnwfLIN0wp6ZGmwcR5SKXX8pE7P2n-Fvr60w=w700" alt="GooglePhoto-Share"></p>
<p>「リンクを作成」をクリックし、作成されたURLをコピー</p>
<p><img src="https://lh3.googleusercontent.com/tWwbCKzx177PuOdh5Vi2IrnD9lg_1eNWrbSxGXjiKFKLdfKwOqjFwulQAmB4s1M1GYaTMOPKpwfPUX_1WQVPHFGSPCipLir3Aom1LELKSzsAVkkPgZkPOPfYx_85mRo15psez4ztmg" alt="GooglePhoto-Link"></p>
<p>コピーしたURLを下記リンクの「Paste Google Photos link here..」と書いてある入力欄に張り付け、「GENERATE CODE」をクリック<br>
https://ctrlq.org/google/photos/</p>
<p><img src="https://lh3.googleusercontent.com/IekP2GXoeE8wu1Yoi7eA05Yb4Y63321j1EnkQtHZ7qCSo04zD8SZo9uYmmh8sd3DhxY1EW-Ee4-5o_JIVRZKSp_2r0QgdY0zcx_utr8OoE-3LcVrukKHS41jtmC2cehcpolRIIPNig=w2400" alt="generate-code-from-GooglePhoto"></p>
<p>少し待つと画像のURLリンクが生成されます。<br>
「Direct Link (URL)」をコピー</p>
<p><img src="https://lh3.googleusercontent.com/ayA-OhW6nWL10VxmmFb9QFsOuVUOMzHNez6s-ZNPuuJx-Q020m7v2id1rj4xUATpx7zgjsa5IDX-eEuvkikGQPnWRVbA6gB-1vPa8cAnk7hZ7L4IiRPphvzz9c3xcYCyWI8ntL0seA=w2400" alt="Copy-url"></p>
<p>Contentfulの記事作成画面を開き、画像のURLをMarkdown記法で貼り付けます。<br>
画像URL末尾の<code>=w2400</code>は、画像表示時の最大幅になるので、必要に応じて調整や消去します。</p>
<pre><code class="language-md">
<!--  -->
</code></pre>
<p>以上、少し手間がかかってしまいますがGooglePhotoの画像を記事に使用する手順です。<br>
リンクの生成に外部サービスを使用してしまっているので、より簡単な方法が見つかればアップデートします。<br>
当ブログの画像が表示されなくなっていたら、この方法は使えなくなっている可能性が高いです。</p>
<h2>コメント欄を設置【Disqus】</h2>
<p><img src="https://lh3.googleusercontent.com/5cONwpS1zra1WSjMdNVB7yiakbT5_2KaLZiyoYReThGHUmtmiBfzYnb45Kfw0tVLLxLFftmGfSC9JxLw8OoAjoXE8QxbrFj_VVLevvPmk43lgueSITbQ9y3gvdHq1FAoi_f0mIokqA=w2400" alt="Disqus-image"></p>
<p>"Disqus"というコメント欄を簡単に設置できるサービスを見つけたので、設置しました。</p>
<p>設置手順は下記記事にまとめました。<br>
<a href="/posts/nuxt-blog-install-disqus">Nuxtで作ったブログにコメント欄を設置する方法【Disqus】</a></p>
<h2>まとめ</h2>
<p>このブログの作成時に設定したり、カスタマイズした項目集の備忘録でした。<br>
必要そうな項目を見つけ次第、随時記事にしていきます！</p>
<p>ではまた。</p>
]]></content>
<published>2019-04-21T00:44:07.400Z</published>
</entry>
<entry>
<title type="html"><![CDATA[Nuxt + Contentful + Netlifyでブログ作成全手順<後編>]]></title>
<id>https://izm51.com/posts/nuxt-contentful-netlify-blog-making-2/</id>
<link href="https://izm51.com/posts/nuxt-contentful-netlify-blog-making-2/">
</link>
<updated>2019-04-11T22:02:50.704Z</updated>
<summary type="html"><![CDATA[Nuxt.jsを使用してブログ作成の後編です！<前編>ではNuxtプロジェクトの作成からContentfulのセットアップまでの手順がまとめてあります。<後編>では記事の作成、Nuxtでの表示、Netlifyへのデプロイまでの手順をまとめていきます！]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/xp6QBXkh9p73t84LKYyii/82d3a6b7bbba6cfade9b6f9d8d0b30f4/nuxt-cont-netl-blog.jpg?w=1080"><p>Nuxt.jsを使用してブログ作成の後編です！</p>
<p><a href="/posts/nuxt-contentful-netlify-blog-making-1"><前編></a>ではNuxtプロジェクトの作成からContentfulのセットアップまでの手順がまとめてあります。<br>
<後編>では記事の作成、Nuxtでの表示、Netlifyへのデプロイまでの手順をまとめていきます！</p>
<p>[[toc]]</p>
<h2>記事の作成</h2>
<p>上部のメニューから「Content」をクリックし、</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/4adrB3z8I2Q1x1gGl4JlEK/e4c42311c4884dada36b11a74752f8c9/contentful-content-button.jpg" alt="contentful-content-button"></p>
<p>「Add Post」をクリック</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/mR7Ei9oAgmXPEbbShiCFF/fb9638be2a3dcbd0cb73e8f75d4592fe/contentful-add-post-button.jpg" alt="contentful-add-post-button"></p>
<p>記事の作成フォームが表示されるので、記事の内容を記入して「Publish」</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/Kd6ymTqYbzti15rEPyYsu/78f49d4d1c749e5610cd28fd2b779e02/contentful-first-post.jpg" alt="contentful-first-post"></p>
<p>すると、記事が作成できます。<br>
同じ要領で2つ目の記事も作成しました。</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/1iiWtlvGXkKBwU4EIePo4Q/6dfe36267599ee633f9a09b0e8c6c85f/contentful-posts.jpg" alt="contentful-posts"></p>
<h2>Nuxtでの記事の表示</h2>
<p>まず、トップページに記事の一覧を表示してみます。<br>
<code>pages/index.vue</code>を下記のように書き換えます。</p>
<pre><code class="language-html"><template>
<div class="posts">
<div v-for="(post, index) in posts" :key="index" class="post">
{{ post.fields.title }}
</div>
</div>
</template>
<script>
import client from '~/plugins/contentful'
export default {
asyncData({ params }) {
return client
.getEntries({
content_type: 'post',
order: '-sys.createdAt',
})
.then(entries => {
return { posts: entries.items }
})
.catch(e => console.log(e))
},
}
</script>
</code></pre>
<p>そして、下記のコマンドを実行します。</p>
<pre><code class="language-bash">$ npm run dev
</code></pre>
<p>すると表示される「http://localhost:3000」のようなURLをブラウザで開くと</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/19VkELuIPYjBPJygJoMdJv/9656a2181e73e6cab82714fa5d6d0d46/nuxt-contentful-posts.jpg" alt="nuxt-contentful-posts"></p>
<p>先ほど作成した記事のタイトル一覧が表示できました。<br>
<code>pages/index.vue</code>を下記のように書き換え、少し見た目を整理してみます。</p>
<pre><code class="language-html"><template>
<section class="latest-posts">
<div class="posts">
<nuxt-link :to="'posts/'+post.fields.slug" class="post" v-for="(post, index) in posts" :key="index">
<div class="thumb">
<img :src="post.fields.image.fields.file.url">
</div>
<div class="post-text">
<p>{{ formatDate(post.sys.createdAt) }}</p>
<h2>{{ post.fields.title }}</h2>
</div>
</nuxt-link>
</div>
</section>
</template>
<script>
import client from '~/plugins/contentful'
export default {
asyncData({ params }) {
return client
.getEntries({
content_type: 'post',
order: '-sys.createdAt',
})
.then(entries => {
return { posts: entries.items }
})
.catch(e => console.log(e))
},
head: {
title: '記事一覧',
},
methods: {
formatDate(iso) {
const date = new Date(iso)
const yyyy = new String(date.getFullYear())
const mm = new String(date.getMonth() + 1).padStart(2, "0")
const dd = new String(date.getDate()).padStart(2, "0")
return `${yyyy}.${mm}.${dd}`
}
}
}
</script>
<style lang="scss">
section.latest-posts {
padding: 10px;
.posts {
max-width: 900px;
margin: 0 auto;
padding: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
background: #ddd;
a.post {
width: calc(100% / 2 - 20px);
@media (min-width: (768px)) {
width: calc(100% / 3 - 20px);
}
margin: 10px;
background: #fff;
text-decoration: none;
color: #111;
.thumb {
width: 100%;
padding-bottom: 75%;
position: relative;
overflow: hidden;
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
}
}
.post-text {
padding: 5px 10px 10px;
h2 {
width: fit-content;
font-size: 20px;
}
}
}
}
}
</style>
</code></pre>
<p>すると下図のように表示できます。</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/2vcSzQPPesIWg4Rk74JwtD/d34f87110e2acd490daab98ad30b7b28/nuxt-contentful-posts-arranged.jpg" alt="nuxt-contentful-posts-arranged"></p>
<p>これで記事の一覧ページは一旦完成とし、記事の個別ページを作成します。</p>
<p>pagesフォルダ内にpostsフォルダを作成します。<br>
そして、postsフォルダ内に<code>_slug.vue</code>ファイルを作成します。</p>
<pre><code class="language-html"><template>
<article class="article">
<div class="single">
<h1 class="post-title">{{ post.fields.title }}</h1>
<p class="post-created-at">{{ formatDate(post.sys.createdAt) }}</p>
<div class="post-content" v-html="$md.render(post.fields.content)"></div>
</div>
</article>
</template>
<script>
import client from '~/plugins/contentful'
export default {
asyncData({ params, error, payload }) {
if (payload) return { post: payload }
return client
.getEntries({
content_type: 'post',
'fields.slug': params.slug,
})
.then(entries => {
return { post: entries.items[0] }
})
.catch(e => console.log(e))
},
head() {
return {
title: this.post.fields.title,
}
},
mounted() {
console.log(this.post)
},
methods: {
formatDate(iso) {
const date = new Date(iso)
const yyyy = new String(date.getFullYear())
const mm = new String(date.getMonth() + 1).padStart(2, "0")
const dd = new String(date.getDate()).padStart(2, "0")
return `${yyyy}.${mm}.${dd}`
}
}
}
</script>
<style lang="scss">
article.article {
padding: 10px;
.single {
max-width: 900px;
margin: 0 auto;
padding: 10px;
color: #222;
border: 2px solid #444;
border-radius: 10px;
h1, h2, h3 {
margin: 16px 0;
}
h1.post-title {
font-size: 32px;
text-decoration: underline;
}
.post-content {
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
background: #ccc
}
p {
margin: 16px 0;
font-size: 16px;
}
img {
max-width: 100%;
border: 1px solid #000;
}
}
}
}
</style>
</code></pre>
<p>そして、記事の一覧ページから個別記事のページへ移動すると</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/1JVzZKiEeqjkA0XVsTSwTh/9d9d9b8fde2f10051e48251fd01e3d32/nuxt-contentful-post-single.jpg" alt="nuxt-contentful-post-single"></p>
<p>このように、記事の内容を取得して表示ができているはずです。</p>
<p>markdownitを使用して、記事のマークダウン記法をHTMLタグに変換して表示しています。<br>
細かいスタイルについては<code>nuxt.config.js</code>内のmarkdownitの設定項目や、CSSによるスタイリングが必要となります。</p>
<h2>Netlifyへのデプロイ</h2>
<p>Netlifyへデプロイ、の前に、今まで作成したnuxtプロジェクトをGitにpushします。<br>
新しくリポジトリを作成し、</p>
<pre><code class="language-bash">$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin <gitのURL>
$ git push -u origin master
</code></pre>
<p>次に、<a href="https://www.netlify.com/">Netlifyのサイト</a>で「Get started for free」ボタンから会員登録、ログインします。<br>
(画面は2019/4/4のものになります)</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/3a8HLO62do7s4YPJWSjSlZ/b2be36278239798fe2b77a557603a885/netlify-get-started.jpg" alt="netlify-get-started"></p>
<p>右の方にある「New site from Git」ボタンをクリック</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/3zdnaa2MEhyzteekXDwXlp/d6cabdfde01004155d40510fc85be5c9/netlify-new-site-from-git.jpg" alt="netlify-new-site-from-git"></p>
<p>Gitのproviderを選択</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/55nQFNLXACfBAdFrJvcdeR/0cc040aabd08c87b0ed9ef55d67cfcc2/netlify-github.jpg" alt="netlify-github"></p>
<p>インストールするリポジトリを選択</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/4xLxgLjjReSrITwlNxZ9oK/a31171a65f7fb9458e10f2a208a24968/install-netlify.jpg" alt="install-netlify"></p>
<p>使用するリポジトリを選択し、</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/44IK2BiDevP5BjoqEaAD1t/f319cb2b228b798cdbfafccfecc4928a/netlify-pick-repositry.jpg" alt="netlify-pick-repositry"></p>
<p>「Build command」に<code>npm run generate</code>、<br>
「Publish directory」に<code>dist</code>と入力し、「Show advanced」をクリック</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/18nl3tO7ExfXc2fyR9z0vN/30ca5b612f9f50e4d9ed5b914b40ce3d/netlify-build-options.jpg" alt="netlify-build-options"></p>
<p>「New variable」をクリックしてキーの入力欄を表示し、<br>
.envファイルに記述した「CTF_SPACE_ID」と「CTF_ACCESS_TOKEN」を記入→「Deploy site」</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/4TwmR8PpMouz0jnfgcpUPz/d4347ff44b58237cd0fbb61413cd55dc/netlify-deploy-site.jpg" alt="netlify-deploy-site"></p>
<p>「Deploying your site」と表示され、少し待つとデプロイが完了します。<br>
「Site settings」をクリック</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/4UEF38aTDtLoot1TJq3nE0/7d183e541486d4f15201d434c0a1dd7e/netlify-site-settings.png" alt="netlify-site-settings"></p>
<p>左のメニューから「Build & deploy」をクリック
下へスクロールし、「Build hooks」の「Add build hook」をクリック</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/4wcXHIIbSlSQn6O8fiyQcj/9c52fec7918e2796dd248d61f9fe521f/netlify-add-build-hook.jpg" alt="netlify-add-build-hook"></p>
<p>「Build hook name」に「Deploy」と記入し、「Save」をクリック<br>
表示された「https://api.netlify.com/build_hooks/～」 で始まるURLをコピー</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/3tXw8NsahNrIYBQSgcOa5W/f7bb9c69e2466d926635c81c8904b84f/netlify-build-hook.jpg" alt="netlify-build-hook"></p>
<p>Contentfulのサイトに戻り、上部の「Settings」メニューから「Webhooks」を選択</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/8wMvvBaKsTIKirVvrdz5b/9953671469efc7793fe106d91dd19652/contentful-webhook.jpg" alt="contentful-webhook"></p>
<p>「Add Webhook」ボタンから、Webhookの設定をします。<br>
「Details」の「Name」に「Deploy」と記入し、「URL」の入力欄に先ほどNetlifyでコピーしたWebhookのURLを貼り付けます。<br>
「Triggers」で「Select specific triggering events」を選択し、「Entry」にチェックを入れます。<br>
設定が完了したら、「Save」をクリック</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/3lNYoBm2QouOnsFlsty6uF/4761ae8f942f7a989268bdf630169740/contentful-webhook-setting.jpg" alt="contentful-webhook-setting"></p>
<p>これで、Contentful上で新しい記事の投稿や記事の編集を行うと、Webhookにより自動でNetlify上のデプロイが行われるようになります。</p>
<h2>まとめとGithubのリンク</h2>
<p>これにて設定が完了となり、記事の投稿とウェブサイトへの反映ができるようになりました。<br>
ここから、ドメインの設定やデザインの変更をすることで、実際にブログとして使用できるようになると思います。</p>
<p><strong>ここまでのコードを<a href="https://github.com/izm51/nuxt-blog-test">Github</a>で公開</strong> しておきます。<br>
ご自由に使用・参考にしてください！</p>
<p>今後は、基本的なSEOの設定や、記事のタグづけ方法なども記事にしていきたいと思っています。</p>
]]></content>
<published>2019-04-11T22:02:50.704Z</published>
</entry>
<entry>
<title type="html"><![CDATA[Nuxt + Contentful + Netlifyでブログ作成全手順<前編>]]></title>
<id>https://izm51.com/posts/nuxt-contentful-netlify-blog-making-1/</id>
<link href="https://izm51.com/posts/nuxt-contentful-netlify-blog-making-1/">
</link>
<updated>2019-04-11T22:01:42.650Z</updated>
<summary type="html"><![CDATA[趣味をアウトプットするためにブログをはじめようと思い立ちまして、せっかくなので最近勉強中のNuxt.jsを使用してブログを作成してみました！記事表示までの手順をまとめてみたので、参考にしていただければと思います！<前編>ではNuxtプロジェクトの作成からContentfulのセットアップまで、<後編>では記事の作成、Nuxtでの表示、Netlifyへのデプロイまでの手順をまとめてあります。]]></summary>
<content type="html"><![CDATA[<img src="https://images.ctfassets.net/p9ol5zmjn52c/xp6QBXkh9p73t84LKYyii/82d3a6b7bbba6cfade9b6f9d8d0b30f4/nuxt-cont-netl-blog.jpg?w=1080"><p>趣味をアウトプットするためにブログをはじめようと思い立ちまして、<br>
せっかくなので最近勉強中のNuxt.jsを使用してブログを作成してみました！<br>
記事表示までの手順をまとめてみたので、参考にしていただければと思います！</p>
<p><前編>ではNuxtプロジェクトの作成からContentfulのセットアップまで、<br>
<a href="/posts/nuxt-contentful-netlify-blog-making-2"><後編></a>では記事の作成、Nuxtでの表示、Netlifyへのデプロイまでの手順をまとめてあります。</p>
<p>なお、この記事は<a href="https://www.youtube.com/watch?v=Pa5t8KyEORs">こちらの動画</a>を大いに参考にしています。<br>
併せて参考にしていただければと思います。</p>
<p>[[toc]]</p>
<h2>Nuxtプロジェクトの作成</h2>
<p>前提条件として、nuxtはインストール済みとします。</p>
<pre><code class="language-bash">$ npx create-nuxt-app <project-name>
</code></pre>
<p>nuxtで新しくプロジェクトを作成します。<br>
設定はすべて初期設定のままです。</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/5BTkqta8QYJ6pXgw2Qsbck/aca69d6d68c0651217abd4f259528160/nuxt-create-blog1.JPG" alt="nuxt-create-blog1"></p>
<p>次に必要な物をインストールします。</p>
<pre><code class="language-bash">$ cd <project-name>
$ npm install
$ npm install contentful @nuxtjs/dotenv @nuxtjs/markdownit node-sass sass-loader
</code></pre>
<p><code>nuxt.config.js</code>に以下のように追加します。</p>
<pre><code class="language-js">require("dotenv").config() //一番上に
const client = require("./plugins/contentful")
/* ~~~中略~~~ */
plugins: [
'~/plugins/contentful'
],
modules: [
'@nuxtjs/dotenv',
'@nuxtjs/markdownit'
],
markdownit: {
injected: true,
html: true,
linkify: true,
typography: true,
},
generate: {
routes() {
return client
.getEntries({ content_type: 'post' })
.then(entries => {
return entries.items.map(entry => {
return {
route: "/posts/"+entry.fields.slug,
payload: entry
}
})
})
}
},
env: {
CTF_SPACE_ID: process.env.CTF_SPACE_ID,
CTF_ACCESS_TOKEN: process.env.CTF_ACCESS_TOKEN,
},
</code></pre>
<p>pluginsフォルダに<code>contentful.js</code>を作成します。</p>
<pre><code class="language-js">const contentful = require("contentful")
module.exports = contentful.createClient({
space: process.env.CTF_SPACE_ID,
accessToken: process.env.CTF_ACCESS_TOKEN
})
</code></pre>
<p>nuxt.config.jsと同じ階層に<code>.env</code>ファイルを作成します。</p>
<pre><code class="language-bash">CTF_SPACE_ID=
CTF_ACCESS_TOKEN=
</code></pre>
<p>では、CTF_SPACE_IDとCTF_ACCESS_TOKENを埋めるために、contentfulのセットアップを行っていきます。</p>
<h2>Contentfulのセットアップ</h2>
<p><a href="https://www.contentful.com/">Contentfulのサイト</a>で右上にある「Try for free」ボタンから会員登録、ログインします。<br>
(画面は2019/4/4のものになります)</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/4BnKaFvhCI5hcFRJjhePLa/6a96766077abad92109d80eede2d5c5c/contentful-try-for-free.jpg" alt="contentful-try-for-free"></p>
<p>登録完了後、表示されるボタンを押すと「The Example Project」が作成されます。<br>
「The Example Project」が表示されたら、左上のボタンからメニューを開き、</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/1ghzMffG87MFDu9Li8oofl/ca56b8cc1747c0b02757c89bfc3a247e/contentful-menu.jpg" alt="contentful-menu"></p>
<p>「Create space」をクリック</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/5M0qbCs3NKtz8vBLpdFvZI/e26b0300a475a44525be56f0f4de25d7/contentful-create.jpg" alt="contentful-create"></p>
<p>"Space type"を選択し(僕の場合はFree)、"Space details"を記入し、進んでいけばspaceの作成は完了です。<br>
※"Space type"が"Free"の場合、保存できる記事とアセット(画像など)の合計個数が5000個まで(記事投稿時点)のため、画像を多く使用すると比較的すぐに上限に達してしまうかもしれません。</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/4Xf5b80Yii53Zba2zvt7q9/8b8aac8d75e71eb32209a622001bab17/contentful-space.jpg" alt="contentful-space"></p>
<p>「Create a content type」をクリック</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/2ges97t41tlobJmVBqv45O/8c876942d3975569e046ff7ace90c094/contentful-create-content.jpg" alt="contentful-create-content"></p>
<p>記事を格納するために「Post」という名前の"Content model"を作成します。</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/3t0HBFGAqs672lSZfpre8Y/b3611a4a6199d8f8d11df3f5727032b3/ctf-create-new-content-type.jpg" alt="ctf-create-new-content-type"></p>
<p>右側の「Add field」ボタンから新しい入力欄を作成できます。<br>
今回は下記のような"field"を作成します。</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/4FvH9botvsYniNcRaHiIfL/e77b04d0ae9dff445ac3fb2a0708aaed/ctf-fields.jpg" alt="ctf-fields"></p>
<p>まず「Title」を作成します。<br>
「Add field」→「Text」→NameにTitleと入力→「Create and configure」</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/74sJiJEUZC1bh7Ij9hvPIA/f8fc11a9d3eb6551ab8733200661bd3a/ctf-new-field.jpg" alt="ctf-new-field"></p>
<p>タイトルは必須項目にした方がいいと思うので、「validations」タブから「Required field」にチェックして「Save」</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/1EcUaOqHln9uq1Lnz7JO1c/3fc3a2c7dc6e1140a9500a3e1682a264/ctf-field-validations.jpg" alt="ctf-field-validations"></p>
<p>これで「Title」のfieldが作成できました。</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/7olbHM3AqbTHuTDSn4eqwb/1111ad3271b77d41a9a2f2f7c1309d72/ctf-post.jpg" alt="ctf-post"></p>
<p>同様に「Slug」、「Image」、「Content」を作成します。</p>
<p>「Slug」は記事のURLとなる、IDのようなものです。<br>
「Add field」→「Text」→NameにSlugと入力→「Create and configure」<br>
→「validation」→「Required field」と「Unique field」にチェック→「Save」</p>
<p>「Image」は記事の一覧に表示するサムネイル画像です。<br>
「Add field」→「Media」→NameにImageと入力→「Create and configure」<br>
→「validation」→「Required field」にチェック→「Save」</p>
<p>「Content」は記事の本文です。<br>
「Add field」→「Text」→NameにContentと入力→「Long text, full-text search」にチェック<br>
→「Create and configure」→「validation」→「Required field」にチェック→「Save」</p>
<p>これらの作成が完了したら、右上にある「Save」ボタンをクリック</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/jyJ7SkCsXcy7LGgNU8qaU/ea17dae045ce9efb5adec95684d33053/ctf-content-type-save.jpg" alt="ctf-content-type-save"></p>
<p>そして上部の「Settings」メニューから「API keys」を選択</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/toFyVZmB0Sn6YsdgrDjPH/bb779414ed1f32e6900b78a58042ea55/ctf-get-apikey.jpg" alt="ctf-get-apikey"></p>
<p>右側の「Add API key」ボタンから、APIキーを確認することが出来ます。</p>
<p><img src="//images.ctfassets.net/p9ol5zmjn52c/4rVOU1JUPoBVLY8GWDkNYA/4816b056cd91836b7bef0112539d630b/ctf-apikey.jpg" alt="ctf-apikey"></p>
<p>ここで確認できたキーを<code>.env</code>ファイルに記入します。</p>
<pre><code class="language-bash">CTF_SPACE_ID=<Space ID>
CTF_ACCESS_TOKEN=<Content Delivery API - access token>
</code></pre>
<p>長くなってしまったため、<a href="/posts/nuxt-contentful-netlify-blog-making-2"><後編></a>へ続く</p>
]]></content>
<published>2019-04-11T22:01:42.650Z</published>
</entry>
</feed>