[kintone] ChatGPTと過ごす日常業務！ 標準アイコンの一括ダウンロードを手伝ってもらおう
こんにちは、キン担ラボの本橋です。
ある日のことです。kintoneのシステム構成図を書こうと、作ったアプリのアイコンをせっせとキャプチャしてdraw.ioに取り込んでいました。
この手順…何回目だろうと思いながらWin+Shift+Sのコンビネーションを入力していると不意に頭の中に『ドント・リピート・ユアセルフ！』と達人プログラマーの声が響きました。自動化の時間です。
こうなると46個のkintone標準アイコンを全部ダウンロードしないことには頭の中の達人プログラマーは黙りません。構成図どころじゃない。
少し考えて、素直に攻略するならアプリカスタマイズ画面のHTMLを書き出して、*.pngファイルのURLを正規表現で取り出せば、あとはwgetかなんかでダウンロードして終わりそうです。
でも最初の思いつき通りに作っても面白くないのでChatGPTのお手並み拝見と洒落込んでみました。
そういうのいいから手軽にアイコン全部のダウンロード手順を教えてよ、とのお方は「おまけ」まですっ飛んでもらえたら幸せになれるかと思います。
抜き出し対象となるHTMLのコピー手順
手順は以下の通り。3ステップで取り出せます。
ブラウザからアイコンの変更ダイアログを開く
普段お使いのkintoneにアクセスして下さい。アプリ作成画面からアイコンを変更しようとするとこのおなじみのダイアログが開きます。
ここからアイコン画像をダウンロードしたいと思います。
アイコンを右クリックしてコンテキストメニューから開発者ツールを開く
アイコンパレットのouterHTMLをコピーする
開発者ツールの上部にあるタブ『</>要素』を選びます。HTMLが表示されますので、カーソルを移動させて下のキャプチャ画像のようにアイコンパレット全体が青くフォーカスされるノードを探してください。
そこで右クリックしてコンテキストメニューを開いて、『コピー > outerHTMLをコピー』を実行すると下記のHTMLがクリップボードに入ってきます。（改行なしでズラーッと長くコピーされます）
<div class="gaia-argoui-admin-app-flow-app-icon-select"><span class="ocean-ui-imageselect-item ocean-ui-imageselect-item-selected" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/appTableBlue.png"); user-select: none;" aria-selected="true"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/document.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/bargraph.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/laptop.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/disk.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/calculator.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/clipboard.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/printer.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/binder.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/clock.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/fileholder.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/userpass.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/openmail.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/mail.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/piegraph.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/linegraph.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/cup.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/pin.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/clip.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/smartphone.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/telephone.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/businessbag.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/calendar.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/megaphone.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/pencil.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/mouse.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/flash.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/equipment.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/wallet.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/piggybank.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/creditcard.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/payment.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/glasses.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/soroban.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/cashbox.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/diamond.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/balloon.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/thinkingballoon.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/tool.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/cloudup.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/gear.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/lock.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/chemistry.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/research.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/gasstation.png"); user-select: none;" aria-selected="false"></span><span class="ocean-ui-imageselect-item" style="background-image: url("https://static.cybozu.com/contents/k/image/icon/app/percent.png"); user-select: none;" aria-selected="false"></span><div class="ocean-ui-imageselect-blobitem" aria-selected="false"><div id="iconKey-container" class="input-file-cybozu"><div id="iconKey-droppable" class="input-file-droppable-cybozu" style="display: none;"><div id="iconKey-droppable-text" class="input-file-droppable-text-cybozu">ここにファイルをドロップします。</div></div><div id="iconKey-filelist-update" class="input-file-filelist-cybozu"></div><div id="iconKey-filelist" class="input-file-filelist-cybozu input-file-filelist-list-cybozu"></div><a id="iconKey-browse" class="plupload-button-cybozu" href="javascript:void(0)" tabindex="-1"><span class="plupload-button-text-cybozu">参照</span><div id="p1hka2fdla6ru1itf20h12ansvb0-html5-container" class="plupload html5" style="display: inline-block;"><input id="p1hka2fdla6ru1itf20h12ansvb0_html5" type="file" accept="" style="width: 100%;"></div></a><p class="input-constraints-cybozu">(最大800 KB)</p></div></div></div>これをChatGPTにそのままぶん投げてみましょう。GPT-4だと解説が加わるし遅いので、GPT-3.5のほうがおすすめです。
各種AIさんにリストアップをお願いしてみた結果
プロンプトは以下のとおりです。
httpsから始まるpng画像のURLをすべて抜き出して下さい。
（ここにさきほどのHTMLを貼り付ける）
[成功] ChatGPT(GPT-3.5)にリストアップさせる
以下は、提供されたHTMLコードから"https://"で始まるPNG画像のURLを抜き出したものです。https://static.cybozu.com/contents/k/image/icon/app/appTableBlue.png
https://static.cybozu.com/contents/k/image/icon/app/document.png
https://static.cybozu.com/contents/k/image/icon/app/bargraph.png
https://static.cybozu.com/contents/k/image/icon/app/laptop.png
（後略）
46件のURLをすべて抜き出してくれました。素晴らしいですね。これまでだったら正規表現を書いてピックアップしていたところです。簡単なテキスト処理ならまるごとGPTにぶん投げるだけで完了してしまいました。
このような『一定のパターンに従う文字列を全部抜き出したい』というタスクは、これまでもコードが書ける人だったら一瞬で終わらせることができましたが、ChatGPTがいてくれたらコードを書かなくとも一瞬で終わらせることができます。なんて素晴らしい。
[失敗] Bardにリストアップさせる
Google Bardはどうでしょうか。同じプロンプトで試してみました。
I'm sorry. I'm not able to access the website(s) you've provided. The most common reasons the content may not be available to me are paywalls, login requirements or sensitive information, but there are other reasons that I may not be able to access a site.
😗「日本語で」
申し訳ありませんが、提供いただいたウェブサイトにアクセスできません。コンテンツが私に利用できない最も一般的な理由は、有料会員制、ログインが必要、または機密情報である場合ですが、他の理由でサイトにアクセスできない場合もあります。
具体的には、提供いただいたウェブサイトは、サイボウズ株式会社が提供するクラウド型ビジネスアプリケーション「kintone」の管理画面です。この管理画面は、kintoneのユーザーが利用するものであり、一般ユーザーがアクセスすることはできません。そのため、私にはアクセスできません。
もし、このウェブサイトのコンテンツにアクセスしたい場合は、kintoneのユーザー登録をして、ログインする必要があります。
こちらの意図を汲み取ってくれませんでした。あれこれプロンプトをいじって挑戦してみましたがダメみたいです。Gemini世代に期待しましょう。
[失敗] Claudeにリストアップさせる
コピペするとPasted contentという添付ファイルになりました。そのまま処理をさせてみたところ、ClaudeはURLを見つけることができませんでした。
残念。
アイコンをローカルにダウンロードする
URLのリストができてしまえばあとは簡単です。慣れている方はwgetとかを使ってバッチファイルを書いてしまってもいいですね。
今回は同じようにChatGPTさんにpythonスクリプトの作成を依頼してみました。
import requests
import os
# ファイルパス（URLリストが含まれるテキストファイル）
file_path = 'list.txt'
# ダウンロードしたファイルを保存するディレクトリのパス
download_directory = 'your_download_directory/'
# ディレクトリが存在しない場合は作成
if not os.path.exists(download_directory):
os.makedirs(download_directory)
# ファイルを読み込んで、各URLからファイルをダウンロード
with open(file_path, 'r') as file:
for url in file:
url = url.strip() # 末尾の改行を削除
if url:
response = requests.get(url)
if response.status_code == 200:
# ファイル名をURLから取得
filename = url.split('/')[-1]
# ファイルを指定したディレクトリに保存
with open(os.path.join(download_directory, filename), 'wb') as f:
f.write(response.content)
このスクリプトはlist.txtというファイルにURLの一覧を保存している想定で動作します。
これで完了です。
あとはいつもの作図ツールに取り込んで使ってください。
ハバナイスキントーン！
おまけ
手順が面倒だから結果だけほしいよ！という方は、アイコンダイアログを開いた時点で開発者ツールのコンソールから以下のコマンドを打ち込んでもURLリストを得ることができます。
const container = document.querySelector('body > div.gaia-ui-dialog-container > div > div > div > div.gaia-ui-dialog-body > div');
if (container) {
Array.from(container.getElementsByTagName('span')).forEach(span => {
const urlMatch = span.style.cssText.match(/url\("([^"]+\.png)"\)/);
if (urlMatch) {
console.log(urlMatch[1]);
}
});
} else {
console.log('指定されたセレクタに一致する要素が見つかりませんでした。');
}Edgeでは以下のWarningがでて実行できませんでした。allow…のコマンドを打ち込むことで回避はできますが、物々しいこと書いていますね。
Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘allow pasting’ below to allow pasting.
こちらは適切にご理解いただいた上でご利用下さい。
この記事が気に入ったらサポートをしてみませんか？