シェルやコマンドにより操作を自動化する

ショートカット~パソコン操作のスピードアップ~

「マウスは使うな!」

この言葉を聞いて「どうしよう」と困ったことを覚えています。Windowsを操作するにはマウスを使わないと……と思っていたのですが、当然のようにマウスを使わなくても操作できるようにショートカットキーやコマンドが用意されています。

◎Windowsでよく使われるショートカットキーの例

Ctrl+X切り取り

Ctrl + Aすべて選択

Ctrl+Cコピー

Ctrl + Tab次のタブへ移動

Ctrl + V貼り付け

Ctrl+Sファイルに保存

Ctrl+Z操作を元に戻す

Ctrl+Oファイルを開く

Windows + Dデスクトップを表示

Windows +LPCをロック

Alt+F4アプリの終了

Alt + Tabアプリの切り替え

コピーはCtrl+C、貼り付けはCtrl+V、取り消しは Ctrl + Z、アプリの終了は Alt + F4、などはよく知られています。ところが、意外と知られていないのがWindowsアプリの「コマンドでの起動方法」です。

アプリをキーボードのみで起動する

初心者の操作を見ていると、画面上にあるスタートボタンからアプリケーションの一覧を開き、その中から対象のアプリを順にたどって探した上で、起動していることを多く見られます。

例えば、Windowsのメモ帳や電卓を起動するとき、スタートボタンを押して、プログラムの中にある「Windows アクセサリ」をたどって、その中からアプリを選択。途中で画面のスクロールも発生するため、目的のアプリにたどり着くまでの手間がかかります。

もちろん、Windowsのスタートメニューで場所を移動して、最初の画面に配置したり、ショートカットキーを設定したりする方法もありますが、使うアプリの数が増えてくると画面に入りきらなかったり、割り当てられるショートカットキーが不足したりします。

そこで、コマンドを使う方法を覚えておくと便利です。1つの方法は「コマンドプロンプト」からの起動です。常にコマンドプロンプトを開いておけば、メモ帳であれば「notepad」、電卓であれば「calc」というコマンド名で起動できます。

コマンドプロンプトからアプリを起動する

2つ目の方法として、キーボードのショートカット「Windows + R」があります。

このショートカットを押すと、「ファイル名を指定して実行」画面が開き、入力欄が表示されます。この入力欄にコマンド名を入力して、OKボタンを押す(キーボードのEnterを押す)と指定したコマンドが実行され、アプリを起動できます。

シェルやコマンドにより自動化する

WindowsやUnix系OSでコマンドを使うようになると、複数の処理をまとめて実行したくなります。そこで登場するのが、WindowsのバッチファイルやUnix系OSのシェルスクリプトです。

バッチファイルを使うと、複数の処理を1つのファイルにまとめて記述することで、連続して実行できます。ファイルに記述して自動化することで、入力ミスを防ぐことができますし、タスクスケジューラなどに登録することで定期的に実行することも可能になります。

毎日実行する処理、特定の曜日に実行したい処理など、忘れてはいけない場合も、

自動化しておけば安心です。

例えば、ある3つのフォルダをエクスプローラーで開きたいとしましょう。もちろん、1つずつエクスプローラーを起動して、該当のフォルダを順に開く方法もありますが、次のような処理を記述したバッチファイルをメモ帳で作成します。

経理.bat

@echo off

start explorer “C:¥請求書”

start explorer “C:¥領収証”

start explorer “C:¥発注書”

このバッチファイルのアイコンをダブルクリックするなどして実行すると、請求書、領収証、発注書が入ったフォルダがエクスプローラーで開きます。これはエクスプローラーに限らず、Excelファイルや特定のURLなどを開くときにも、同じように書けます。

集計.bat

@echo off

start explorer “C:¥請求書¥一覧表.xlsx”

start explorer “C:¥領収証¥集計.xlsx”

start explorer “https://example.org/”

この数はいくらでも増やせますし、メモ帳が必要であれば「start notepad」、電卓が必要であれば「start calc」という処理を追加するだけです。

「写真」を「日付ごとにフォルダに分類」する

写真をフォルダ単位に分類するバッチファイル

Windowsのコマンドでファイルの更新日時を取得するには、引数に対して「%〜t」

という指定を使います。ここから日付だけを抽出し、フォルダが存在しなければ作成します。このフォルダに対し、各ファイルを移動してみます。例えば、次のようなバッチファイルを作成することが考えられます。

写真を日付で分類.bat

@echo off

for %%i in (*.JPG) do call :rename %%i %%〜ti

goto :eof

:rename

set D=%2

set ymd=%D:/=%

md %ymd% 2>NUL

move %1 %ymd%

この処理の2行目では、フォルダ内にある拡張子が「JPG」のファイルに対し、5行目以降で作成した rename という処理を呼び出しています。このとき、ファイル名と更新日時をパラメータとして渡しています。

5行目以降では、ファイルの更新日時から「1」を取り除いて8桁の数字にしています。その上で、日付のフォルダが存在しなければ作成し、そのフォルダにファイルを移動しています。

このバッチファイルを、写真と同じフォルダに配置し、ダブルクリックするだけで、そのフォルダー内に日付のフォルダが作成され画像ファイルを移動できます。

自動的に校正して 「文章のミス」をなくす

テキスト文書や Markdown の文書をパソコンで校正したい

書籍を書くような場合だけでなく、会議の議事録を書く、手紙や報告書を作成するなどの場面は誰にでもあるでしょう。仕事として文章を作成するだけでなく、最近ではブログやSNSへの投稿など、一般の人でも文章を書くことが多くなりました。

このような場面で、誤字・脱字だけでなく、誤った日本語を使ってしまう、英語にスペルミスがある、などの誤りが存在すると信頼を失う可能性もあります。

読みやすく正しい文章を書くためには「校正」という作業が必要です。専門的な知識を持ったプロに校正を依頼することもありますが、議事録や報告書を書く、ブログなどに投稿する、といった場面では専門家に依頼するわけにはいきません。

自分で何度も読み返してチェックする、上司などに確認をお願いする方法もありますが、可能な限りコンピュータの力を使いたいものです。よく使われる例として、Wordなどの文書作成ソフトがあります。スペルチェックや文章校正の機能が用意されており、ボタンを押すだけでチェックを実行でき、問題がある部分には波線を表示するなど、使いやすいソフトです。しかし、ブログなどを作成するときには、テキストエディタなどを使うことが少なくありません。また、文章を作成するときにも最近は Markdownという書式が使われることも増えており、Wordよりも手軽に使えるテキストエディタで作成している人は多いでしょう。

textlint を使ってテキストファイルや Markdown の文書を校正する

このような場合、Wordの校正機能を使うことはできません。そこで登場するのが、コマンドで校正やチェックが可能なツールです。代表的なツールとして「textlint」があります。

「〜lint」という単語はプログラミングではよく登場します。例えば、JavaScriptではESLint、Python では PyLint、Rubyでは ruby-lintなどが存在します。

これを文章に適用したものが textlintで、文書の内容に合わせたルールが数多く用意されています。このルールを記述した設定ファイルを切り替えることで、チェックしたい内容を変更できます。例えば、技術文書向けのルールとして、textlintルールプリセット「や技術用語に関するルールがGitHubに公開されており、ITに関する文章を書くエンジニアには最適です。

textlint は Node.js を使って作られています。つまり、事前に Node.jsのインストールが必要です。Windowsの場合、公式サイトからインストーラをダウンロードして実行するだけです(LTS版と最新版がありますが、一般的にはLTS版で十分です)。macOSの場合、Homebrewを使って導入する方法が簡単です。

Node.jsをインストールすると、Node.jsのパッケージ管理システムである npmも使えるようになります。実際に、以下のように node コマンドと合わせて実行できることを確認しておきましょう。

$ node –version

V12.18.2

$ npm –version

6.14.5

textlintをインストールするには、npmを使います。ここでは、手元の環境のどこからでも使えるように、textlintをインストールしてみます。

$ npm install -g textlint

さらに、上記で紹介した技術文書向けのルールや、技術用語に関するルールもnpmで導入できます。

$ npm install -g textlint-rule-preset-ja-technical-writing

$ npm install -g textlint-rule-spellcheck-tech-word

これらのルールを使って、textlintでチェックするには、チェックしたい文書ファイルを格納したディレクトリ内で、次のコマンドを実行します。

$ textlint –init

すると、このディレクトリ内に「.textlintre」という設定ファイルが作成されます。

このファイルをテキストエディタで開いて、ルールを次のように指定します。

.textlintro

{

“filters”: { },

“rules”: {

“preset-ja-technical-writing”: true,

2spellcheck-tech-word”: true

}

}

設定が完了すると、ファイル名を指定してコマンドを実行するだけで、文章の校正チェックができます。問題がある行番号と列番号、指摘された内容が表示されるため、その行を探して修正しましょう。

$ textlint sample.md

テキストエディタから textlint を使用する

これでも自動的に校正できますが、テキストエディタと連携するとより便利です。

例えば、Visual Studio Codeには textlintの拡張機能が存在します。この拡張機能を入れておけば、文章を保存した段階でチェックできるため、コマンドを実行する必要もなく、問題がある場所をリアルタイムに確認できます。

Visual Studio Codeの拡張機能から「vscode-textlint」を導入しましょう。

textlint を検索

インストールする

拡張機能

導入が完了した後、Visual Studio Codeを再起動して、該当のディレクトリにあるファイルを開くと、自動的にチェックできます。

「ファイルの差分」を「fcコマンド」や「diff コマンド」で抽出する

「取引先とファイルをやり取りしてるんですけど、相手がどこを変えたかわからなくて。」

「この2つのファイル、どっちが新しいんだっけ?」

こんな会話をよく耳にします。最近では、エンジニアの間では Gitなどを使ってファイルのバージョンを管理することが一般的になりましたが、一般の人は違うファイル名をつけて管理していることも多いでしょう。

「議事録.txt」「議事録 2.txt」「議事録(最新).txt」「議事録(提出版).txt」「議事録(増井).txt」「議事録_20200401.txt」などみんなが好き勝手なファイル名をつけていると、どれが最新のものかわからなくなってしまいます。ファイルの更新日時を見ても、判断できないことも。

こんなとき、それぞれのファイルを開いて、どこが違うのか目でチェックしていませんか? もちろん、明らかに中身が違うなら簡単に判断できますが、似たような中身で少しだけ変更した場合はチェックに時間がかかります。

最近はこのような場合に使える便利な比較アプリもありますが、指定されたアプリ以外はパソコンへのインストールが禁止されている会社もあります。こんなときに便利なのが、OSに最初からインストールされているプログラムです。

OS 標準のコマンドでファイルを比較する

2つのファイルを比較し、その変更点をチェックするために使われるプログラムとして、Windowsの場合はfcコマンド、macOSやLinuxの場合には diffコマンドがあります。

例えば、次のような2つのファイルがあったとします。

sample1.txt

sample2.txt

2020/04/01

2020/04/02

2020/04/03

2020/04/04

2020/04/05

2020/04/01

2020/04/02

2020/04/08

2020/04/04

2020/04/05

すると、それぞれのファイルのどこが違うのか、差がある行の前後の行を含めて表示してくれます。

C:\>fc samplel.txt sample2.txt

ファイル sample1.txt と sample2.txt を比較しています

***** sample1.txt

2020/04/02

2020/04/03

2020/04/04

***** sample2.txt

2020/04/02

2020/04/08

2020/04/04

*****

macOSやLinuxの場合は、次のように diffコマンドを実行します。こちらは、異なる行を表示するだけでなく、異なる行の行番号を先頭に表示しています。(先頭の3c3というのが、1つ目のファイルの3行目と、2つ目のファイルの3行目が異なる(changeの先頭の)ということを示しています。

$ diff samplel.txt sample2.txt

3c3

< 2020/04/03

> 2020/04/08

これを使えば、どの行が変更されているのか、その内容をスピーディに見つけられますね。

コマンドでJSON を整形する

JSON 形式のファイルを見やすく整形したい

最近ではデータの保存や設定ファイルの記述などにJSONという形式が多く使われるようになりました。「JavaScript Object Notation」の略で、人間が読みやすいだけでなく、コンピュータにとっても処理しやすい形式です。名前の通り、JavaScriptが主になっていますが、他のプログラミング言語でも読み取りや書き込みのライブラリが用意されており、手軽に使えるようになっています。

JSONでは、次のような形でデータを表現します。

“title”: “みんながときめく自動化の魔法”,

“publish”: “2020/08/26”,

“price”: 2000

},

{

“title”: “ディープラーニングのしくみ”,

“publish”: “2018/10/26”,

“price”: 2500

},

{

“title”: “プログラミング言語”

“publish”: “2017/08/01”,

“price”: 1680

}

]

このファイルを見ると、その内容を人間が理解するのは難しくないでしょう。タイトルがあり、発行日があり、価格が書かれています。このように、キーと値のペアをカンマで区切り、全体を中カッコで括ったものをオブジェクトといいます。

また、複数のデータを並べて処理するものを配列といい、全体を「0」で囲んだ上で、

要素をカンマで区切ります。今回の場合は、書籍の内容を示すオブジェクトが3つ

ある配列を表現しています。

同じことが、CSVファイルでも次のように書けますが、列の位置がずれているために読みにくいものです。実際には、表計算ソフトを使ったり、専用のソフトを使ったりしてコンピュータで処理することが一般的です。

JSON形式で書かれたファイルはプログラムでも簡単に処理できるため、便利なファイル形式だといえます。一方で、整形されていないと人間が読むのはなかなか難しいものです。例えば、上記のファイルが次のように書かれていても、プログラムは問題なく処理できますが、人間が読むのは大変です。

プログラムでJSONファイルを出力したとき、読みやすく整形されているとは限りません。そこで、JSON データを人間が読みやすいように、整形する処理が求められます。整形する処理を独自に作成する方法もありますが、「jq」というコマンドを使うと便利です。

jqコマンドでJSON ファイルを見やすく整形する

jqコマンドは、標準入力からデータを受け取り、引数で指定された処理を実行します。引数に何も指定しないと、与えられたデータを整形して出力してくれます。

jqコマンドをインストールするには、公式サイトからダウンロードしてインストールします。macOSでは Homebrewを使う方法もあります。

$ brew install jq

インストール後、次のように実行すると、上記のようなレイアウトが読みにくいJSONファイルでも整形して出力できます。

$ cat book.json | jq

さらに、引数としてさまざまな指定が可能です。例えば、1件目のデータだけ取り出す、ということも可能です。上記では3冊の書籍の情報が格納されていますので、それぞれ0番目、1番目、2番目でアクセスできます。

$ cat book.json | jq ‘. [0]’

同様に、引数を指定して上記のJSONから書籍のタイトルだけを抽出してみましよう。

$ cat book.json | jq ‘.[].title’

さらに、計算も可能です。今回の書籍の合計金額を計算してみましょう。金額

の項目を取得して配列にした後、「add」という処理を引数として指定しています。

データの個数を求める「length」や、最大・最小を求める「max」「min」などを指定することで、さまざまな計算が可能です。

$ cat book.json | jq ‘[.[].price] | add’

条件を指定して抽出することも可能です。上記の処理と組み合わせることで、複雑な処理も実現できます。

cat book.json | jq ‘map(select( ・price < 2000))’

JSON 以外のデータ形式との比較

Web系でよく使われるデータ形式には、JSON 以外にもCSVやXML、YAMLなどがあります。そんな中、なぜJSONが人気を集めているのか、それぞれの特徴を見ながら、その理由の一部を紹介します。

CSVはComma Separated Valueという名前の通り、カンマで区切られています。表計算ソフトなどで扱うのは簡単ですが、先頭の行に見出しとして列の名前を記述する以外に、データ構造についての情報がありません。フォーマットが決まったデータであればよいのですが、途中で項目が増えたり減ったりするとプログラムで処理するのは少し面倒です。

XML (eXtensible Markup Language)はHTMLと同じようにタグで囲って表現する方法です。データにタグで名前をつけられるだけでなく、属性を付与できるため、柔軟な表現が可能です。ただし、開始タグと終了タグで囲って表現するため記述量が多く、可読性も低いというデメリットがあります。

YAML (YAML Ain’t a Markup Language)はJSONと似ていますが、階層を表現するのにインデントを使うため、初心者でもわかりやすく覚えやすいという特徴があります。JSONではデータの中にコメントを記述できませんが、YAMLでは記述できるため、設定ファイルなどの用途でよく見かけます。

いずれも一長一短がありますが、JSONは人間が読み書きする場合にも扱いやすく、多くのプログラミング言語で簡単に扱えることが特徴です。JavaScript Object Notation という名前からもわかる通りJavaScriptでは当然のことながら、PHPなどの言語でもエンコード、デコードの処理が標準で用意されているため、Web系言語では便利です。

Markdown の文書をWordやHTML 形式に変換する

Markdown の文書は、テキスト形式で作成するだけで、簡単に見出しや箇条書きなどを記述できるため、エンジニアがテキストエディタだけで文書を作成するにはとても便利です。しかし、エンジニア以外の人にそのファイルを渡しても、相手がその記法がよくわからないものです。

Dropbox Paperを使ってWebブラウザ上でMarkdownで入力したものを Word形式に変換する方法を紹介します。しかし、Word 以外の形式に変換したい場合もあります。

例えば、HTML形式で表示したい場合、一度Wordで開いてHTML形式で保存する、

といったこともできなくはありませんが、非常に面倒です。そこで、コマンドライインストールが完了すると、次のようなコマンドでMarkdown形式をWord形式ンのツールを使うことを考えます。よく使われるツールに「Pandoc」があり、さまざまなファイル形式の変換に対応しています。

対応しているファイル形式の例

入力Markdown, HTML, LaTeX、reStructuredTextなど

出力　Markdown, reST, HTML, LaTeX, Word, PDF tauand

実際にMarkdown形式のファイルを、Pandocで変換してみます。

Pandocをインストールするには、公式サイトからダウンロードします。macOSの場合、Homebrewを使ってインストールする方法もあります。

$ brew install pandoc

インストールが完了すると次のようなコマンドでMarkdown形式をWord形式に変換できます。

$ pandoc test.md –from=markdown –to=html –output-test.html

同様にHTML形式に変換するには次のように実行します。

$ pandoc test.md –from=markdown –to=html –output-test.html

「Docker」で「開発環境や検証環境を準備」する

会社の PC の環境を統一するのを簡略化したい

新入社員が配属になった場合だけでなく、パソコンを買い換えた場合など、初期設定が必要になる場面はたくさんあります。このとき、必要なソフトウェアを順にインストールすることになりますが、難しいのがバージョンを揃えることです。多くのソフトウェアでは、最新バージョンをダウンロードするのは簡単なのですが、古いバージョンを探すのは大変です。しかし、社内の他の開発者とバージョンを揃えておかないと、うまく動かないことも。

これまでに多かったのが仮想環境を使う方法です。CPUやメモリなどのハードウェアが持つ機能をソフトウェアで実現することで、コンピュータの中で仮想的なコンピュータを動かす技術を仮想マシンといいます。仮想マシンを使うと、1つのコンピュータ内で複数の仮想的なコンピュータを動かすことができます。VirtualBoxなどの仮想化ソフトウェアを使用すると、仮想マシンをコピーすることで、他のハードウェアでもまったく同じ環境で動作できます。

仮想マシンは便利な仕組みですが、それぞれに OS を実行しなければなりません。

これはCPUやメモリだけでなく、ハードディスクなどの記憶装置もそれだけ消費します。そこで同じOSを使うコンテナ型のアプリケーション実行環境が考えられました。

Docker で同一の環境を実現する

代表的なものにDockerがあり、仮想マシンに比べて起動時間が短く、性能面でも有利です。OSは固定されますが、開発環境や検証環境、場合によっては本番環境でも使われています。OSは共通のもの(Linux) しか使えませんが、設定ファイルはテキスト形式で軽量ですし、起動も一瞬です。

Dockerでは、Dockerfile という設定ファイルを記述するだけで、その記述内容に合わせて環境を構築できます。つまり、Dockerfileをコピーするだけで、まったく同じ環境を再現できるのです。

また、Docker Hub と呼ばれるサイトにて、他の人が作成したDocker イメージが公開されているため、1から Dockerfileを作成しなくても、使いたいイメージに近いものを簡単に用意できます(自分が作成した Docker イメージを Docker Hubで公開することもできます)。

ここでは、Webサーバーとしてnginx、プログラミング言語としてPHP、データベースとしてMySQLを使用する、という環境を構築してみます。最近では、LaraDockなどの便利な環境もありますが、Docker の動作を理解するため、ここでは、はDocker環境の構築、Dockerfileを作成するところから始めます。

Dockerを使うには、インストールが必要です。公式サイトからダウンロードする方法もありますし、macOSの場合はHomebrewを使う方法もあります。Homebrewでインストールしてみます。

$ brew cask install docker

インストールが完了したら、Docker を起動します。起動が完了すると、Windows の場合はタスクトレイに、macOSの場合はメニューバーの右にあるステータスメニューに Docker のアイコンが表示されます。表示されたことを確認したら、まずは nginxの最新版の公式イメージをダウンロードし、カスタマイズすることなく使うことを考えます。次のコマンドを実行すると、Docker Hubからイメージをダウンロードできます。

$ docker pull nginx:latest

ダウンロードしたイメージからコンテナを実行するには、次のように実行します。

なお、上記の pull コマンドを実行することなく、次のrun コマンドを実行すると、

自動的にダウンロードして起動します。

$ docker run nginx:latest

起動が完了したことを確認し、http://localhost:8080」といったURLに Webブラウザでアクセスすると、nginxのWebサーバーが起動していることがわかります。

同様に、PHPもMySQLもダウンロード、起動できますが、設定を少し変えてみます。

PHPからは MySQLに接続するため、「pdo_mysql」や「mysqli」といった拡張を追加します。

PHPをダウンロードするときにこれらを自動的に組み込むため、phpというフォルダ内に次のファイルを「Dockerfile」という名前で保存します。これは、PHP7のfpmバージョンのイメージを取得し、その中でpdo_mysqlとmysqliをインストールしています。

php/Dockerfile

FROM php:7-fpm

RUN docker-php-ext-install pdo_mysql mysqli

このファイルからコンテナを作成するには、build コマンドを実行します。パラ

メータとして、名前を指定します。自分の名前などをつけるといいでしょう。

$ docker build hachi:php

ここで作成したPHPのコンテナを実行するには、上記と同様に以下のコマンド

を実行します。

$ docker run hachi:php

引き続き、MySQLのコンテナを作成します。ここでは、5.7というバージョンを使用し、別途用意した設定ファイルmy.confを読み込むことにします。また、起動時に mysqld というデーモンを起動することにします。

mysql/Dockerfile

FROM mysql:5.7

ADD ./my.cnf /etc/mysql/conf.d/my.cnf

CMD [“mysqld”]

また、設定ファイルである「my.cnf」を用意します。ここでは、文字コードをUTF-8で設定しています。

mysql/my.cnf

character-set-server=utf8mb4

default-character-set=utf8mb4

default-character-set=utf8mb4

これで環境の準備はできました。ただ、それぞれを個別に起動するのは面倒です。

そこで、一括で起動できるようにしましょう。それが「Docker Compose」です。

Docker Composeを使うと、複数のコンテナを定義し、まとめて実行できます。

設定は「docker-compose.yml」というファイルに記述します。ここでは、次のようなフォルダ構成で構築してみます。

Docker Composeの設定ファイルは、次のように指定します。

docker-compose.yml

version: ‘3’

services:

php:

build:

context: ./php

ports:

– 9000:9000

volumes:

– ./ www: /usr/share/nginx/html

environment:

MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}

nginx:

image: nginx:latest

ports:

– 80:80

volumes:

– ./nginx/default.conf:/etc/nginx/conf.d/default.

conf

mysql:

build:

context: ./mysql

ports:

– 3306:3306

environment:

MYSQL_DATABASE: ${MYSQL_DATABASE}

MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}

Docker Composeを使って起動するには、docker-compose.ymlがあるディレクトリで、次のコマンドを実行します。

$ docker-compose up

起動が完了すると、Webブラウザでアクセスします。データベースを作成し、そのデータベースに接続して結果を出力するプログラムを www ディレクトリ内に作成すると、接続を確認できます。

なお、バックグラウンドで起動したい場合は、次のように実行します。

$ docker-compose up –d

終了する場合は、次のコマンドを実行します。

$ docker-compose down

このように、設定ファイルを少し用意するだけで、手元に nginx + PHP +MySQLの環境を構築できました。異なるバージョンを用意する場合も、Dockerfileを少し書き換えるだけですし、不要になった場合はディレクトリごと削除するだけです。

RSS 未対応のサイトから情報を定期的に自動取得したい

Webサイトが更新されていないか、同じページを定期的に何度もチェックしている人はいませんか? RSSで取得できるサイトであれば RSSを使えるのですが、対応していないサイトだと何度もチェックするしかない、と思っている様子。

例えば、オークションの値段を数時間おきにチェックして、どれくらい上がっているか見ている人。Amazonのランキングがどう変わっているかチェックしている人。などなど。

私もAmazonでのランキングが気になりますが、これもRSSでは取得できません。このような処理は、RPAを使って、手軽に取得することもできるのですが、プログラムを書くと、より自由に加工できます。

ここでは、Amazonのランキングを取得する処理を作ってみましょう。定期的に実行するため、レンタルサーバー上で実行するスクリプトとして作成し、自動実行するようにしてみます。これなら手元のパソコンの電源が入っていなくても実行できるので、寝ているときでも処理されます。

このような処理はクローリングやスクレイピングと呼ばれますが、最近話題のプログラミング言語Pythonでは、ScrapyやBeautiful Soup、Seleniumなどのフレームワークが有名です。ここではScrapyを使ってみます。

Scapy でスクレイピングを行う

Scrapyはpipコマンドやconda コマンドでインストールできます。

$ pip install scrapy

インストールが完了すると、次のコマンドでバージョンを確認できます。

$ scrapy version

Scrapy 2.2.0

Scrapyでは「プロジェクト」という単位で処理を実行します。このため、まずはプロジェクトを作成します。プロジェクトを作成するには「startproject」という引数に加えて、作成するプロジェクト名を指定します。ここでは、「amazon」というプロジェクトを作成してみます。

$ scrapy startproject amazon

このコマンドを実行すると、プロジェクト名のフォルダが作成され、必要なファイルがフォルダ内に格納されます。

次に、Amazon の中から指定したページを取得する処理を作成します。ここでは、

「Spider」と呼ばれるクローラーを生成します。次のコマンドを実行すると、上記の spiders ディレクトリ内に「amazon_spider.py」というファイルが生成されます。

$ cd amazon

$ scrapy genspider amazon_spider amazon.co.jp

Created spider ‘amazon_spider’ using template ‘basic’ in module:

amazon.spiders.amazon_spider

$

生成されたamazon_spider.py

# -*- coding: utf-8 -*-

import scrapy

class AmazonSpiderSpider(scrapy.spider):

name = ‘amazon_spider’

allowed_domains = [‘amazon.co.jp’]

start_urls = [‘http://amazon.co.jp/’]

def parse(self, response):

pass

上記の「start_urls」という変数に、収集対象のページを指定すると、ここからクロールが開始されます。また、parse メソッド内にランキングを取得する部分の処理を実装します。

amazon_spider.py

# -*- coding: utf-8 -*-

import scrapy

class AmazonSpider Spider(scrapy.Spider):

name=’amazon_spider’

allowed_domains [‘amazon.co.jp’]

start_urls = [

‘https://www.amazon.co.jp/dp/4802611080’,

‘https://www.amazon.co.jp/dp/480261179X’

]

def parse(self, response):

ranking response.css(‘#SalesRank’)

yield {‘ranking’: ranking.get()}

ここでは「response」オブジェクトにある「css」というメソッドを使って、CSSセレクタを使用して項目を取得しています。Amazonのサイトでは、執筆時点では「<divid=”SalesRank”>」というタグの中に格納されています。このタグ内のテキストは、#SalesRankというCSSセレクタで取得できます。

最後に、「settings.py」を使ってリクエスト間隔などを指定します。プログラムでは何度も連続して読み込むことが可能ですが、頻繁にアクセスするとWebサーバーに負荷がかかります。

一般的には1秒から数秒あけてから次のページを読み込むことが推奨されています。

settings.py

DOWNLOAD_DELAY = 3

ここまでの内容で、試しに実行してみます。

$ scrapy crawl amazon_spider

{“ranking”: “<li id=\”SalesRank\”>\n<b>Amazon En D5%*>:</b>

\n\n\n\n\n\n\n\n\n\n\n\n\n\n# 197,586 fi (<a href=\”/gp/

bestsellers/books/ref=pd_zg_ts_books\”>ONS #3</a>)

In \n\n\n\n\n\n<style type=”text/css”>\n.zg_hrsr { margin: 0;

padding: 0; list-style-type: none; }\n.zg_hrsr_item { margin: 0

0 0 10px; }\n.zg_hrsr_rank { display: inline-block; width: 80px;

text-align: right; }\n</style>\n\n<ul class=\”zg_hrsr\”>\n

<li class=\”zg_hrsr_item\”>\n <span class=\”zg_hrsr_rank\”>

1203 (i </span>\n <span class=\”zg_hrsr_ladder\”>- <a href=\”/

gp/bestsellers/books/3229704051/ref=pd_zg_hrsr_books\”>

VJEDIJHXB</a></span>\n </li>\n</ul>\n\n</li>”},

{“ranking”: “<li id=\”SalesRank\”>\n<b>Amazon #n=) :</b>

\n\n\n\n\n\n\n\n\n\n\n\n\n\n# 352,671 11 (<a href=\”/gp/

bestsellers/books/ref=pd_zg_ts_books\”>#D#NDS 3</a>)

\n \n\n\n\n\n\n<style type=\”text/css\”>\n.zg_hrsr { margin: 0;

padding: 0; list-style-type: none; }\n.zg_hrsr_item { margin: 0

In

80px; text-align: right; }\n</style>\n\n<ul class=\”zg_hrsr\”>

<li class=\”zg_hrsr_item\”>\n

rank\”>1875 (i </span>\n

<a href=\”/gp/bestsellers/books/3229704051/ref=pd_zg_hrsr_books\”>

VOEDIJMX</a></span>\n

</li>\n</ul>\n\n</li>”}

]

実行すると、指定したページを取得し、標準出力にログとして出力されます。このログを見ると、正しく抽出できていることがわかります。

ファイルに出力したい場合は、次のように実行すると、抽出した内容だけが保存されます(実行するたびに取得した内容が追記されます)。

$ scrapy crawl amazon_spider -o ranking.json

Scrapy Cloud で自動実行する

Scrapyで収集する処理を作成しても、定期的に実行するのは面倒です。手元のパソコンでは24時間電源が入っていないこともあり、レンタルサーバーなどを借りて配置することもあります。Scrapy の 場 合、「ScrapyCloud(https://www.scrapinghub.com/

Scrapy-cloud)というクラウドサービスが提供されています。同時に1つのサイトを収集するだけであれば無料で利用できますし、定期的に実行し、その処理結果をダウンロードすることもできます。

「ブックマークレット」で「フォームに入力」する

「アンケートに答えているんですが、毎回住所や氏名を入力するのが面倒です。自動的に入力する方法はないでしょうか?」

『1つの方法として単語登録がありますね。「じゅうしょ」と入れて変換すると自宅の住所が入力されるようにするとか。』

「それも便利ですね。でも変換もせずに自動的に入力することはできませんか?」

『ブックマークレットを作ると、入力欄に設定されている名前などから自動的に入力することもできますよ。』

Web ブラウザでのフォームの入力を自動化する

オンラインショッピングなどで名前や住所、電話番号などを入力する作業は頻繁に発生します。また、Webアプリを開発している場合、フォームに入力して送信ボタンを押す、というテストを何度も実行することがあります。

毎回手作業で入力する方法もありますが、可能な限り自動化したいものです。このようなときにブックマークレットが使えます。ブックマークレットはWeb ブラウザのお気に入りに登録しておき、クリックするだけで簡単な処理を実行できるプログラムのことです。

例えば、次のような内容を記述したブックマークレットを作成しておくと、クリックするだけでページ内にある「phone_no」という名前のフィールドに電話番号を、「name」という名前のフィールドに名前を入力できます。

javascript:(() =>{let phone_no=document.querySelector(‘input[name=”phone_no”]’);

let name=document.querySelector(‘input[name=”

name”]’);if(phone_no) {phone_no.value=’090xxxxxxxx’;}if(name)

{name.value=’T.H ‘;}})()

このように、ブックマークレットは1行で書く必要があります。読みやすく書くと次のような処理です。上記では、JavaScriptのアロー関数を用いて短く記述していますが、以下では読みやすく無名関数で書いています。

function() {

let phone_no = document.querySelectors

‘input[name=”phone_no”]’

);

let name document.querySelector( (

‘input[name=”name”]’

プログラミングで自動化する

);

if (phone_no) {

phone_no.value = ‘090xxxxxxxx’;

}

if (name){

name.value = ‘T.H ‘;

}

}

存在しないフィールドの場合は無視できるため、一般的によく使われるフィールド名に対して順にセットする処理を書いておくと、さまざまなサイトで汎用的に使用できます。

ブックマークレットのブラウザへの登録作業を簡単にする

ブックマークレットをブラウザに登録する作業を楽にするには、次のようなHTMLファイルを用意しておくと便利です。このファイルを開いて、入力欄に「javascript:」から始まるソースコードを入力した後、リンクをブックマークバーにドラッグ&ドロップするだけでブックマークレットを作成できます。

<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”UTF-8″>

<title>ブックマークレット作成</title>

</head>

< <body>

<input type=”text”

onchange=”document.getElementById(‘bookmarklet’).href

this.value;”>

<a href=”” id=”bookmarklet” onclick=”return false”

data-role=”button”>ブックマークバーにD&D</a>

</body>

</html>

「SNS ボタンがないページ」を「ブックマークレットからシェア」する

TwitterやFacebookなどの各種SNSはシェアボタンを用意しています。これを設置しているWeb サイトであれば、ページ内にあるボタンをクリックすることで、ページのタイトルとURLを簡単にシェアできる仕組みになっています。

ところが、企業のトップページや昔ながらのサイトなど、シェアボタンを設置していないWebサイトは少なくありません。このようなページをシェアするきは、まずURLをコピーして貼り付ける、次にページのタイトルをコピーして貼り付ける、という2つの作業が発生します。タイトルをブラウザからコピーするのは面倒なので、URLだけコピーする、という人も多いかもしれません。

このような場合にもブックマークレットがあると便利です。例えば、現在表示し

ているページをTwitterでシェアしたい場合、次の内容のブックマークレットを登

録しておきます。

javascript:window.open(%22https://twitter.com/intent/tweet?status=%22+encodeURIComponent(document.title)+%22%20

%22+encodeURIComponent(location.href))

これをクリックすると、新しいウィンドウが開き、タイトルとURLがセットされ

た状態でTwitterの投稿画面が表示されます。ここにコメントなどを追加して投稿

するだけです。

はてなブックマークの場合は、次のような処理が公開されています。これを使うことで、簡単にブックマークできます。

javascript:(function()%7Bvar%20d=(new%20Date);var%20

s=document.createElement(‘script’);s.charset=’UTF-8′;s.

src=’http://b.hatena.ne.jp/js/Hatena/Bookmark/let.js?’+d.

getFullYear()+d.getMonth()+d.getDate(); (document.getElementsBy

TagName(‘head’)%5B0%5D%7C%7Cdocument.body).appendChild(s);%7D)

();

「ブックマークレット」で「Webページを簡単に修正」する

「プレゼン資料を作っているんですけど、スクリーンショットを取得したら広告も入っちゃって。画像処理ソフトで加工しているんですが、なかなか面倒なんです。」

『スクリーンショットを取る前にWebサイトを書き換えちゃえばいいんじゃないですか?』

「でもWebページは閲覧するだけで書き換えられないですよね?」

『サーバー側のファイルは書き換えられませんが、手元で表示したあとはWebブラウザ内で書き換えられますよ。』

スクリーンショットの画像を後から編集するのは結構面倒

営業資料を作成しているときなど、Webページの画面のスクリーンショットを撮って、文書に挿入したい場合があります。ところが、そのページには広告がいくつか載っている。この広告部分だけを消したい、ということは珍しくありません。スクリーンショットを撮った画像を画像処理ソフトで開いて、その広告の部分を白塗りしたり、切り取ったりしている人が多いのではないでしょうか。単純な作業ではありますが、なかなか面倒な修正です。

このように、Webページに表示されている広告だけを簡単に除外できないかな、というように広告を消すだけでなく、ログイン中のユーザーの名前を変更したい、一部の文章の内容を変更したいという場面は少なくありません。画像処理ソフトでユーザー名の部分をぼかす加工をする方法もありますが、スクリーンショットを取得する前に書き換えておけると便利です。

表示されている Web ページを一時的に編集可能にするブックマークレット

このようなときにもブックマークレットが使えます。ページを書き換えるには、本文の「contentEditable」という属性のtrue とfalseを切り替えるだけです。

javascript:(b=>{b.contentEditable=!b.isContentEditable;})

(document.body);

このボタンを押すだけで、表示しているWebページの本文が編集モードに早変わりします。つまり、変更したいWebページを開いた状態で、このブックマークレットを実行すると、そのページ全体が書き換え可能になります。

カーソルを移動して広告部分を削除したり、一部のテキストを書き換えたりできます。もちろん、自分で管理していないWebページであっても可能です。サーバ一側にあるファイルが更新されているわけではありませんので、他の人には影響を与えません。

さらに、このブックマークレットをもう一度実行すると、今度は書き換え不可に

戻ります。つまり、書き換え可能な状態と書き換え不可能な状態を交互に切り替え

ることができるのです。

「ブックマークレット」で「HTML のソースを表示」する

スマートフォンの Web ブラウザで HTML のソースを表示したい

パソコンで使う Webブラウザでは、HTMLの内容を確認したい場合に開発者モードなどを使用して HTMLのソースを表示できます。HTMLに関する知識があれば、他のWebサイトがどのような構成になっているのか勉強にもなりますし、自分が管理しているWeb サイトであれば、表示が崩れているときに原因を調査するために使うこともあります。

しかし、パソコン以外の環境では HTMLのソースを表示できないブラウザが増えています。例えば、iPhoneのSafariでHTMLのソースを表示しようと思っても、メニューにソースを表示する機能はありません。

もちろん、多くの利用者にとって HTMLのソースを見る必要はなく、不要な機能ではあるのですが、開発者の視点ではHTMLのソースを表示したいことは少なくありません。

HTML のソースを表示するブックマークレットを作成する

そこで、スマホなどでWebページを閲覧中に、そのページのHTMLソースが見たいときに使えるブックマークレットを紹介します。HTMLのソースを取得し、本文にセットするだけの処理です。

javascript:(() =>{ document.body.innerText%3D”%2Bdocument.

getElementsByTagName(‘html’)%5B0%5D.innerHTML%2B”;})()

HTMLのソースコードを表示したいWebサイトを表示した上で、上記のブックマークレットを呼び出すと、そのWebページのHTMLソースを表示できます。

なお、元のページの内容を表示したい場合は、再読み込みするだけですので、手

軽に使うことができます。

「ブックマークレット」で「パスワード入力欄の内容を表示」する

パスワードをメモするな、と言われたのは昔の話。多くのECサイトやSNSなどに登録していると、複数のIDとパスワードを使うことは当たり前になりました。

また、パスワードリスト攻撃などによる不正ログインを防ぐため、すべてのサービスで別々のパスワードを使うことが求められます。

このような状況では、すべてのIDとパスワードの組み合わせを覚えておくことは現実的ではありません。そこで登場するのがパスワード管理ソフトです。専用のソフトウェアだけでなく、Webブラウザにパスワードを記憶させておく方法は当たり前のように使われています。

パソコンだけでなく、スマートフォンやタブレット端末などでも同期できるものが多く、便利ではあるのですが、Webブラウザに保存させておくと、スマホアプリでログインするときに、どのようなパスワードを設定したのかわからなくなる場合があります。

このような場合に便利なのが、Webブラウザでパスワードの入力欄を見えるようにする機能です。Webサイトのパスワード入力欄は次のようなHTMLで作成されています。

<input type=”password” id=”password” name=”password”>

一方、ログインIDなどの入力欄は次のようなHTMLで作成されています。

<input type=”text” id=”user_id” name=”user_id”>

ここでポイントになるのは「type」属性の値です。これが「text」の場合は Webブラウザで入力された値を人が読める形で表示されますが、「password」の場合は伏せ字で表示されます。

つまり、パスワードを表示するには、inputタグの「type」属性を「password」から「text」に変えればよいのです。

これをブックマークレットで操作してみます。ブックマークとして、次の内容を登録します。

javascript:document.querySelector(‘input[type=”password”]’).

type=’text’

これを実行すると、表示しているページ内にあるパスワード入力欄がテキスト形式に変更され、入力されている内容が見えるようになります。つまり、ログイン画面を表示し、Webブラウザのパスワード管理機能でパスワードを入力した後、このブックマークレットを呼び出せばパスワードが表示されます。

ここで表示された値を見たりコピーしたりして、他のアプリのパスワード入力欄に入力すればOKです。

Emmetで「手早くコーディング」する

テキストエディタでの HTML のコーディングを効率化したい

Webページを作成するとき、初心者向けの便利なソフトは多く存在します。Word のような文書作成ソフトでも、Webページとして保存することで簡単に作成できます。とりあえずWebページを作成する、というだけであればこれでも十分ですが、Webアプリを作成する場合など、HTMLを直接編集することは少なくありません。

このようなとき、テキストエディタでHTMLタグを直接入力する必要があります。一文字ずつ入力しているとなかなか大変な作業ですが、テキストエディタには入力支援機能という便利な機能があります。開始タグを入力すると、自動的に終了タグを入力してくれたり、補完機能により候補を表示してくれたりする機能です。

Emmet でタグを効率的に入力する

最近のエディタでは、このような基本的な機能に加えてさまざまな補完機能が搭載されています。代表的なものに Emmet があります。EmmetはテキストエディタやIDEのプラグインとして配布されており、最近のテキストエディタの多くに対応しています。

Emmetを導入すると、「li*3」と入力してタブを押すだけで、次のようなタグが一気に入力されます。

<li></li>

<li></li>

<li></li>

また、IDやクラスなども指定できるため、次のように入力すると一気にメニューのようなタグを生成できます。

nav>ul#menu>li*5>a[href=#].button

上記を入力したときに生成されるタグは次の通りです。

<nav>

<ul id=”menu”>

<li><a href=”#” class=”button”></a></li>

<li><a href=”#” class=”button”></a></li>

<li><a href=”#” class=”button”></a></li>

<li><a href=”#” class=”button”></a></li>

<li><a href=”#” class=”button”></a></li>

</ul>

</nav>

これを使うと、HTMLの入力が非常に高速になります。また、開始タグと終了タグの対応ミスなども防げます。

また、「!」と入力するだけで、HTMLのDOCTYPE宣言からHTMLのテンプレートまで一括で入力できます。たった1文字入力してタブを押すだけで、次のようなHTMLを生成できるのです。

<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”UTF-8″>

<title>Document</title>

</head>

<body>

</body>

</html>

もちろん、生成される内容は設定ファイルで書き換えることもできるので、自分の好きな内容を設定しておくと、数文字の入力でHTMLファイルの大部分を作成できます。

Emmet は CSSでも利用できる

これはHTMLに限った話ではありません。例えば、HTMLのデザインに使われるCSSでも Emmetを使えます。標準で用意されているものは頭文字を並べて使うも

のが多くあります。

例えば、CSSでは文字列をセンタリングするために「text-align: center」という指定を使いますが、この場合はそれぞれの先頭文字を取って「tac」と入力します。

その後、タブを入力すると「text-align: center」と展開されます。

同様に、表のような指定を私はよく使います。このような記法を覚えておくと、プロパティの名前が長くても入力ミスすることを防げます。

入力する内容

cl　 clear: both;

d　 display: block;

m:a　 margin: auto;

p  padding: ;

ffm  font-family: monospace;

bd  border: 1px solid #000;

c  color: #000;

終わりに

プログラミングや自動化は、あくまで手段です。大切なことは、目の前の業務をもっと簡単に効率よく、さらにほかの人も応用できるようにならないか？と考え抜くことです。

様々な環境構築が簡単にできる今、エンジニアとして転職したり、プラットフォームや画期的なアプリを開発することは容易ではありません。競争が激しすぎます。

まずは、今の業務の効率化から考えてみてください。