仕事と婚活と私～ITエンジニアの末路～

仕事(IT/SE)・婚活・ツイッターの話とか、いろいろ　TW:@mara_ashida_

MENU

【IT】サイトのURLとタイトルを即時コピー！調査作業が少し楽ちん！　ブックマークレット/Bookmarklet/JavaScript

IT JavaScript RPA 非エンジニア

ご無沙汰しております。。



毎日パンツをはく暇がないほど、下半身事情が多忙な 芦田マラちゃん(@mara_ashida_)です！



どう？



皆さんは、フニャフニャのチンチンとカサカサの膣に潤い与えてる？



砂漠化が止まらない？haha



さてね。

目次・流れ

No タイトル
1 概要/目的【URL管理の徹底！！！】
2-1 【非エンジニア向け】登録・利用方法
2-2 【エンジニア向け】コード
3 解説・補足

https://cdn-ak.f.st-hatena.com/images/fotolife/m/maramara_ashida/20190804/20190804024602.png


No.1概要/目的【URL管理の徹底！！！】

背景

エンジニアの方は、技術に関して調査する際、
公式ドキュメントやらBlogを漁り、メモ(Excel・txtファイル等)に残すという作業を
少なからずしていると思います。


あるあるなのは「URLだけメモして、何に関するURLか失念してしまうこと」。


一度、URLにアクセスして中身を見ないとダメで、


都度都度「何だっけコレ？」つって開いていたら、チリツモ(塵も積もれば・・・)で結構時間もかかるし、


フラストレーションも溜まります。


また、下記記事の通り、調査において「URL管理」を徹底することは大切です。

[★コンサルが実践するリサーチのコツ - コンサルがすなるブログといふもの]

techhack.hatenablog.jp




テーマ

というわけで、【URL+サイトのタイトル】を最低限メモするという作業を私は心がけていますが、


今回は【ブックマーク】を押下して、【URL+サイトのタイトル】を同時に一瞬で取得する方法について記載します!!! 多分、地味に便利かも。

★テーマ

ブックマークレット (Bookmarklet)で【URL+サイトのタイトル】を一瞬で取得する方法 について記録します。

https://cdn-ak.f.st-hatena.com/images/fotolife/m/maramara_ashida/20190804/20190804023740.png

＜前提＞
・非エンジニアでもわかる(はず)
＜実行環境＞
・OS:Windows10
・ブラウザ：Chrome/Edge

No.2-1【非エンジニア向け】登録・利用方法

原理はどうでもいいから、方法だけ知りたい！という人向けの手順です。

No. 内容
1 何でもいいからBookmarkに登録する
2 登録したBookmarkを編集する
3 使ってみよう！


手順1【何でもいいからBookmarkに登録する】

下記手順で、どのサイトでもいいので、BookmarkバーにBookmark登録しましょう。

https://cdn-ak.f.st-hatena.com/images/fotolife/m/maramara_ashida/20190803/20190803202922.png


手順2【登録したBookmarkを編集する】

編集します。

https://cdn-ak.f.st-hatena.com/images/fotolife/m/maramara_ashida/20190803/20190803202931.png


名前は任意です。URLに下記、プログラム(下記No.1～3のいずれか)を丸々コピーし貼付けてください。例：No.1：Prompt(入力ボックス)で表示するタイプを選択

https://cdn-ak.f.st-hatena.com/images/fotolife/m/maramara_ashida/20190803/20190803202938.png

No.1：Prompt(入力ボックス)で表示

javascript:(function(){var title = document.getElementsByTagName('title')[0].text;title = '[★'+title+']\r\n'+decodeURI(location.href)+'\r\n\r\n';title = window.prompt('下記リンクとタイトルをコピーします。',title);if(title!=null){var target = document.createElement("textarea");target.value = title;document.body.appendChild(target);target.select();document.execCommand("copy")?true:alert('コピーできませんでした。');target.parentElement.removeChild(target);}})()

No.2：Confirm(確認メッセージ)で表示

javascript:(function(){var title = document.getElementsByTagName('title')[0].text;title = '[★'+title+']\r\n'+decodeURI(location.href)+'\r\n';msg='下記リンクとタイトルをコピーします。\r\n----------------------------\r\n' + title;if(window.confirm(msg)){var target = document.createElement("textarea");target.value = title;document.body.appendChild(target);target.select();document.execCommand("copy")?true:alert('コピーできませんでした。');target.parentElement.removeChild(target);}})();

No.3：自作のMessageBoxで表示

javascript:(function(){var title = document.getElementsByTagName('title')[0].text;title = '[★'+title+']\r\n'+decodeURI(location.href)+'\r\n';var w = ( screen.width-400 ) / 2;var h = ( screen.height-150 ) / 2;var myWindow = window.open("", "myWindow", "width=400,height=150"+ ",left=" + w + ",top=" + h);myWindow.document.write("<html>");myWindow.document.write("<style type=\"text/css\">body {background:lavenderblush;}::selection {background: palegreen;}</style>");myWindow.document.write("<body>");myWindow.document.write("<p>URLとタイトルを表示します。copyしてください。</p>");myWindow.document.write("<textarea rows=5 cols=50>"+title+"</textarea>");myWindow.document.write("</body></html>");myWindow.document.getElementsByTagName('textarea')[0].select();})();
No. 内容 動作環境
1 Prompt(入力ボックス)で表示 Chrome
2 Confirm(確認メッセージ)で表示 Chrome
3 自作のMessageBoxで表示 Chrome・Edge

No.1/2はEdgeやFirefoxで、コピー機能が動作しなかったため、 やむなく、自作のMessageBoxで結果のみ表示する機能を作成しました。


手順3【使ってみよう！】

どのサイトでもいいです。表示してから、登録したBookmarkを押下します。 POPUPにて「OK」を押下すると、【URL+サイトのタイトル】をコピーできます。

例：https://qiita.com/maimax/items/c5ac541be1d475c012cf

https://cdn-ak.f.st-hatena.com/images/fotolife/m/maramara_ashida/20190804/20190804024602.png




下記のような結果を取得できます。

[★【2017年8月】先輩エンジニアに聞いた信頼できる書籍まとめ - Qiita] https://qiita.com/maimax/items/c5ac541be1d475c012cf


仕様 内容
動作環境 Chrome
実行結果 ①【★タイトル】(改行コード)URL　②Copyに失敗したときはその旨のMessageを表示
Excelに貼付けたい場合、改行コード(\r\n)ではなく、タブ記号(\t)に変えてあげるといいと思います。
注意 URLに不正な文字があると動作しないことがあります(URLのDecodeでたまにエラーになります。)。

No.1～3の結果イメージはそれぞれ下記の通りです。

https://cdn-ak.f.st-hatena.com/images/fotolife/m/maramara_ashida/20190803/20190803212037.png

No.2-2【エンジニア向け】コード

No. 内容 動作環境
1 Prompt(入力ボックス)で表示 Chrome
2 Confirm(確認メッセージ)で表示 Chrome
3 自作のMessageBoxで表示 Chrome・Edge


改行を元に戻すと下記のようなコードになります。また、コメントも追記してます。

No.1：Prompt(入力ボックス)で表示

javascript:(function(){
//リンク取得＋整形
var title = document.getElementsByTagName('title')[0].text;
title = '[★'+title+']\r\n'+decodeURI(location.href)+'\r\n\r\n';

title = window.prompt('下記リンクとタイトルをコピーします。',title);

//コピー
if(title!=null){
    var target = document.createElement("textarea");
    target.value = title;
    document.body.appendChild(target);
    target.select();
    document.execCommand("copy")?true:alert('コピーできませんでした。');
    target.parentElement.removeChild(target);
}
})();

No.2：Confirm(確認メッセージ)で表示

javascript:(function(){
//リンク取得＋整形
var title = document.getElementsByTagName('title')[0].text;
title = '[★'+title+']\r\n'+decodeURI(location.href)+'\r\n';

msg='下記リンクとタイトルをコピーします。\r\n----------------------------\r\n' + title;

//コピー
if(window.confirm(msg)){
    var target = document.createElement("textarea");
    target.value = title;
    document.body.appendChild(target);
    target.select();
    document.execCommand("copy")?true:alert('コピーできませんでした。');
    target.parentElement.removeChild(target);
}
})();

No.3：自作のMessageBoxで表示

javascript:(function(){
//リンク取得＋整形
var title = document.getElementsByTagName('title')[0].text;
title = '[★'+title+']\r\n'+decodeURI(location.href)+'\r\n';

//自作MessageBoxの設定 ※中央寄せにするため、位置を計算
var w = ( screen.width-400 ) / 2;
var h = ( screen.height-150 ) / 2;
var myWindow = window.open("", "myWindow", "width=400,height=150"+ ",left=" + w + ",top=" + h);

//HTMLを作成
myWindow.document.write("<html>");
myWindow.document.write("<style type=\"text/css\">body {background:lavenderblush;}::selection {background: palegreen;}</style>");
myWindow.document.write("<body>");
myWindow.document.write("<p>URLとタイトルを表示します。copyしてください。</p>");
myWindow.document.write("<textarea rows=5 cols=50>"+title+"</textarea>");
myWindow.document.write("</body></html>");

//textareaを選択状態にする
myWindow.document.getElementsByTagName('textarea')[0].select();
})();

No.3 解説・補足

Bookmarkletの基本形式

Bookmarkletはウェブブラウザのブックマークなどから起動できるJavaScriptプログラムです。

javascript:(function(){
★--------好きなjavascriptのコードを書いてね--------★
})();


取得するサイト情報について
取得情報 内容
タイトル HTMLのtitleタグの情報を取得してます。
URL 日本語リンクの場合、Encodeされてしまうので、見やすいようにdecodeURIしてます。

なお、decodeURIは、不正な文字リンクの場合に失敗することがあり、回避方法がめんどくさいので、対応してません。


copy機能

No.1/2のプログラムは、Firefox(セキュリティが原因か？)やEdgeでは機能しなかったため、自作のMessageBoxで表示するタイプ(No.3)を作成しました。

copy機能は下記サイトを参考にしてます。軽く解説するとポイントは下記2点です。

Clipboard へ好きな文字列をコピーする

  • execCommand("copy")を使用するためには、textareaをbodyの下部(子要素)に作成し、select/選択する必要があります。その後、作成したtextareaを削除(removeChild)するということをしてます。
  • document.execCommand("copy")の返り値はtrue or falseです。
    「?」(条件 (三項) 演算子)で、trueの場合はtrueを返し、falseの場合は、alertを返してます。つまり、コピーに失敗した場合のみalertメッセージを表示してます。 
//コピー
if(window.confirm(msg)){
    var target = document.createElement("textarea");
    target.value = title;
    document.body.appendChild(target);
    target.select();
    document.execCommand("copy")?true:alert('コピーできませんでした。');
    target.parentElement.removeChild(target);
}


bookmarkletの手軽さ

qiita.com

Qiitaで探すと、結構色んなbookmarkletが出てきます。

Webブラウザで行う定型的な作業(検索・スクレイピング・入力)があれば、活用できると思います。

(エロ動画のDownloadリンクをスクレイピングして、Download画面を表示するなんてことも・・・・)

普段意識しない当たり前の作業を自動化・効率化することも検討してはいかがでしょうか？

以上。

[★C# で COM オブジェクトを作ってみる - Qiita]
https://qiita.com/tomochan154/items/1ce33f2aef167c0fed9d#1-8

[★VBAで扱えるDLLの作成]
https://excel.syogyoumujou.com/memorandum/dll_1.html

[★C#でVBA向けの.NETライブラリ（COMコンポーネント）を作成するには？ - ＠IT]
https://www.atmarkit.co.jp/fdotnet/dotnettips/1064combycs/combycs.html

[★忘れっぽいプログラマーの備忘録 .NetによるCOMの作成]
http://andromeda0626.blog.fc2.com/blog-entry-38.html

C:\Windows\Microsoft.NET\Framework\v4.0.30319\RegSvcs.exe /codebase C:\//////dll /tlb C:\//////////


[★VBAまたはVBSからCOM経由で使用できる.NETのライブラリの作成方法 - Qiita]
https://qiita.com/mima_ita/items/efcd1a6ea86f09047984

%BIN%\regasm  C:\dev\NMeCabCom\NMeCabCom\bin\Debug\NMeCabCom.dll /tlb /codebase


reg query HKCR\CLSID | find /i "{9F3DBFEE-FD77-4774-868B-65F75E7DB7C3}"

■DSの定義

[★【図解】コレ1枚でわかる統計学と機械学習の関係：ITソリューション塾：オルタナティブ・ブログ]
https://blogs.itmedia.co.jp/itsolutionjuku/2019/07/1_25.html
統計と機会学習

■通常の開発との違い
ドメイン知識
仮説・課題ありき
運用のしやすさ
各検定、人材像から必要なスキルを洗い出す
参考書・事例からものをつくる

■■■■■■■■■■■■■■■■■■■■■■■■■■
■有識者・ソース
■■■■■■■■■■■■■■■■■■■■■■■■■■
安宅和⼈
滋賀大学データサイエンス学部長　竹村　彰通
細谷 功
松尾豊

内閣府：AI戦略、AIガイドライン
滋賀大学データサイエンス学部
日本人工知能学会
データサイエンス協会
G検定、E検定

[★本当に知ってる!? リアルなデータ分析の世界~サイカのエンジニアが語る、話題の技術の「いま」と「未来」~]
https://www.slideshare.net/who_you_me/ss-73237524

http://www.news-postseven.com/archives/20140424_252628.html

総務省　総務省ICTスキル総合習得教材
https://www.soumu.go.jp/ict_skill/

第四次産業革命スキル習得講座認定制度

[★AI戦略 - 科学技術・イノベーション - 内閣府]
https://www8.cao.go.jp/cstp/ai/index.html


■外部の講座
インターネットを利用した大規模なオンライン講座であるＭＯＯＣ(ムーク)の仕組みを利用して、「高校生のためのデータサイエンス入門」「大学生のためのデータサイエンスⅠ、Ⅱ、Ⅲ」の４つの講座

[★無料で受講できる「ディープラーニング講座」を開講　日本ディープラーニング協会：「AIとは何か」「ディープラーニングによって何ができるか」を知る - ＠IT]
https://www.atmarkit.co.jp/ait/articles/2104/01/news031.html

[★無料で受講できる「統計オープンデータのデータ分析入門」　総務省が開講：「社会人のためのデータサイエンス入門」と併せて学習 - ＠IT]
https://www.atmarkit.co.jp/ait/articles/2101/14/news023.html


■アプローチのヒント
滋賀大学のデータサイエンス学部の人材像

IPA・企業の要件を調査する

一般社団法人データサイエンティスト協会

APIエコノミー、オープンデータ活用

■
AutoML

■定義
そもそもAI＞機会学習＞深層学習/Deep Learning


■データ分析
予測

■
https://www.datascientist.or.jp/common/docs/skillcheck_ver3.00.pdf
データサイエンス力
データエンジニアリング
ビジネス・ドメイン知識

[★データサイエンスとデータエンジニア]
https://www.slideshare.net/nagix/ss-62777080

[★最新業界事情から見るデータサイエンティストの「実像」]
https://www.slideshare.net/takashijozaki1/cb21-seminar130830-tjo-25765789?next_slideshow=1
    

■SlideShare
[★機械学習を「社会実装」するということ / Social Implementation of Machine Learning - Speaker Deck]
https://speakerdeck.com/moepy_stats/social-implementation-of-machine-learning

[★BrainPad (@brainpadpr) on Speaker Deck]
https://speakerdeck.com/brainpadpr

■社会実装
[★機械学習や統計学を「社会実装」するということ - 渋谷駅前で働くデータサイエンティストのブログ]
https://tjo.hatenablog.com/entry/2020/07/15/173000


■SQL
[★Oracle 10gの正規表現で文字列操作を極める：SQLクリニック（1）（1/2 ページ） - ＠IT]
https://www.atmarkit.co.jp/ait/articles/0502/24/news131.html

[★データハンドリングのためのSQL / SQL for data handling - Speaker Deck]
https://speakerdeck.com/brainpadpr/sql-for-data-handling?slide=124



■コードの保守性
https://ytknzw.github.io/PyCon/PyCon_mini_Hiroshima/%E3%83%87%E3%83%BC%E3%82%BF%E3%82%B5%E3%82%A4%E3%82%A8%E3%83%B3%E3%82%B9%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E3%82%B9%E3%82%B9%E3%83%A1_PyCon_mini_Hiroshima_20201010.pdf

http://www.scj.go.jp/ja/member/iinkai/kanji/pdf22/siryo198-5-5.pdf

Brainpad
[★機械学習]
https://ai.brainpad.co.jp/category/machine-learning/機械学習2/

[★入社1年目が教わる「はじめての人工知能」 第1回：人工知能（AI）とはなにか]
https://ai.brainpad.co.jp/1683/



[★なぜ「データ分析力」ではなく「データ活用力」が必要なのか？ これから身につけるべきスキルとは：MarkeZine（マーケジン）]
https://markezine.jp/article/detail/32135


[★ITSS+（プラス）・ITスキル標準（ITSS）・情報システムユーザースキル標準（UISS）関連情報：IPA 独立行政法人 情報処理推進機構]
https://www.ipa.go.jp/jinzai/itss/itssplus.html

[★データサイエンティストの仕事の流れを知ろう｜アクセンチュア]
https://www.accenture.com/jp-ja/data-scientist-training-for-women-part3


[★データの読み方 | データ分析基礎知識]
https://www.albert2005.co.jp/knowledge/statistics_analysis/statistics_basics/viewpoint

[★なぜAI時代に問題発見の重要性が増すのか？（細谷 功） | 現代新書 | 講談社（1/3）]
https://gendai.ismedia.jp/articles/-/71166