javascript」タグアーカイブ

導入から公開まで13時間!Chrome拡張機能の開発[2of6]

今回作成公開したChrome拡張のコード(ファイル)の構成を以下に示します。

Chrome拡張のコードの構成

HWISCooker
-	manifest.json
-	background.js
-	popup.js
-	popup.html
-	images
	-	HW_19.png
	-	HW_48.png
	-	HW_128.png
-	contentscript.js
-	jquery.js

となっています。

各ファイル(js, html, png)の役割はそれぞれのファイル名が示す通りですが、実際には「manifest.json」が全てを管理しており、役割とファイル名が関連付けられています。

Manifest.jsonのソースコード

{
  "name": "HWISCooker",
  "version": "1.0",
  "description": "Tired of putting your info. eternaly? Use HWISCooker!",
  "icons": {
    "19" : "images/HW_19.png",
    "48" : "images/HW_48.png",
    "128" : "images/HW_128.png"
  },
  "page_action": {
    "default_icon": "images/HW_19.png",
    "default_title": "HWISCooker",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["jquery.js", "background.js"]
  },
  "content_scripts": [ {
    "matches": ["https://www.hellowork.go.jp/servicef/130020.do*"],
    "js": ["jquery.js", "contentscript.js"],
    "run_at" : "document_idle",
    "all_frames": false
  }],
  "manifest_version": 2
}

上記構成で示したファイル名の内、「manifest.json」に明記されないのは「popup.js」だけですが、これはpopup.html内で参照されているからOKなのでしょう。また、jQuery等の補助スクリプトを使いたい場合には、「manifest.json」に明記するようです。

(つづく>>>)

関連する記事

導入から公開まで13時間!Chrome拡張機能の開発[1of6]
導入から公開まで13時間!Chrome拡張機能の開発[2of6]
導入から公開まで13時間!Chrome拡張機能の開発[3of6]
導入から公開まで13時間!Chrome拡張機能の開発[4of6]
導入から公開まで13時間!Chrome拡張機能の開発[5of6]
導入から公開まで13時間!Chrome拡張機能の開発[6of6]

お世話になったリンク

Chrome Extensions API リファレンス
Sample Extensions – Google Chrome Extensions
ぷりんすの開発メモ: Chrome拡張機能のマニフェストVesrsion2対応についてのメモ
ChromeExtensionを作ってみる | ぼんぼるにっき
Chrome Extension でデバッグを行う – 日頃の行い
ハローワークの「求人情報検索」ページ

(つづく)

結構楽になったかも!?「ハロワの求人情報検索」ページ簡単設定

友人に頼まれて急遽作成した記事になりますが、就活・創出的転職・早期退職等で苦労されている方々に捧げます。

作成の動機は、ハローワークの「求人情報検索」ページは、ログインが出来ないため、検索のためにこのページにアクセスする度に、毎回同じ情報を入れる必要があると理解しました。
#もしかすると自分のWindowsOSの版数が古いせいかも知れませんが。。。

そこで、「求職番号」等毎回同じ情報を入れる手間を省けるようにする工夫を、自分のPCやスマホに施す方法を模索してみました(ネットカフェやハローワークの端末では設定しない方がいいかもです)。以下その説明です。

「秘技:Chrome拡張」で、検索の条件設定がより簡単になりました!

PC版Chromeユーザの方であればChrome拡張機能が便利です。本ブックマークレット方式に比べ導入や設定が格段に容易になりました。

HWISCooker_300x210

Chrome拡張機能リンク先:Chrome ウェブストア – HWISCooker

HWISというChrome拡張の名前の由来ですが、HWISはハローワークインタネットサービスの略。Cookerは、設定情報の保存方式として最初Cookieで実装できないか考えていたのでCookerとしましたが、パソコンへの保存方式としては結局HTML5のlocalStorageを使っています。「Cookie」ではなく「Cooker」としましたが、ちょっと違ったかも。

使い方は簡単

使い方は簡単です。

  1. 本Chrome拡張をインストールする
  2. ハローワークの「求人情報検索」ページにアクセスする。その際オムニバーの右端にアイコンが出ます
  3. アイコンをクリックすると上図のようにポップアップWindowが現れます。このWindowには「書き出し」「読み込み」「クリア」のボタンがあります
  4. 固定的に入力する情報(テキスト、番号、選択)を入力します(ラジオボタンも忘れずに)
  5. アイコンをクリックして「書き出し」ボタンをクリックします。お使いのパソコンに情報が保存されます
  6. 次回のページアクセス時にアイコンをクリックして「読み込み」ボタンをクリックします。お使いのパソコンに保存されていた項目が自動で設定されます

関連する記事

導入から公開まで13時間!Chrome拡張機能の開発
ちょっとは楽になったかも!?「ハローワークの求人情報検索」ページ簡単設定[1 of 3]
ちょっとは楽になったかも!?「ハローワークの求人情報検索」ページ簡単設定[2 of 3]
ちょっとは楽になったかも!?「ハローワークの求人情報検索」ページ簡単設定[3 of 3]

お世話になったリンク

ハローワークの「求人情報検索」ページ

以上です。

導入から公開まで13時間!Chrome拡張機能の開発[1of6]

先日本ブログにて公開した「ハロワ求人情報検索ページの設定を容易にする」ブックマークレットですが、これをChrome拡張機能として実装してみました。公開も。以下その経験談です。

ブックマークレットは作成も導入も敷居が高い

先日本ブログにて公開したブックマークレットについてですが、「作る」にも「使う」にも、やはり結構敷居が高いなあと感じました。

グーグルの「Chrome」ブラウザであればブックマークをPCとスマホで同期できるので、Android系スマホはまだいいのですが、iOS系の「Safari」にいたってはブックマークレットをそう簡単には導入できません。
私自身は、結構前からiPhoneでも「Chrome」ブラウザに乗り換えましたので、今は特にそうした苦悩はありませんが、PCにしてもスマホにしてもブックマークレットの場合、実装できるコード量や使える機能が限られるので自由度が低いと正直思いました。

それに比べるとChrome拡張機能と呼ばれるアプリ(?)の場合、できそうなことがいっぱいありそうです。逆にできないことって何があるだろうと考えるくらいです。

前々から「プラグインのようなものの開発」に憧れが...

前々から「プラグインのようなものの開発」に憧れていたこともあり、Chrome拡張機能についてちょっと勉強してみました。

「Chrome拡張機能」については使う側としての知識しかありませんでした。しかも1、2個使う程度でしたので、2,3個使っているブックマークレットの方が使う側としても上でした。そこで、まず、「Chrome拡張機能とは何?」というところからのスタート。Google先生んちを訪ねても、系統だったものどころか、あまりまとまった情報を扱っていないように感じていたところに、

Chrome Extensions API リファレンス

のページに出会い、理解が一気に深まりました。情報がちょっと古いような感もありますが、ここ秀逸です。「Chrome拡張機能とは」から「コンテントスクリプトと拡張ページのメッセージ通信」まで丁寧な説明があります。

ブックマークレット方式の欠点を改善してくれる

そのページ中の、ページアクションの説明のところで、対象ページに対して情報を抽出したり情報を書き込んだりできることが書かれており、これは正に先日ブックマークレットにして公開した機能そのもので「本当はこういうふうにしたかったんですよ!」でした。

もともとブックマークレット方式には、パソコン初心者の方等に使っていただくには、大きな欠点があります。

  1. 設定情報の編集からブックマークレット化までの処理が煩雑
  2. リアルタイムで設定情報を更新できない。一つ目のポイントのように、予め固定的な情報のみを編集してもらってそれをブックマークレットに変換後登録して使う、というものなので当然といえば当然ですけれど。

等になります。

Chrome拡張機能だと、非常に制約が少なく、逆にコンテントスクリプトのように拡張部分と処理対象ページとの3者が独立していてコード作成上の副作用が少ないように感じました。

13時間掛けてChrome拡張を開発しWEBストアへ公開した

結局13時間掛けてChrome拡張機能の開発方法デバッグ方法について調べながら、

ちょっとは楽になったかも!?「ハローワークの求人情報検索」ページ簡単設定[1 of 3]

にあるようなブックマークレットで実装した機能(+アルファ)をChrome拡張機能として実装してみました。

HWISCooker_300x210

Chrome拡張機能リンク先:Chrome ウェブストア – HWISCooker

HWISはハローワークインタネットサービスの略。Cookerは設定情報の保存方式として最初Cookieで実装できないか考えていたのでCookerとしましたが、パソコンへの保存方式としては結局HTML5のlocalStorageを使っています。「Cookie」ではなく「Cooker」としましたが、ちょっと違ったかも。

苦労したポイントは、当初ネットでまとまった情報がなかなか得られなかったこと以外に、

  • 生のjavascriptではなく、jQueryを使えるようにするにはどうすればいい?
  • 既存ページの内容を変更する方法は?contentscriptによる方法とexecuteScriptがある?
  • backgroundを含む拡張部分とcontentscriptとはDOMを共有しないので変数や関数が互いに参照できない。その場合の通信方法はどうするの?
  • デバッグ方法。background.jsを含む拡張部分。contentscript部分。

などがありましたが、上記に紹介したページが本当に参考になりました。
(つづく>>>)

関連する記事

導入から公開まで13時間!Chrome拡張機能の開発[1of6]
導入から公開まで13時間!Chrome拡張機能の開発[2of6]
導入から公開まで13時間!Chrome拡張機能の開発[3of6]
導入から公開まで13時間!Chrome拡張機能の開発[4of6]
導入から公開まで13時間!Chrome拡張機能の開発[5of6]
導入から公開まで13時間!Chrome拡張機能の開発[6of6]
ちょっとは楽になったかも!?「ハローワークの求人情報検索」ページ簡単設定[1 of 3]

お世話になったリンク

Chrome Extensions API リファレンス
Sample Extensions – Google Chrome Extensions
ぷりんすの開発メモ: Chrome拡張機能のマニフェストVesrsion2対応についてのメモ
ChromeExtensionを作ってみる | ぼんぼるにっき
Chrome Extension でデバッグを行う – 日頃の行い
ハローワークの「求人情報検索」ページ

以上です。

ちょっとは楽になったかも!?「ハローワークの求人情報検索」ページ簡単設定[3of3]

友人に頼まれて急遽作成した記事になりますが、就活・創出的転職・早期退職等で苦労されている方々に捧げます。

作成の動機は、ハローワークの「求人情報検索」ページは、ログインが出来ないため、検索のためにこのページにアクセスする度に、毎回同じ情報を入れる必要があると理解しました。
#もしかすると自分のWindowsOSの版数が古いせいかも知れませんが。。。

そこで、「求職番号」等毎回同じ情報を入れる手間を省けるようにする工夫を、自分のPCやスマホに施す方法を模索してみました(ネットカフェやハローワークの端末では設定しない方がいいかもです)。以下その説明の第3章です。

スマホ版「Chrome」でブックマークレットを使う方法

スマホ版(iPhoneやAndroid)の「Chrome」でPCと同様にブックマークレットで処理させる方法がみつかりました(関連リンクの方々に感謝いたします!)。
※動作確認したスマホの詳細は下記「テスト機の詳細情報」を参照してください。

ステップS1.スマホの「Chrome」ブラウザでハローワークの「求人情報検索」ページを呼び出します

hellowork_192x288

ステップS2.その状態で、図のようにオムニバー(というらしい)にステップ4で登録したブックマークレット名(この場合「ハロワ求人検索設定」)を入力します

hellowork_002_192x288

※入力が面倒なら「ハロワ」等ではなく「abc」など半角英字で始まるようにブックマークレット名を登録しておいてもよいかと。

ステップS3.オムニバー下のリストから適当なブックマークレット名(この場合「ハロワ求人検索設定」)をクリック(タッチですね)します

ステップS4.図のように求職番号等が自動でインプットされていることを確認します

hellowork_003_288x192

テスト機の詳細情報

HTC J Butterfly
Androidバージョン:4.1.1
HTC Sence バージョン:4+
ソフトウエアの番号:1.15.970.1
HTC エクステンション バージョン:HTCExtension_Sense45_4
※テストプラットフォーム:Chromeブラウザ

Sony Tablet S
Androidバージョン:4.0.3(release1a)
カーネルバージョン:2.6.39.4 integ-build@build5 #1
ビルド番号:TISU0R0220110
※テストプラットフォーム:Chromeブラウザ

Apple iPhone4
バージョン:7.0(11A465)
モデル:MD198TH/A
※テストプラットフォーム:Chromeブラウザ

Sony Xperia SB01
※「Chrome」ブラウザ自体インストールできませんでした。

関連する記事

ちょっとは楽になったかも!?「ハローワークの求人情報検索」ページ簡単設定[1of3]
ちょっとは楽になったかも!?「ハローワークの求人情報検索」ページ簡単設定[2of3]
ちょっとは楽になったかも!?「ハローワークの求人情報検索」ページ簡単設定[3of3]

お世話になったリンク

JavaScript – ブックマークレットで jQuery を使う魔法の 210 文字 – Qiita [キータ]
Bookmarkletを編集して再びBookmarkletにする | 普通のサラリーマンのiPhone日記
bookmarklet maker
ハローワークの「求人情報検索」ページ
モバイル版Chromeでブックマークレットを使う方法

ちょっとは楽になったかも!?「ハローワークの求人情報検索」ページ簡単設定[2of3]

友人に頼まれて急遽作成した記事になりますが、就活・創出的転職・早期退職等で苦労されている方々に捧げます。

作成の動機は、ハローワークの「求人情報検索」ページは、ログインが出来ないため、検索のためにこのページにアクセスする度に、毎回同じ情報を入れる必要があると理解しました。
#もしかすると自分のWindowsOSの版数が古いせいかも知れませんが。。。

そこで、「求職番号」等毎回同じ情報を入れる手間を省けるようにする工夫を、自分のPCやスマホに施す方法を模索してみました(ネットカフェやハローワークの端末では設定しない方がいいかもです)。以下その説明の第2章です。

「求人情報詳細条件入力」のページで使えるブックマークレットの紹介

下記例では「その他の技術者」「技術サービス業(他に分類されないもの)」を設定しています。

(function(f,s){s=document.createElement("script");s.src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js";s.onload=function(){f(jQuery.noConflict(true))};document.body.appendChild(s)})(function($){
$("#ID_kiboShokushuDetail").val("11");
$("#ID_kiboSangyoDetail").val("74");
})

※ステップ1の「求人情報検索」画面専用の設定と混在させないでください。ここのブックマークレットは「詳細条件入力」画面専用です。

<希望する職種(詳細)>
05:研究者
06:農林水産技術者
07:開発技術者
08:製造技術者
09:建築・土木・測量技術者
10:情報処理・通信技術者
11:その他の技術者
12:医師、歯科医師、獣医師、薬剤師
13:保健師、助産師、看護師
14:医療技術者
15:その他の保健医療の職業
16:社会福祉の専門的職業
17:法務の職業
18:経営・金融・保険の専門的職業
19:教育の職業
20:宗教家
21:著述家、記者、編集者
22:美術家、デザイナー、写真家、映像撮影者
23:音楽家、舞台芸術家
24:その他の専門的職業

※ステップ1の「求人情報検索」画面で「希望する職種」として「専門的・技術的職業」を選択した場合の例です。「詳細条件入力」画面にて右クリックでソースを出して文字列検索すればコード(「71」などの2桁の数字)が分かりますので、それを設定することもできます。

<希望する産業(詳細)>
71:学術・開発研究機関
72:専門サービス業(他に分類されないもの)
73:広告業
74:技術サービス業(他に分類されないもの)

※ステップ1の「求人情報検索」画面で「希望する産業」として「学術研究,専門・技術サービス業」を選択した場合の例です。「詳細条件入力」画面にて右クリックでソースを出して文字列検索すればコード(「71」などの2桁の数字)が分かりますので、それを設定することもできます。
(つづく>>>)

関連する記事

ちょっとは楽になったかも!?「ハローワークの求人情報検索」ページ簡単設定[1of3]
ちょっとは楽になったかも!?「ハローワークの求人情報検索」ページ簡単設定[2of3]
ちょっとは楽になったかも!?「ハローワークの求人情報検索」ページ簡単設定[3of3]

お世話になったリンク

JavaScript – ブックマークレットで jQuery を使う魔法の 210 文字 – Qiita [キータ]
Bookmarkletを編集して再びBookmarkletにする | 普通のサラリーマンのiPhone日記
bookmarklet maker
ハローワークの「求人情報検索」ページ
モバイル版Chromeでブックマークレットを使う方法

以上です。