週刊とっしーぱんち

昭和生まれのブロガーが綴る、全力脱力系雑記帳

はてなブログにWebサイトを移植した話【趣味でつくるWebサイト】

おはよーございます。

以前こちらの記事で紹介したパスワードを作るWebサイトをはてなブログ内に移植できないかな?と思いたちまして実際にやってみた話です。

はてなブログ上で、簡単なWebサイトを作ってみたい!という方や、ブログ記事に少し動きをつけたい!といった方向けに多少は役立てるかな?と思いまして、移植作業の方法を紹介します。

ひとつ注意点として、はてなブログProの機能を利用していますので、無料版で動かない可能性があります。

まず、前提として今回の移植に使用したサイトの主な要素は以下の通りです。

  • Bootstrap
  • Vue.js
  • Webサイト本体はGitHubPagesにアップ済み。

これらの要素を踏まえつつ以下のような作業を行いました。

はてなブログに記事を作る

まず、はてなブログに記事を追加します。今回はTOPページの記事一覧に出てくるのが嫌だったので固定ページにしてみました。

ページを作る際の注意点としてHTMLモードで作成するのがポイントになります。

記事の内容は、元のサイトにあるHTMLからコピペしてきました。具体的にはこのページにある以下をまるごとコピペします。

<div class="container-fluid d-flex align-items-center justify-content-center" id="easy_pass">
中略
</div>

コピペした状態で一旦ページを保存します。このままだとまだ動かないので各種設定をしていきます。

BootStrapとVue.jsを設定する。

BootStrapとVue.jsを読み込めていない状態なので、はてなブログのダッシュボードメニューから、設定⇨詳細設定と進み、「head要素にメタデータを追加」の欄に以下を追加します。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

これを保存してさきほど作成したページに戻ると、ボタンがBootStrapのボタンデザインに変わっていると思います。ここまでくればあともう一歩です。

JSファイルの読み込み追加

最後に独自に追加したJavaScriptファイルの読み込み設定を追加します。作成したページを再び開き、ページ末尾に以下を追加します。

<script src="https://pages.osio-tosimasa.com/js/easy_password_maker.js"></script>
<script src="https://pages.osio-tosimasa.com/js/vue_app.js"></script>

もともとのWebサイトにはこのように書かれているのですが

<script src="js/easy_password_maker.js"></script>
<script src="js/vue_app.js"></script>

はてなブログから参照することになるので、GitHubPagesですてに公開しているURLを先頭にくっつけました。

表示と動作を確認してみる

以上が移植作業になります。せっかくなので少しだけ見た目を変更しまして、できあがったページがこちらです。

osio-toshimasa.hatenablog.com

僕の環境は動いているのですが、うまく表示されていますでしょうか?

もしよければ、動いているよーとか感想いただければ嬉しいです😊

余談ですが、ここにきて無理矢理かえる君を登場させた感が溢れ出てしまいました。久々というかまだ1回しか登場してなかったので緊急登板です 笑

まとめ

今回は、はてなブログへの移植作業について解説してみました。今までやってきたことに少しプラスするだけで、比較的かんたんに移植することができたなあというところがあります。ひとつひとつは大したことないものばかりなんですけど、パーツを組み合わせていくと面白い発見や付加価値が生まれてくるのが楽しいです。

ここで紹介した個々のパーツ作りに関しては、以下の記事で紹介しています。こちらの記事もぜひ併せて読んでみてくださいー。

osio-toshimasa.hatenablog.com

osio-toshimasa.hatenablog.com

osio-toshimasa.hatenablog.com