[kintone小話] アイコンをダウンロードして使いたいオックーダとその尻を叩くモコトン
登場キャラクター
オックーダ
怠け者の妖怪で『億劫』が口癖。親近感を覚える。
モコトン
快活で前向きで誰にでもそうさせようとしてきて怖い。
オックーダの尻を叩くモコトン
オックーダ: ふう、今日もまた長い一日になりそうだ…。このkintoneシステムの構成図を完成させないといけないのか。本当に億劫だ。
モコトン: オックーダ、大丈夫！ 構成図が終われば、また新しいステップに進めるよ！さあ、アイコンはもうダウンロードした？
オックーダ: えー、ダウンロードはしたよ。でも、１つダウンロードして、構成図に貼り付けたけどさ、また別のアイコンをダウンロードしなくちゃいけなくなって、またダウンロードしたけど、またまた他のアイコンが必要になってさ….同じことを何度も繰り返していて疲れたよ。
モコトン: そっかー、んー、でもね、こういう作業って意外と何かを学ぶチャンスだったりするんだよ。例えば、効率的な作業方法を見つけることができたり、自動化の便利さを感じることができるかもしれないし。
オックーダ: モコトンはいつでもポジティブで怖いね。でも、今はただただ億劫なだけだよ。
モコトン: 実はね、AIを使えば、その作業をもっとラクにできるかもしれないよ。
オックーダ: AIねぇ…ほんとに楽になるの？ どうやるの？
モコトン: じゃあ、一緒にやってみよう！ AIの使い方なんてそれこそAIに聞いてしまえばいいんだ。うまくいけば、この億劫な作業もすぐに終わるかもしれないし、次に進めるよ！
オックーダ: なるほどね、AIに聞け、か。とことん怠けられて素敵だ。モコトン、ありがとう。少しやる気が出てきたよ。
モコトン: それが聞けて嬉しいな！さあ、一緒にこの億劫な壁を乗り越えよう！
標準アイコンの一括ダウンロード
オックーダ: （パソコンの画面を見ながら）モコトン、これからアイコンのHTMLを抜き出す作業を始めるよ。kintoneでアイコンの変更ダイアログを開けばいいんだね？
モコトン: そうだね！kintoneにアクセスして、アプリ作成画面からアイコンを変更しようとするとダイアログが開くよ。それが始まりだね。
オックーダ: CLICK! CLICK! うん、ダイアログが開いた。次はアイコンを右クリックして…開発者ツールだっけ？
モコトン: その通り！ 開発者ツールの『</>要素』タブを開いて、HTMLを表示させるんだ。マウスカーソルを重ねたときにアイコンパレット全体が青くフォーカスされるノードを見つけてね。
オックーダ: これかな？ああ、見つけた！
モコトン: そうそう、そこで右クリックして、「コピー > outerHTMLをコピー」を選ぶんだ。それでHTMLがクリップボードにコピーされるよ。
オックーダ: outerHTMLをコピーした。これをどうしたらいいんだ？
<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>モコトン: ここでAIの出番だ！ ChatGPTでもClaude3でもいいからHTMLをそのまんまペーストして、『png画像のURLをリストアップして』と依頼するだけさ！ これでアイコンの直リンクURLを一気に取り出せるんだ。
オックーダ: ダウンロードしたアイコンを保存しておけば、必要になったらいつでも使えるね。なんだか、ちょっと楽しくなってきたかも。
モコトン: ほらね、一緒にやれば何でも乗り越えられるよ！次はこのアイコンをどう活用するか、考えてみよう！
オックーダ: あれ、ちょっとまって、このURLからpng画像をダウンロードするのはやっぱり手作業なんじゃないの？ 億劫だなぁ…
モコトン: もちろん、それもAIに聞いたらいいよ。このURLのリストをすべて一括でダウンロードしたいから、pythonスクリプトを書いて、とか、powershellのバッチファイルを書いて、とか、wgetでダウンロードするシェルスクリプトを書いて、とか、なんでも教えてくれるよ。
オックーダ: 「一括ダウンロードする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)
モコトン: 保存したフォルダの場所を忘れないようにね。Windowsならフォルダをクイックアクセスにピン留めができるから、いつでもアイコンを使いたいときに呼び出すことができるようになったよ！
オックーダ: こんなに楽ができる余地が残ってたんだね、怠けられたはずの時間を無駄にしていたよ。ありがとう！
ネタ元
この記事が気に入ったらサポートをしてみませんか？