スポンサーリンク

Chrome拡張機能とは?(ブラウザのアドオン開発に関する日本語ドキュメント)

※本記事は,クロームのアドオン開発に関するGoogle公式ドキュメントWhat are extensions?の日本語訳です。

Chromeアドオン(拡張機能,エクステンション)とは何か

アドオンとは,ブラウザ上の動作(browsing experience)をカスタマイズするための小さなソフトウェアです。


アドオンを使うと,各ユーザはChromeの機能を「自分好みに改造」できます。 
ブラウザの動作を,細かいニーズや設定に合わせて改変することができるのです。


アドオンは,HTMLやJavaScript,CSSなどのWeb系テクノロジーで作られています。


1個1個のChromeアドオンは,それぞれ1個の小さな,単一の目的(single purpose)を果たせるように作成されるべきです。
各アドオンが果たす役割は,理解しやすいように設計しましょう。


ひとつのアドオンの中に,複数の要素(components)や幅広い機能を含めることができますが,
その場合は,すべての機能がアドオンのもともとの開発目的を成し遂げるために役立つようにしてください。


アドオンのUIは,最小限かつ意味のあるものにしてください。
Gmailチェッカーアドオンのように,ブラウザのバー上にシンプルなアイコンを一つ表示するだけでも良いです。
また一方で,ブラウザで表示中のページをまるごと書き換える(override)ような,大がかりなUIのアドオンもあるでしょう。


アドオンのファイルは,ZIP圧縮されて 拡張子 .crx の単一パッケージになっています。
ユーザはその .crx ファイルを,ストア等からダウンロードおよびインストールします。


これはつまり,ChromeのアドオンはWebアプリとは異なるということです。
アドオンが動作するために必要なファイルはパッケージ化されており,外部のWebサイトを読み込んで表示することに依存した構成ではありません。


Chromeアドオンのデベロッパーは,Chromeデベロッパー・ダッシュボード上でアドオンをアップロードします。
そこでアップロードしたアドオンは,Chrome Webストア上で公開されます。
より詳細な情報は,ストアの開発者向けドキュメントをご参照ください。

Hello Extensions(アドオン開発・はじめの一歩)

ここでは Hello Extensions という手短なサンプルを紹介します。
アドオン開発を始めるための小さな一歩です。


まず新しいフォルダを作成し,そこにアドオン開発のために必要なファイルを格納することにしましょう。
必要なファイルは,サンプル置き場からダウンロードしてくることもできます。


新しいフォルダを作成したら,そのフォルダの中に manifest.json というファイルを作成し,下記のコードを記載してください。

  {
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2
  }

全てのアドオンに,このような「マニフェスト」が必要です。

(ほとんどのアドオンは,マニフェストを中心に作るわけではありませんが,
今回のサンプルでは,わかりやすくするためにマニフェストファイルを中心に進めます。)


この中のbrowser_actionフィールドに追記しましょう。
このアドオンのポップアップファイル,およびアイコンファイルのファイル名を定義することにします。
下記のように記載してください。

  {
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {  // ここから下を追記
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    }
  }

ここで指定した hello_extensions.png は,こちらからダウンロードできます。

hello.htmlは,下記のような内容で作成してください。

  <html>
    <body>
      <h1>Hello Extensions</h1>
    </body>
  </html>

(ここまでで,manifest.json およびpng, htmlファイルの合計3ファイルが,フォルダ内に格納されていることになります。)

今作っているのは,「アドオンのアイコンがクリックされたときに,hello.htmlを表示する」という動作です。


次のステップとして, manifest.json の中にキーボードショートカットを記載しましょう。
キーボードショートカットは必須ではありませんが,あると便利です。

  {
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    },
    "commands": {  // ここから下を追記
      "_execute_browser_action": {
        "suggested_key": {
          "default": "Ctrl+Shift+F",
          "mac": "MacCtrl+Shift+F"
        },
        "description": "Opens hello.html"
      }
    }
  
  }


最後のステップは,あなたのローカルマシン上で,Chromeにこのアドオンをインストールすることです。


Chromeで chrome://extensions に移動してください。(アドレスバーに打ち込めば移動できます)

画面右上の「デベロッパーモード」をONにしてください。

パッケージ化されていない拡張機能を読み込む」をクリックし,あなたがさっき作った「Hello Extensions」のアドオンのフォルダを選んでください。


これで,アドオンのインストールの完了です。

動作を試すには,ブラウザ上で表示されている hello_world.png のアイコンをクリックするか,Ctrl+Shift+F を押してください。ポップアップによるアドオンの動作を試せます。

次のステップ

追記予定



Chromeアドオンの開発チュートリアルとしては,下記の記事も実践しやすいのでご参照ください。

今から3分で,Chromeブラウザの独自アドオンを自作してみよう (jQueryを使ったクローム拡張機能を,開発および動作テストする入門) - 主に言語とシステム開発に関して
https://language-and-engineering.hatenablog.jp/entry/2015/10/22/%E4%BB%8A%E3%81%8B%E3%82%89%EF%BC%93%E5%88%86%E3%81%A7%EF%BC%8CChrome%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E7%8B%AC%E8%87%AA%E3%82%A2%E3%83%89%E3%82%AA%E3%83%B3%E3%82%92%E8%87%AA

補足

Googleのドキュメント翻訳に関するライセンス・ポリシー:

Site Policies | Google Developers
https://developers.google.com/terms/site-policies

  • When you see a page with this notice you are free to use nearly everything on the page in your own creations. For example, you could quote the text in a book, cut-and-paste sections to your blog, record it as an audiobook for the visually impaired, or even translate it into Swahili. Really. That's what open content licenses are all about. We just ask that you give us attribution when you reuse our work. (スワヒリ語に翻訳しても良い)
  • You may also find the following notice on the bottom of some pages: Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.

Excelブック内の全シートを,1ファイルずつに分けて一括保存するバッチ (シート単位で自動ファイル分割し,1シートごとに一斉ファイル出力)

単一のExcelブック内に,大量のワークシートが存在するとする。


シートがあまりにも多すぎて,ブックのサイズが何メガにも膨れ上がる。

そして,「もはや1ファイルで管理しきれない。

シートごとに別ファイルに分けよう」となる。


そういう場合,各シートを

「自動的に個別のファイルに分けてくれる」ツールがあると便利だ。

100シートあれば,100個のファイルに分割してくれる・・・というわけ。



下記のバッチで,すぐに実行できる。


以下のコードをメモ帳にコピペし,「シートごとに分割.bat」で保存。

そして,シートごとに分割したいExcelファイルを

このバッチにドロップすればよい。

@if(0)==(0) ECHO OFF

cscript.exe //nologo //E:JScript "%~f0" %*

@pause
GOTO :EOF
@end



/*

	ドロップしたExcelファイルの全シートを,
	1シートずつ個別のファイルに保存し直すバッチ

*/


// 引数取得
if( WScript.Arguments.length == 0 )
{
	WScript.Echo("引数がありません。");
	WScript.Quit();
}
var filename = WScript.Arguments.Unnamed(0);
var ws = WScript.CreateObject("WScript.Shell");
var cwd = ws.CurrentDirectory;
//var filepath = cwd + "\\" + filename;
var filepath = filename;



// Excelブックを開く
var excel = WScript.CreateObject("Excel.Application");
excel.Visible = true;
excel.Workbooks.Open( filepath );
var book = excel.Workbooks( excel.Workbooks.Count ); // ワークブックを取得
var xlMaximized = -4137;
excel.ActiveWindow.WindowState = xlMaximized; // 最大化




// 全シートをスキャンして,シート名を調査
var sheets = book.WorkSheets;
var e = new Enumerator( sheets );
var arr_sheets = [];
for( ; ! e.atEnd() ;  e.moveNext() )
{
	// シートを取得
	var sheet = e.item();
	
	// 保持
	arr_sheets.push( sheet );
	
}


// 取得済みの全シートについて
for( var i = 0; i < arr_sheets.length; i ++ ){

	// 新規ワークブックを作成
	excel.Workbooks.Add();
	var new_book = excel.Workbooks( excel.Workbooks.Count ); // ワークブックを取得

	// シートを先頭にコピー挿入
	//arr_sheets[i].Copy( new_book.Worksheets( new_book.Worksheets.Count ) );
	arr_sheets[i].Copy( new_book.Worksheets( 1 ) );
	
	// 不要シートを消す(Sheet1~Sheet3)
	new_book.Worksheets( 4 ).Delete();
	new_book.Worksheets( 3 ).Delete();
	new_book.Worksheets( 2 ).Delete();

	// 新規ファイル保存。ファイル名はシート名
	var new_filepath = cwd + "\\" + arr_sheets[i].Name + ".xlsx";
	WScript.Echo( "新規ブックのパス:" + new_filepath );
	new_book.SaveAs( new_filepath );
	
	// 閉じる
	new_book.Close();

}


このソースは,MS-DOS(コマンドプロンプト)バッチの中に,WSH/JScriptのコードを埋め込んで記述してある。


Excelファイルをドロップすると,バッチの存在するフォルダ内に,

各シートごとに分割されたエクセルが一斉に生成・保存される。


参考にしたページ:

JScript/WSH で,Excelファイルを読み書きしよう
http://language-and-engineering.hatenablog.jp/entry/20090717/p1


Excelブックの「シート目次」を,自動的に作成するバッチ (WSH/JScriptで,各シートへのリンク付きの目次を自動生成)
http://language-and-engineering.hatenablog.jp/entry/20110921/p1


BATとWSHのコードを1ファイルに混在させるためのshebang記法(複雑なバッチを1ファイルで実現)
http://computer-technology.hateblo.jp/entry/20131025/p1

関連する記事:

WSH/JScriptで,Excelファイルを読み書きする際のテンプレート (シート上の全行を読み書きするコードのひな型) - 主に言語とシステム開発に関して
http://language-and-engineering.hatenablog.jp/entry/20140214/p1


ドキュメント作成を楽にするための,Excel VBA 頻出8パターン - 主に言語とシステム開発に関して
http://language-and-engineering.hatenablog.jp/entry/20090401/p1


Excelシートを読み取って,INSERT文SQLを生成するバッチ (Kingsoft SpreadsheetをWSH/JScriptで自動操作) - 主に言語とシステム開発に関して
http://language-and-engineering.hatenablog.jp/entry/20121218/p1


Excel VBAのマクロを,複数のブックから利用する方法 (標準モジュールをブックの外部で管理して,共通ライブラリとして読み込み) - 主に言語とシステム開発に関して
http://language-and-engineering.hatenablog.jp/entry/20090731/p1

JavaScriptの動かないコード(中級編)正規表現をwhile内で定義すると無限ループで固まるエラー (execでグローバルなマッチだと,処理がフリーズ)


以下のJavaScriptコードが,意図した動作をしないのは,なぜですか。(制限時間1分)


やりたい事:

  • 複数の文字列がある。
  • それぞれの文字列から,URLのトップレベルドメイン(TLD)を全て抜き出す。
  • 抽出のために,RegExp.exec() メソッドで,正規表現にグローバルオプションを付けて実行する。
<script>

// 検索対象の文字列たち
var strs = [
	"URLは,http://a.com/ と,https://b.jp/ です。よろしくね。",
	"どうぞhttp://c.com/においで下さい。",
	"http://d.jp/ から移転しました。こちら→https://e.info/ "
];


/*
  マッチするすべてのTLDを列挙
*/


// 検索対象のすべての文字列を,順番に検査する。
for( var i = 0; i < strs.length; i ++ ){

	// この一つの文字列の中に含まれる
	// 全てのTLDを抽出。
	var str = strs[i];


	// execメソッドが値を返し続ける限り,
	// whileでループを回し続ける。
	var arr;
	while( 
		( 
			// execの結果は毎回,配列として受け取る。
			arr = (
				// 正規表現にgオプションを付け,
				// 文字列内で複数回マッチさせる。
				/https?:\/\/[^\/]+\.([^\.\/]+)/g
			).exec( str ) 
		)
		!=
		null
	){

		// 括弧でキャプチャした文字列を表示
		alert( "トップレベルドメインは" + arr[1] );

	}


}


</script>


発生する不具合

続きを読む