ロフトワークの今を伝えるブログメディア

退屈なこと(CMS登録作業)はブラウザ自動操作にやらせよう

CMS登録作業

CMS導入案件では、さまざまな登録作業が発生します。
1ページのコンテンツだけでも、下記のような構成要素を登録する必要があります。

  • タイトル
  • 本文
  • 概要文
  • キーワード
  • カテゴリー
  • タグ
  • 関連リンク
  • 公開日
  • ファイル名
  • メインビジュアル(画像ファイル)
  • PDFファイル

などなど…
他にも、権限やワークフローなどの設定もあります。

本文の登録がいちばん大変ですが、それ以外にも多くの要素を登録しなければなりません。
最近は、一括登録機能を持ったCMSもありますが、全ての要素を簡単に登録できる訳ではありません。

例えば、過去数年分の活動記録(100ページ)の移行作業。
1ページごとに決まった画像ファイルを2〜3枚登録するだけの簡単なお仕事です。

100ページ x 3分(180秒) = 18000秒 = 300分 = 5時間

心を無にして、機械になりきって、5時間マウスをクリックし続ければ終わります。
ただ私は、こういう登録作業を延々やって腱鞘炎になった過去があります。

CMS自動操作

腱鞘炎はつらいので、楽な方法が無いか考えました。

ブラウザを自動操作できるようになったので、当然CMSも自動操作できるわけです。

  1. ログイン画面を表示
  2. アカウントとパスワードを入力
  3. ログインボタンをクリック
  4. 管理画面を表示
  5. 該当コンテンツの編集画面を表示
  6. 画像ファイルを登録するカスタムフィールドを特定
  7. 該当カスタムフィールドに画像ファイルのファイルパスを指定
  8. 保存(もしくは、下書き、公開)ボタンをクリック

(5.〜8.を必要なだけ繰り返す)

こんなプログラムを書いてしまえば、あとは勝手に作業をしてくれます。
しかも、プログラムを実行している間、別の作業までできます。
(実際にプログラムを実行しながら、このブログを書いてます)

 

 

画像ファイル3枚登録するプログラム(もちろん抜粋版)

#画像1
num = "01"
if @worksheet[$row, 11] != ""
$path =  PATH + @worksheet[$row, 11]
@driver.find_element(:xpath, "//img[contains(@src, 'gokansai#{num}.png')]").click
sleep 1
@driver.find_element(:xpath, "//div[./img[contains(@src, 'gokansai#{num}.png')]]/following-sibling::div/following-sibling::div//input[@type='file']").clear
@driver.find_element(:xpath, "//div[./img[contains(@src, 'gokansai#{num}.png')]]/following-sibling::div/following-sibling::div//input[@type='file']").send_keys $path
else
@driver.find_element(:xpath, "//img[contains(@src, 'gokansai#{num}.png')]").click
sleep 1
img = @driver.find_element(:xpath, "//div[./img[contains(@src, 'gokansai#{num}.png')]]/following-sibling::div//img[contains(@src, 'delete.gif')]")
script = "return arguments[0].click()"
@driver.execute_script(script, img)
begin
alert_box = @driver.switch_to.alert
alert_box.accept
rescue Selenium::WebDriver::Error::NoSuchAlertError
false
end
end
@driver.find_element(:xpath, "//input[@type='image' and contains(@src, 'hozon.gif')]").click
sleep 3

 

別のCMSですが、新規に記事を作成して指定のタイトル、概要文、キーワードなどを記入して保存するプログラム(抜粋版)

# 新規記事
@driver.get("https://hoge.jp/cgi-bin/mt/mt.cgi?__mode=view&_type=#{@worksheet[$row, 4]}&blog_id=#{@worksheet[$row, 5]}")
sleep 10
@driver.find_element(:id, "title").clear
@driver.find_element(:id, "title").send_keys @worksheet[$row, 6]
puts "title #{@worksheet[$row, 6]}"
@driver.find_element(:id, "excerpt").clear
@driver.find_element(:id, "excerpt").send_keys @worksheet[$row, 7]
puts "description #{@worksheet[$row, 7]}"
@driver.find_element(:id, "keywords").clear
@driver.find_element(:id, "keywords").send_keys @worksheet[$row, 8]
puts "keyword #{@worksheet[$row, 8]}"
@driver.find_element(:id, "mt-set-basename").click
@driver.find_element(:id, "basename").clear
@driver.find_element(:id, "basename").send_keys @worksheet[$row, 8]
puts "basename #{@worksheet[$row, 8]}"
@driver.find_element(:xpath, "//*[@id='entry-publishing-widget']//button[@name='status' and @type='submit']").click
sleep 10
puts @driver.current_url
@worksheet[$row, 9] = @driver.current_url
@worksheet.save

人工知能は移行自動化の夢を見るか?

サイトリニューアルのときに、既存ウェブサイトのコンテンツを新しく構築したCMSに登録する作業を、夜中にこっそりやってくれる小人さんいてくれたら、どれだけ嬉しいか。
いないなら、小人さんを作ればいいわけです。

どんな小人さんをつくればいいか?
最低でも、目と頭と手が必要です。

  • 目:既存ウェブサイトのコンテンツを見出し、本文、表組みなど細かな要素として見る
  • 頭:既存ウェブサイトのコンテンツの各要素が、新しいサイトのデザインのどの要素に当てはまるかを決める
  • 手:頭が決めた通りに既存ウェブサイトの各要素を、CMSの決められた項目に登録する

どう実現するかは、下記のようになります。

  • 目と頭:オブジェクト認識ができる人工知能(ただし学習済みであること)
  • 手:ブラウザ自動操作、もしくはData API、Rest API、WP-CLIなどなど

結論としては、ウェブサイトを見て「この要素は見出し」「この要素は表組み」などと人間に代わって判断してくれるモノがないといけません。
しかし、ウェブサイト内の要素を認識させるための学習データの作り方さえ分かってしまえば、移行作業をやってくれる小人さんの頭脳が出来あがるのは、あながち夢というわけでもなさそうです。

 

なお、ただのCMS登録作業が苦手なオペレーターですので、プログラムが分からないとか、人工知能をつくれとか難しいことは言わないでください(ΦωΦ)

川竹 敏晴 川竹 敏晴

大学卒業後、システム開発会社にエンジニアとして勤務。Java等を用いて大小様々なWeb系システムを開発。その後、Web制作会社にて数多くのCMS導入案件の開発を担当したのち、2011年にロフトワーク入社。主にCMS導入案件の技術的なサポートを担当している。自他共に認めるCMS好きで、日々新しいCMSの研究を行なっている。>>プロフィール詳細

関連記事