● 変更来歴
2013.09.15 画像ファイル表示時のナビゲーションを非表示にしました。
■ Google chrome の拡張機能と拡張機能開発の紹介。
Google chromeのブラウザにもブラウザに付け加えられる色々な拡張機能があります。
これらの機能は自分のＰＣのブラウザに付け加えて使いやすくする機能です。
Google chrome のブラウザは下記からダウンロードすることができます。
ブラウザは１つのＰＣに複数入れられ、同時に違うブラウザを使うこともできます。
Google chrome ダウンロード
http://www.google.co.jp/intl/ja/chrome/
● 内容
① Google chrome ブラウザの拡張機能の開発。
アメブロマイページにナビゲーションメニューをつけるアドオンの開発。
（マイページ左側に固定で表示されます。）
② chrome の拡張機能の表示は、chromeのブラウザのアドレスバーに
下記を入れてEnterする。
chrome://extensions/
または、ブラウザの左上からツール→拡張機能をクリックします。
③ 拡張機能は下記を参照。( chrome web store 拡張機能 )
https://chrome.google.com/webstore/category/extensions?hl=ja
各種アプリは下記を参照( chrome web store )
https://chrome.google.com/webstore/category/apps
● Webデザインに役立ちそうな拡張機能
① ＨＴＭＬエディタ NoteBook Professional
https://chrome.google.com/webstore/detail/notebook-professional/elkgcninebemfhajfhmiffbndloiacbe/
② ＱＲコードを作成
この拡張機能は、ＱＲコードを作成したいページでページのどこかを
右クリックして Generate QR Code をクリックする
https://chrome.google.com/webstore/detail/qr-code-generator/cicimfkkbejhggfjaabggafffgdnjgjp
③ Firebug Lite for Google chrome
https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench?hl=ja
④ Code Cola
https://chrome.google.com/webstore/detail/code-cola/lomkpheldlbkkfiifcbfifipaofnmnkn/
⑤ ColorZilla(色を調べる)・・・カラーピッカー
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp/
⑥ Sketchpad(絵が描ける)
https://chrome.google.com/webstore/detail/sketchpad/lkllajgbhondgjjnhmmgbjndmogapinp?hl=ja
● 自分で拡張機能を作ってみる。
chrome extensions 公式サイトは下記を参照
https://developer.chrome.com/extensions/index.html
① ＰＣに拡張機能のファイルを入れるフォルダを作成する。
作成した例（ameblo_mypage_naviのフォルダを作成）
ファイルを既に入れた状態の例です。
② manifest.jsonのファイルを作成する。(ミニフェスト)
このファイルはカンマ(,)で区切られたcsvファイルの様なもので
JSONファイルと言われます。
manifest.json という名前で作成します。
{
"name" : "ameblo Mypage Navi",
"version" : "1.0.0",
"manifest_version": 2,
"description" : "アメブロのマイページにナビゲーションを表示する。",
"content_scripts" : [
{
"matches" : ["http://*.ameba.jp/*"],
"css" : ["ameblo_mypage.css"],
"js" : ["jquery.min.js","ameblo_mypage_navi.js"],
"run_at" : "document_end"
}
],
"web_accessible_resources": ["close.gif",
"ameblo_mypage_navi.js",
"ameblo_mypage.css"
]
}
■ 説明
name ・・・ 拡張機能の名前
version ・・・ バージョン
manifest_version ・・・ manifest バージョン 2を指定する
description ・・・ 説明
matches ・・・ 適用するサイト(マッチパターン)
css ・・・ 使用するCSSファイル
js ・・・ 使用するjs(JavaScript)ファイル
run_at ・・・ js(JavaScript)ファイルの読み込みタイミング
document_start ・・・DOMが構築される前に読み込まれる
document_end ・・・DOMが構築された後に読み込まれる
document_idle ・・・DOMが構築された後～window.onloadまでのどこかで読み込まれる。
③ js(JavaScript)ファイルを作成する。( ameblo_mypage_navi.js )
// ameblo_mypage_navi.js
function ameblo_mypage_navi(){
// Pigg 除外
if(location.hostname=="pigg.ameba.jp"){
return;
}
// 画像除外
if(location.hostname=="stat.ameba.jp"){
return;
}
if(location.hostname=="stat001.ameba.jp"){
return;
}
var ameblo_navi_option=({
"option_data":[{ // ★ display Sequence set
"class_name":"navi_mypage", "seq":"021","target":'target="_parent"',"desc":"マイページ", "urls":"http://mypage.ameba.jp/" },{ // マイページ
"class_name":"navi_controls", "seq":"002","target":'target="_blank"', "desc":"基本設定", "urls":"http://blog.ameba.jp/ucs/blog/bloginfoinput.do" },{ // 基本設定
"class_name":"navi_blog_write", "seq":"003","target":'target="_blank"', "desc":"ブログを書く", "urls":"http://blog.ameba.jp/ucs/entry/srventryinsertinput.do" },{ // ブログを書く
"class_name":"navi_blog_change", "seq":"004","target":'target="_blank"', "desc":"記事の変更・削除", "urls":"http://blog.ameba.jp/ucs/entry/srventrylist.do" },{ // 記事の変更・削除
"class_name":"navi_image_upload","seq":"005","target":'target="_blank"', "desc":"画像のアップロード","urls":"http://blog.ameba.jp/ucs/upload/srvimagelist.do" },{ // 画像のアップロード
"class_name":"navi_comment", "seq":"006","target":'target="_blank"', "desc":"コメントの管理", "urls":"http://blog.ameba.jp/ucs/comment/commentlist.do" },{ // コメントの管理
"class_name":"navi_reader", "seq":"007","target":'target="_blank"', "desc":"読者の管理", "urls":"http://blog.ameba.jp/ucs/reader/readerlist.do" },{ // 読者の管理
"class_name":"navi_analysis", "seq":"008","target":'target="_blank"', "desc":"アクセス解析", "urls":"http://blog.ameba.jp/ucs/analysis/analysis.do" },{ // アクセス解析
"class_name":"navi_ranking", "seq":"009","target":'target="_blank"', "desc":"ランキング", "urls":"http://ranking.ameba.jp/ucs/#" },{ // ランキング
"class_name":"navi_css", "seq":"010","target":'target="_blank"', "desc":"ＣＳＳ編集", "urls":"http://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do" },{ // ＣＳＳ編集
"class_name":"navi_sidebar", "seq":"011","target":'target="_blank"', "desc":"サイドバーの配置", "urls":"http://blog.ameba.jp/ucs/sidebar/srvsidebarupdateinput.do"},{ // サイドバーの配置
"class_name":"navi_freeplugin", "seq":"012","target":'target="_blank"', "desc":"フリープラグイン", "urls":"http://blog.ameba.jp/ucs/plugin/freeplugininput.do" },{ // フリープラグイン
"class_name":"navi_freespace", "seq":"013","target":'target="_blank"', "desc":"フリースペース", "urls":"http://blog.ameba.jp/ucs/profile/srvprofileupdateinput.do"},{ // フリースペース
"class_name":"navi_messagebord", "seq":"014","target":'target="_blank"', "desc":"メッセージボード", "urls":"http://blog.ameba.jp/ucs/msgboard/srvmsgboardinput.do" },{ // メッセージボード
"class_name":"navi_ameber", "seq":"015","target":'target="_blank"', "desc":"アメンバーの編集", "urls":"http://ucsamember.ameba.jp/amemberList.do" },{ // アメンバーの編集
"class_name":"navi_theme", "seq":"016","target":'target="_blank"', "desc":"テーマの編集", "urls":"http://blog.ameba.jp/ucs/theme/themeinput.do" },{ // テーマの編集
"class_name":"navi_room_edit", "seq":"017","target":'target="_blank"', "desc":"ルームの編集", "urls":"http://ucsprofile.ameba.jp/ucs/index.do" },{ // ルームの編集
"class_name":"navi_ucsgroup", "seq":"018","target":'target="_blank"', "desc":"グルっぽ", "urls":"http://ucsgroup.ameba.jp/ucs/index" },{ // グルっぽ
"class_name":"navi_mynow", "seq":"020","target":'target="_blank"', "desc":"なう", "urls":"http://now.ameba.jp/" // なう
}]
});
// Clss set sequence set
var class_sort_Array=[];
var sequence_Array = ameblo_navi_option.option_data;
for(i=0; i < sequence_Array.length; i++){
class_sort_Array[i] = [sequence_Array[i].seq,sequence_Array[i]];
}
// sort
class_sort_Array.sort();
for(i=0; i<sequence_Array.length; i++){
class_sort_Array[i] = class_sort_Array[i][1];
}
// html Edit
var html_area="";
html_area+='<div id="ameblo_mypage_navi">';
html_area+='<a href="#" class="ameblo_mypage_navi_close" onClick="navi_close();return false;">close</a>';
html_area+='<ul>';
for(i=0; i<sequence_Array.length; i++){
html_area+='<li><a href="'+class_sort_Array[i].urls+'" '+class_sort_Array[i].target+' class="'+class_sort_Array[i].class_name+'">'+class_sort_Array[i].desc+'</a></li>';
}
html_area+='</ul></div>';
$('body').append(html_area);
$(".ameblo_mypage_navi_close").click(function(){$('#ameblo_mypage_navi').fadeOut(1000); });
}
$(document).ready(function() {
ameblo_mypage_navi();
});
■ 説明
ナビメニューの表示順番を変えたい場合は、seqの部分の数字を変えてください。
④ ＣＳＳファイルを作成する。( ameblo_mypage.css )
/* ------------------------------------------- */
/* アメブロ マイページ ナビゲーション */
/* ------------------------------------------- */
#ameblo_mypage_navi{ /* ナビ全体 */
position:fixed; /* 絶対配置(固定) */
left:10px; /* 左からの位置 */
top:86px; /* 上からの位置 */
width:150px; /* 幅 */
border:2px solid #999999;/* 枠 */
font-size:12px; /* 文字の大きさ */
display:block;
padding:0px; /* 内側余白 */
margin:0px; /* 外側余白 */
border-radius:5px; /* 角丸 */
z-index:9999; /* 重なりの順位 */
background-color:#ffffff;/* 背景色 */
padding-top:10px;
}
#ameblo_mypage_navi li{ /* リスト部分 */
list-style:none; /* リストなし */
display:block;
border-bottom:1px dotted #777777;/* 枠 */
padding:1px 0px; /* 内側余白 */
margin:0px; /* 外側余白 */
}
#ameblo_mypage_navi ul{ /* リスト部分 */
padding:10px; /* 内側余白 */
margin:0px; /* 外側余白 */
}
#ameblo_mypage_navi li a{/* リンク部分 */
text-decoration:none; /* アンダーラインなし */
display:block;
color:#888888; /* 文字の色 */
}
/* カーソルを乗せた時 */
#ameblo_mypage_navi li a:hover{/* リンク部分 */
color:#990000; /* 文字の色 */
}
.ameblo_mypage_navi_close{/* Close 画像 */
/* 画像のＵＲＬ manifest.json にも使う画像を指定すること */
background-image:url('chrome-extension://__MSG_@@extension_id__/close.gif');
background-repeat:no-repeat;/* 繰り返ししない */
background-position:center center;/* 中央 */
text-indent:-9999px; /* closeの文字を非表示 */
width:20px; /* 幅 */
height:20px; /* 高さ */
float:right; /* 右に配置 */
margin-top:-9px; /* 上の余白 */
margin-right:3px; /* 右の余白 */
display:block; /* ボックス */
}
.ameblo_mypage_navi_close:hover{/* Close 画像 */
cursor:pointer; /* カーソル */
}
/* ------------------------------------------- */
/* ------------------------------------------- */
/* 表示・非表示制御 */
/* ------------------------------------------- */
.navi_controls{ /* 基本設定 */
/*display:none;*/
}
.navi_blog_write{ /* ブログを書く */
/*display:none;*/
}
.navi_blog_change{ /* 記事の変更・削除 */
/*display:none;*/
}
.navi_image_upload{ /* 画像のアップロード*/
/*display:none;*/
}
.navi_comment{ /* コメントの管理 */
/*display:none;*/
}
.navi_reader{ /* 読者の管理 */
/*display:none;*/
}
.navi_analysis{ /* アクセス解析 */
/*display:none;*/
}
.navi_ranking{ /* ランキング */
/*display:none;*/
}
.navi_css{ /* ＣＳＳ編集 */
/*display:none;*/
}
.navi_sidebar{ /* サイドバーの配置 */
/*display:none;*/
}
.navi_freeplugin{ /* フリープラグイン */
/*display:none;*/
}
.navi_freespace{ /* フリースペース */
/*display:none;*/
}
.navi_messagebord{ /* メッセージボード */
/*display:none;*/
}
.navi_ameber{ /* アメンバーの編集 */
/*display:none;*/
}
.navi_theme{ /* テーマの編集 */
/*display:none;*/
}
.navi_room_edit{ /* ルームの編集 */
/*display:none;*/
}
.navi_ucsgroup{ /* グルっぽ */
/*display:none;*/
}
.navi_mynow{ /* なう */
/*display:none;*/
}
/* ------------------------------------------- */
■ 説明
非表示にしたい項目は、/*display:none;*/ の箇所を
display:none;に変えてください。
画像を自分のフォルダ内のものを使う場合には、この拡張機能では、
下記の様に指定します。
また、マニフェストファイルにも画像を使うことを宣言する必要があります。
background-image:url('chrome-extension://__MSG_@@extension_id__/close.gif');
⑤ jQueryを使うので、jquery.min.js をフォルダに作成する。
下記ファイルを利用。
http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
⑥ クローズ画像を用意します。
⑦ ファイルが全部準備できて、フォルダに準備できたら、拡張機能に
開発したものを読み込みさせます。
内容②のツール→拡張機能で拡張機能画面を開きます。
デベロッパーモードをクリックして☑します。
⑧ パッケージされていな拡張機能を読み込む... をクリックします。
⑨ 作成したファイルが入っているフォルダをクリックしてＯＫをクリックします。
⑩ 下記の様に作成されます。
もし、このフォルダのファイルなどを変更した場合は、リロードをクリックして、
アメブロのマイページを再読み込みする必要があります。
⑪ 私が作成したファイルは下記(zip)をクリックするとダウンロードできます。
ダウンロード