ウェブサイト制作にRollupを使う〜2021年2月更新〜

どうも!
大阪府松原市でウェブを中心としたソフトウェア開発を行っています。
コワーキングスペース松原ガレッジ管理人の五島です。

今日はRollupの話を少ししようかな〜と軽快に記事を書いてます!
設定はよっ(｀･ω･´)という方はこちらのGitHubリポジトリを御覧ください。

目次はこちら

Rollup自体は特に利用しなくても、JavaScriptを実行することはできます。
しかし、 JavaScriptの新しい記法(ES2015またはES6)を利用したいという要望の上で、広いブラウザ対応を行おうと思ったら使っておくとベター(ほぼ必須?)という感じです。

似たようなツールにwebpackというものがありますが、こちらはJavaScriptだけではなく、
CSS、画像など様々なアセットを対象にしたフルコースみたいなものです。
ググるとわかりますが、様々な使い方やバージョン話の情報が出てくるためフィルタリングのコストがかかってしまうなという印象です。

このような理由で、ウェブサイト制作においてはRollupの軍配かな〜と思い今後の採用のために調査しています。

今回の記事では、 * babelを利用してJavaScript新しい記法をIE11にも対応するための設定 * Stimulus を動作させるための設定 をメモとして記載しています。

準備

• Node.jsはv12.18.2
• npmは7.5.4

という環境で検証を行っています。
npxというコマンドを利用しているので、npmだと5.2.0以上だとそのまま実行可能だと思います。

インストール

ウェブサイト作成を行うフォルダを適当に作成します。
次に

$npm install --save-dev rollup

これでrollupコマンドが利用できるようになります。

設定ファイルを書く

コマンドラインのオプションでファイルを変換することも可能なのですが、今回は設定ファイルを書いていきます。
現在いるフォルダに rollup.config.js という設定ファイルを作成します。

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  }
};

実行は

$npx rollup -c

これでsrc/main.jsを変換してくれます。
formatの部分のiifeは即時関数という形式で出力してくれます。
ウェブ制作でブラウザで実行するという文脈では、この形式を使うでしょう。
基本的な使い方は以上で、後はbabelの設定などを追加していきます。

ES2015(ES6)記法をRollupでIE11に対応させる

babelを利用して変換を行うので、ライブラリを追加します。
また、babelにはPolyfillを追加する機能もあるので、その設定も行っていきます。
babelの7からはPolyfillの設定が少し変わったということで、それも考慮して反映していこうと思います。

$npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env @rollup/plugin-node-resolve core-js@3 @rollup/plugin-commonjs

これを利用する設定をrollup.config.jsに追加

import { babel } from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs'; // requreでのモジュール呼び出しとかに対応する
import { nodeResolve } from '@rollup/plugin-node-resolve'; // node_modulesからライブラリをimportするために対応

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  },
  plugins: [
    nodeResolve({ browser: true }), // commonjs()の前に
    commonjs(), // こっちをbabel()の前に
    babel({ babelHelpers: 'bundled' })
  ]
};

.babelrcを追加

{
  presets: [
    ["@babel/preset-env", {
       useBuiltIns: "usage",
       corejs: 3 // or 2
    }]
  ]
}

.browserslistrcを追加

ie 11

これで、ES2015記法のJavaScriptをIE11対応へ変換できます。
また対応できてない関数も自動的にoutputに含んでくれます。 実際にinputのsrc/main.jsにテストファイルを置いてみましょう。

window.addEventListener('DOMContentLoaded', () => {
  const hoge = () => {
    console.log('hoge')
  }
  hoge()

  const ary = (new Array(10)).fill(false)
  console.log(ary)
});

constやアロー関数を含んだjsファイルを変換します。 Arrayに対してfillを行っている部分はIE11だと非対応の部分です
rollupを実行するコマンドは以下です。

$npx rollup -c

アウトプットのファイルはbundle.jsなのですが、しっかり変換とPolyfillの追加が行われてそうですね。

https://github.com/Islands5/rollup-sample/blob/main/bundle.js#L702
https://github.com/Islands5/rollup-sample/blob/main/bundle.js#L692

これだけでもだいぶ嬉しい!!

Stimulus の対応

先程の設定がベースになります。
ちょっとしたトリッキーなページに Stimulus を利用したりするのでその設定をしてみようかなと思います。
最終的な設定はこちら

rollup関連で何かやりたいときは、npmのプラグインのページを見るとよさそうなので、他のライブラリを利用する際は検索してみてください https://www.npmjs.com/package/rollup-plugin-stimulus

必要なパッケージをインストールします

$ npm install --save-dev rollup-plugin-stimulus stimulus

その後、各種設定を行います。
rollup.config.jsはこちら

import { babel } from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs'; // requreでのモジュール呼び出しとかに対応する
import { nodeResolve } from '@rollup/plugin-node-resolve'; // node_modulesからライブラリをimportするために対応
import stimulusPlugin from 'rollup-plugin-stimulus';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'iife',
    sourcemap: false
  },
  plugins: [
    stimulusPlugin({
      basePath: './src/controllers',
      importName: 'stimulus-controllers',
      showWarnings: false,
    }),
    nodeResolve({ browser: true }), // commonjs()の前に
    commonjs(), // こっちをbabel()の前に
    babel({ babelHelpers: 'bundled' })
  ]
};

あとはsrc/main.jsを中心にStimulus使うファイルを追加していきます。
https://stimulus.hotwire.dev/handbook/hello-stimulus#it-all-starts-with-html

実際にコンパイルするだけ
(2021年2月現在では、bundle.jsを出力する際にsourcemapに関するエラーが出るのですが、動作はするようです...ただ不安w)

今後も様々なライブラリの利用法を適宜更新していこうと思います。

以上!

参考

• https://www.npmjs.com/package/@rollup/plugin-babel
• https://www.npmjs.com/package/@rollup/plugin-node-resolve
• Babel周りの設定が変わったようなので、こちらを参考に
• https://www.npmjs.com/package/rollup-plugin-stimulus

capistrano3-puma を更新したらpumaのデプロイタスクがなくなった話

※以下の記事はpumaのバージョンが5系以下の場合の対応です。
2021年5月6日時点ではCapistrano::Puma::Daemonはpuma5系に対応してないため、Capistrano::Puma::Systemdを使ったやり方を採用してください。
(そうしないとdaemon系のエラーで泣きます)

capistrano-pumaのバージョン4から5に上げました(年末に)
するとデプロイ時にpumaのプロセスが再起動しなくなったので調査しました

github.com

差分にも書いてあるのですが、

install_plugin Capistrano::Puma::Daemon

をCapfileの

install_plugin Capistrano::Puma

がいる箇所の下に付与してあげると

bundle exec cap --tasks

のタスク一覧でpuma:restartなどが出力されるようになる

最初めっちゃ焦った笑
これで安心して年が越せそうです(｀･ω･´)ゞ

【ブログの見出しって？】最後まで読まれる記事は「見出し」が重要！

Webライター兼コワーキングスペース管理人の五島聖也です！

早速ですが、クラウドソーシングサービスなどを活用してWebライティングを始める方が増えてきましたね。コロナ禍で在宅ワークが増えたこともあり、副業として始められた方も多いのではないでしょうか？なかには、ポートフォリオ用に自分でブログを開設した方もいるはずです。

ブログを運用するにあたって重要なのは、もちろん記事の内容ですよね。しかし「見出しの付け方」も重要だということをご存知でしたか？

「今まで適当に見出しを付けていた」
「要所で入れればいいんじゃないの？」
「そもそも見出しを付ける必要あるの？」

そんな駆け出しライターの皆さんに今回は、私なりの解釈で見出しを付けるメリット、付け方のポイントについてご紹介します。自分が書いた記事を最後まで読んでもらうためにも、ぜひこの記事を参考にしてみてください。

ブログの見出しってなに？

ブログの記事において見出しとは、内容を短くまとめた「テーマ」のことです。記事には何千字という文字が書かれているため「この部分では〇〇について書いてます！」という風にテーマごとに要点をまとめて章を区切るときに使用します。

たとえば、今回の記事であれば「| ブログの見出しってなに？」がひとつの見出しです。見出しを付けることによって、読者にこの章では「見出し」について説明していますよ！ということを伝えることができます。

ブログで見出しを付けるメリット

見出しを付けるメリットは2つ。「記事が読みやすくなること」「SEOに効果がある」というメリットがあります。ひとつずつご紹介していきます。

記事が読みやすくなる

記事の読みやすさは見出しの有無によって変わります。なぜなら「どこで何について書かれているか」が全体を通してはっきりとわかるからです。

そもそも、Web上の記事では長文が読まれない傾向にあります。同じ大きさ・同じ行間でダラダラと文字が並んでいると、読者は読みにくさを感じてしまうからです。
見出しを付けて、文字の大きさにメリハリを持たせたり伝えたい内容を区別したりすることで、読者は流し読みでも「ここは〇〇ついて書いている」と認識しやすくなります。その結果、記事全体が見やすくなるため、最後まで読んでもらえる可能性が高まります。

SEOに効果がある

SEOにも効果があります。検索エンジンが重視する「hタグ」という見出しタグが設定されるからです。

SEO（Search Engine Optimization）とは、GoogleやYahoo!などの検索エンジンがWebサイトや記事、画像などのコンテンツを上位表示されることです。検索エンジン内には「クローラー」と呼ばれるプログラムが巡回しており、ネット上で公開しているさまざまなコンテンツをデータ化して情報を読み取っています。

クローラーは、見出しタグのなかに含まれるキーワードを重視しています。そのため、見出しにキーワードを含ませることで、SEO効果が高まるのです。
また、見出しは「大見出し（h1）」「見出し（h2）」「小見出し（h3）」と分かれており、それぞれで重要度が変わります。なぜなら、クローラーは大見出しから順に情報を読み取っていくからです。

クローラーが、読み取ったデータを「良質なコンテンツ」と判断すれば、そのコンテンツは検索結果で上位表示される可能性が高くなります。 つまり、見出しを付けることはクローラーにとっても記事の内容を判断しやすく、上位表示されることによって読者が増える可能性が高くなります。

ブログの見出しを付ける際のポイントは？

ブログの記事に見出しを付ける際は、以下のポイントを押さえておきましょう。

見出しで内容がわかるようにする

読者は見出しで、記事を「見る」「見ない」の判断をします。そのため、見出しは記事の内容がわかるように設定するのが理想です。
たとえば皆さんも、書店で気になるタイトルの本があったとき、最初の目次（見出しの羅列）を見て購入するか否かの判断をしていませんか？

Web上の記事もほとんど同じです。読者は疑問や悩みを解決したいという明確な目的があってページを訪れています。
自分が持つ疑問や悩みを検索して、解決してくれそうなタイトルのページへと入ります。そこで、記事のどの部分で解決できるのかわからなかったり、そもそも見出しが付いてなかったりすると内容を読まずにページを離れてしまいます。
そこで重要なのが見出しです。見出しだけで何について書いているのか、ある程度内容がわかるようにしていれば、読者を他のページに逃すことなく読んでもらえる可能性が高くなるのです。

見出しの順番を意識する

大きい見出しから順に内容を噛み砕いていくと読みやすい記事へと仕上がります。

たとえば、以下のようなタイトルの記事を作成する場合。
「開催まであと少し！オリンピックの歴史と過去の日本人金メダリスト」
タイトルは< h1 >タグになるため、私たちが見出しを設定するのは< h2 >タグからです。

< h1 >開催まであと少し！オリンピックの歴史と過去の日本人金メダリスト< /h1 >
< h2 >オリンピックの歴史< /h2 >
　< h3 >オリンピックが4年に1度の理由< /h3 >
　< h3 >最初のオリンピック種目< /h3 >
　　< h4 >競争< /h4 >
　　< h4 >レスリング< /h4 >
< h2 >【競技別】オリンピックで金メダルをとった日本人< /h2 >
　< h3 >陸上< /h3 > 　< h3 >水泳< /h3 > 　< h3 >etc…< /h3 > < h2 >まとめ< /h2 >

ご覧のように< h2 >タグでメインの見出しを掲げ、それについての細かい情報を< h3 >・< h4 >タグで噛み砕いていきました。そうすることで、読者が必要としている情報をいち早く届けることができます。
たとえば「過去のオリンピックで金メダルをとった日本人を知りたい」という読者は、歴史の部分をわざわざ読まずに済みます。さらに、競技別で分けることによって読者が気になった「競技での金メダル保持者」を知ることができるはずです。
このように、テーマを噛み砕いて見出しを付けることによって、より細かい情報を読者に伝えることができます。

ただし、見出しタグを使う際の注意点がひとつ。< h2 >タグの次に< h4 >タグを使うなど、数字を飛ばしたり順番を間違えたりしないようにしましょう。クローラーが読み取る際に混乱してしまうからです。
正しい見出しを付けて、読者にもクローラーにも読みやすい記事を作成していきましょう。

見出しの付け方に正解はない

見出しの付け方は、Webライティングを進める上で必要な要素のひとつです。どれだけ有益な情報を書けたとしても、読んでもらえなければ意味がありません。
どこを分けるか・どのテーマを深掘りするかは、ライターによって異なります。正解があるわけではありませんが、見出しで読みやすさや伝え方は変わってくるはずです。
最後まで読んでもらえるように、正しい位置に見出しを付けて読者にストレスを与えない記事を書きましょう！

例え話では「理解」には限界がある。〜次のステップへ進むには〜

大阪府松原市でウェブ開発をやってます。
コワーキングスペース松原ガレッジ管理人の五島です。

制作がメインなのですが、プログラミング教育やPC教室の講師なども行っています。
生徒にとって新しい概念を学ぶ時、
「例えを使って、日常で馴染みやすい事象に置き換える」
というのは、誰もが行ったことがあるでしょう。

新しい概念を理解する時、「例え話」をキッカケとして理解を進めようとします。
この時に「例え話」= 全体として捉えないようにしないといけないよという話です。

なぜなら、例え話が枠を作ってしまい、そこから外れた概念の理解を妨げることがあるからです。

例えば...(この話もあくまで例ですよw)
おばあちゃんに対してスマートフォンについて教えることになったとします。
「電話みたいなもので〜」
と伝えれば大体は理解してくれるでしょう。
とりあえず、持ってる人同士で連絡が取れる的なニュアンスは伝わると思います。

しかし、これで「ネットができる」「音楽聞ける」と言われたら、おばあちゃんはビックリするでしょう。
自分が知っている電話の概念から大きく外れてしまうからです。
つまり、例え話はあくまで物事の一部分を切り取った1つの側面であり、抽象的な概念をすべて置き換えられているものではない
ということです。
それを理解しておけば、例え話の呪縛を破って、それまでの枠を広げることができます。
そうゆうものなのか、と受け入れることができます。

もちろん、例え話の中にはその抽象的な概念をほとんどカバーするような「うまい例え」というのが存在しています。

最近もtwitterで見かけたのですが(たぶん選挙のたびに出てくる)、統計学に関する秋山仁先生の例えがめちゃくちゃ秀逸だなと
立川志の輔さんの落語の枕だそうで、こんな例え話です。

数学者の秋山仁先生に「開票5 %で当確がでるのがおかしい」といったところ、秋山先生が「それが統計学ですよ。少ないサンプルで全体を見る。これが統計学です」とおっしゃる。

「でも先生、そんなこといっても5 %ですよ」

「じゃああなたね、大きな鍋一杯にみそ汁作って、味見するとき、どんぶりばち一杯に入れてぐーって全部飲む？」

「・・・小皿ですよね。」

「それが5 %よ。」

この例え話は、ほんとにわかりやすい笑
他の思考実験にも応用が可能なところも秀逸な例え話だなと感じます。

だって、もし味噌がちゃんと混ざってなかったら(偏りがあったら)、小皿で味見しても無意味というのがなんとなく理解できるじゃないですか
応用も効く!!

というわけで、例え話が表すのは概念の一部だとわかってもらえたかなと思います。
では、理解するにはどうすればいいのでしょうか??

自分で例え話を作れるかどうか?

自分が「大体こんな感じか」と理解できた時、実際に例え話を作ってみるといいと思います。
先程のスマホの例で言うと スマートフォンとはつまり電話 + 計算機 + レコードなんじゃないか という感じです。

それを講師の先生に確認してみましょう!
そこで少しずつ理解を進めていきます。

「それってつまりこれと同じ??」
と自分の中で噛み砕くことで、例え話から理解が広がっていくのかなと

まとめ

結局言いたかったことは2つです。
・例え話はあくまで物事の一部分を切り取った1つの側面
・理解を深めるには、自分でも例え話を作り講師に聞く
ということでした。

例え話を物事のすべてとして理解するのはもったいない!!
細かいニュアンスや条件、情報としてカットされているものが確実にあります。
(もちろん味噌汁の話もです!)
このことを念頭に置いて、様々な知識を貪欲に吸収していきたいものですね〜

参考リンク

・落語の動画は検索して探してみてね
・https://www.yotsuyagakuin.com/b_geneki/toukeigaku-senkyo/

Puppeteerを使って、ブラウザ(ヘッドレスChrome)を操作する(in Docker コンテナ)

どうも〜
コワーキングスペース松原ガレッジの管理人(五島)です。

ウェブページにアクセスして色々確認する必要性ができたので、自動化しましたという話です。

Puppeteerというツールを利用して、ブラウザ(ヘッドレスChrome)を操作しました。

結論から知りたい!!というせっかちな方
安心してください、履いてますよ
ではなくGitHubにソースを公開しました。

色々なサイトで載ってる方法を試したのですが、
Chrome の進化が早いからか最初のセットアップで上手くいかないケースが多かったのでDockerfileを少し編集しています。

動作環境

• macOS 10.15.5
• Docker for Mac
• NodeJS v12.18.0
• Puppeteer 4.0.1
• Chrome(ヘッドレス) 83.0.4103.116

念の為注意

上記の方法におけるウェブページの回遊は用法用量や対象のサービスの規約を守って利用してください。
例えば、特定のサービスに短時間にたくさんのアクセスを行えば、それはサービスに対する攻撃とみなされる可能性が高いです。
この記事を参考にして行ったとしても、関連して生じたあらゆる損害等は、理由の如何に関わらず一切責任を負いません。
自己責任でお願いいたしますm( )m

Puppeteer とは? 実際に動かしながら試してみる

Puppeteer は人に変わってプログラムでChromeを制御してくれるツールです。

例えばこのようなプログラムでは、ページにアクセスしてスクリーンショットを撮ることができます。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: true,
    executablePath: '/usr/bin/google-chrome-stable',
    args: ['--no-sandbox']
  });

  // ↓後の例ではここの中身だけ変更していきます
  const baseUrl = 'https://example.com';

  const page = await browser.newPage();
  await page.goto(baseUrl, {waitUntil: "networkidle2"});
  await page.screenshot({path: './dist/example.png'});
  // ↑

  await page.close();
  await browser.close();
})();

実際に取得したスクリーンショットはこちら

他にもページ内の要素に対してクリックできたりします。
クリックして他のページへ遷移してみましょう。
( プログラム内 https://poly-kaigo.com は弊社が運営するサービスです)。

  // 前の処理があります
  const baseUrl = 'https://poly-kaigo.com';

  const page = await browser.newPage();
  await page.goto(baseUrl, {waitUntil: "networkidle2"});  // トップページへ
  await page.screenshot({path: './dist/example1.png', fullPage: true});

  page.click('article.article-item.post-671.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-manga > div.head > a')  // リンクを指定してクリック
  await page.waitForNavigation({timeout: 50000, waitUntil: "networkidle2"});
  await page.screenshot({path: './dist/example2.png', fullPage: true});
  // 後の処理があります

こちらがトップページ

こちらがリンクをクリックしたページ

とこんな風に人間に変わって色々操作してくれます。
他にもどんな操作ができるのか気になった方はぜひPuppeteerで確認してみてください。

定期的にウェブページのスクリーンショットを取りにいったり、内容を確認したりする必要がある方はぜひやってみてくださいね〜(^^)

まとめ

今回はPuppeteerを利用してウェブページへアクセスする方法を書きました。
これからも少しずつ技術記事をアップしていくので、覗いていただけるとありがたいです!!

松原ガレッジでは、PCの使い方からHP制作、ウェブシステムの開発までまるっと請け負っています。
「こうゆういいアイデアがあるんだけど、作ってくれないかな〜、できるのかな〜」
「この仕事、自動化できないかな〜」 という方は一度遊びに来てみてください(^^)

何かしらのお力添えはできると思います!