▽この記事は「PC＿パソコン」用です
スマートフォンでは、記事が分割されるためこちらをクリックしてページを移動してください→同じ内容です
▽概要
この記事は「商品検索MeCabブックマークレット（統合ツール）」に追加した機能について解説します（音声なし）
WEBページ内の
対応する各キーに対して、単語単位で
「広告付きHTMLコンテンツ」を（△間接的に）埋め込む機能を、追加しました
この機能は、キーボードの「１」または「UIOP[]　GHJKL;　M,./」合計１７個のキーに対応しています
例えば、（WEBページの訪問者に）「１」キーで表示させたい場合は
（商品アイテム一覧ウインドウから）「AD_Ⓤ」ブックマークレットを使用して、書き出しとアップロードを行います
　△１単語ごとのデータの書き出しと２キー単位での一括アップロードの２つの機能を含みます→__▢▢▢
次に、
WEBページに「各キーごとのHTMLファイルの場所」の情報を記入した１行分の空要素のタグを書き込みます
埋め込みデータ（HTMLファイル）は、同じサイトの別の場所にありますので、WEBページはまったく汚しません。
（△アップロード時に「入力ダイアログ」で表示されます）→コピーします
これで（埋め込みデータの）表示の準備は「完了」です→１書き出しとアップロード
▽例「１」キー（検証用のHTMLファイルの内容↓）
HTML→
<HTML><HEAD><TITLE>Ⓑ◎ブログにアップロード</TITLE></HEAD>
<BODY>
<DIV>すもももももももものうち<BR>
中居正広のミになる図書館<BR>
ダウンタウンDX<BR>
MeCabの形態素解析の結果が保存されている場合<BR>
そちらの読みを読み上げます</DIV>
<DIV id="AD_STORE_ITEMS_IMPORT_WEB_PAGE" class="display_none" data-path="http://snowjobs.blog.jp/data/Export/AD_WEB_PAGE/content_blog"></DIV>
</BODY></HTML>

訪問者は「商品検索MeCabブックマークレット」をクリックし、
検索対象の文字列を「選択」したあとで、→「すもも」「もも」「も」「の」「うち」「中居正広のミになる図書館」...
「１」キーを押すだけで、その単語に対応するデータをすぐに表示できます→２（訪問者による）表示
さらに
その単語に対応するデータがある場所を（↑表示させたポップアップの URL情報）
データベースに登録しておくことで
どこのWEBページからでも
「１」＋「OPTION」キーで、その場所のデータを引き出し、表示させることができます
誰が作成したものでも制限なく登録できます→３（データベースを利用した）情報の相互利用
以上の３つの機能を新しく追加しました!!!

使用者自身が体験し「よい」と思われたものだけを、手動で登録する仕組みなのでごく自然です。
「ESC」＋「OPTION」キーで、データベースに登録します

▽このプログラムの詳しい説明↓（使い方ガイドからのみダウンロードするように変更しました）
使い方説明書のダウンロードリンクはこちらのWEBページにあります

▽最初に、ブックマークレットをお気に入りバーに登録します→＿▢▢▢
下のファイルを、Finderアプリで開き「AD_Ⓤ」ブックマークレットをお気に入りバーにドロップします
＞ファイルの開き方
パスを選択→「右クリック」→「サービス」→「Finderに表示」
/Library/WebServer/Documents/data/Export/AD_WEB_PAGE/Ⓔ◎ブックマークレットを登録します.html

▽１単語ごとのデータの書き出しと一括アップロード △「１」キーで表示させる場合のみ→「AD_Ⓤ」を使います
１最初に、単語単位で「埋め込みデータ」を書き出し、データフォルダを作成していきます
２（書き出された）データフォルダと 検証用のHTMLファイルをブログにアップロードします→__▢▢▢
３（検証用のHTMLファイルを）Safariブラウザで開いて、動作を確認します
　「商品検索MeCabブックマークレット」をクリック→「すもも」→「１」キー（△文字列を選択後に）
【１データフォルダのファイル構成】
HTML形式の単語データは、１つの単語タイトルに対し、複数のアイテムを収録することもでき、
その場合、同じ「１」キーを押すことで「表示」を切り替えます（△商品ボックスは常に１つだけ表示されます）
▽ファイル構成
例→ /Library/WebServer/Documents/data/Export/AD_WEB_PAGE/content_blogフォルダ
　　title_data.jsonp（※※※※※↓収録されている単語タイトルリストは、自動で生成されます※※※※※）
　　_FREE.html（←収録されているタイトル以外は「こちら」が使用されます ）△「MeCab」「ダウンタウンDX」...
　　うち.html
　　すもも.html
　　の.html
　　も.html
　　もも.html
　　中居正広のミになる図書館.html
【２単語ごとのデータの書き出し】→「＊＊＊.html」「_FREE.html」
「２」キーを押して、表示できる「商品アイテム一覧ウインドウ」を使って、単語タイトルを設定後に、書き出します→「＊」
▽（書き出し時）このブックマークレットには、４つの機能があります
　　「商品アイテム一覧ウインドウ」を作成し、Safariブラウザで表示します→「AD_Ⓤ」をクリックします
以下に、そのあとの操作を解説します
１▼保存先フォルダ を指定します→「Ａ」 △Contents_Blog/Child/Folder... なども指定できます***③☆☆☆
２商品アイテムのデータ属性「data-title」の単語タイトルをすべての削除します→「Ｃ」
３商品アイテムのデータ属性「data-title」の単語タイトルを一括して設定します→「単語タイトルを入力」△「うち」...
４HTML形式の単語データを「保存先フォルダ」に書き出します→「OK」△「うち.html」「すもも.html」「＊＊＊.html」
▽単語データの書き出し方について
　１複数に設定してある場合は、分散して「保存先フォルダ」に書き出します
　２HTML形式の単語データがすでにある場合は、それぞれの「末尾」に追加されます→__▢▢▢
　３データ属性に「単語タイトル」が設定してあるものだけを書き出します
　４データ属性に「単語タイトル」がまったく設定されいない場合は、すべて「_FREE.html」に書き出します＊＊＊
▽HTML形式の単語データを「保存先フォルダ」に書き出す前に、検索キーワードを設定しておく必要があります
商品ボックスのデータ属性「data-title」に単語タイトルを設定します（検索キーワード） →「もも」
①◎単語データを一括して設定＞＊＊＊
（データ属性「data-title」の単語タイトルが１つでもある場合は「Ｃ」ですべて削除してから一括して設定します
　　お気に入りバーの「AD_Ⓤ」をクリックします→「Ｃ」
　　お気に入りバーの「AD_Ⓤ」をクリックします→「単語タイトルを入力」△「うち」「すもも」
　　　すべての商品ボックスのデータ属性「data-title」に入力した単語タイトルが一括して設定されます
一括して設定した後に
　　HTML形式の単語データを「保存先フォルダ」に書き出す場合は「OK」を押します→「完了」
②◎個別に設定＞
　「６」キーを押して「編集モード」に変更してから
　「SHIFT＋OPTION」を押しながら、バーコード画像を「クリック」します→「Ａ」（データ属性を指定）
　　　データ属性を「data-title」に指定したあと「単語タイトル」を入力して設定します

【３HTML形式の単語データの編集】
単語タイトルのHTMLファイルを、Safariブラウザで開きます→「うち.html」
内容を編集した後に「AD_Ⓤ」をクリックします→「OK」 単語タイトルのHTMLファイルが書き換えられます
▽WEBサーバーがFTPに対応している場合の「アップロード」（２０１７年０５月１０日(水)---０６０７）
　ライブドアブログの「File Manager API」にも対応しました（＋2018-02-16）
【４キー単位での一括アップロード】
１単語タイトルのHTMLファイルを、Safariブラウザで開きます→「うち.html」
２お気に入りバーの「AD_Ⓤ」をクリックします
　　変更のあったHTMLファイルのみアップロード→「Ｆ」
　　すべてをアップロード（保存先フォルダをアップロードします）→「ＦＦＦ」
　（最初に、FTPサーバーの情報などを指定ファイルに書き込む必要があります。詳しくは以下で解説します）
３アップロード完了後「入力ダイアログ」で
　「１」キーで表示させるための「空要素のDIVタグ」が表示されます→コピーします
　同じドメイン内のHTMLファイルにそのままペーストします→「完了」
▽例１「１」キー
HTML→
<HTML><HEAD>...</HEAD><BODY>
	...
<DIV id="AD_STORE_ITEMS_IMPORT_WEB_PAGE" class="display_none" data-path="http://snowjobs.blog.jp/data/Export/AD_WEB_PAGE/content_blog"></DIV>
</BODY></HTML>
【４FTPに対応していない場合は、手動でアップロード】
作成した「保存先フォルダ」をブログにアップロードします（Cyberduckアプリを使用します）＊＊＊Ａ→Ｂ
 Ａ→　「/Library/WebServer/Documents/data/Export/AD_WEB_PAGE/content_blog」フォルダをドロップします
 　→Ｂ「http://snowjobs.blog.jp/data/Export/AD_WEB_PAGE/content_blog」＊＊＊↓「DIVタグ」＊＊＊
【５検証用のHTMLファイルは、手動でアップロードします】
▽ブログにアップロード.html
HTML
<HTML><HEAD><TITLE>Ⓑ◎ブログにアップロード</TITLE></HEAD>
<BODY>
<DIV>すもももももももものうち<BR>
中居正広のミになる図書館<BR>
ダウンタウンDX<BR>
MeCabの形態素解析の結果が保存されている場合<BR>
そちらの読みを読み上げます</DIV>
<DIV id="AD_STORE_ITEMS_IMPORT_WEB_PAGE" class="display_none" data-path="http://snowjobs.blog.jp/data/Export/AD_WEB_PAGE/content_blog"></DIV>
</BODY></HTML>
▽アップロード先
http://snowjobs.blog.jp/data/sample_test/2017_04_04/ブログにアップロード.html
▽ローカルテスト（content_blogフォルダ内をデータを使います）
http://localhost/data/Export/AD_WEB_PAGE/テスト００Ｂ.html
【６動作確認】
Safariブラウザで（検証用のHTMLファイルを）開いて、動作を確認します
（お気に入りバーにドロップして登録してある）「商品検索MeCabブックマークレット」をクリックし、
検索対象の文字列を「選択」したあとで、→「すもも」「もも」「も」「の」「うち」「中居正広のミになる図書館」...
「１」キーを押します→「完了」
また、HTML形式の単語データに、複数の商品アイテムを収録してある場合
「１」キーを押すことで「表示」を切り替えます（△商品ボックスは１つだけ表示されます）
以上で「単語ごとのデータの書き出しと一括アップロード」の解説を終了します。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊
次は、
上記の方法で作成された埋め込みデータのあるWEBページで
「１」キーを押して表示した単語データの場所をデータベースに登録しておくことで
どこのWEBページからでも（その文字列さえあれば）
「１」＋「OPTION」キーでその単語に対応する場所のデータをすぐに表示させることができます

使用者自身が表示を確認し「よい」と思われたものだけを手動で登録する仕組みなのでごく自然です。
「ESC」＋「OPTION」キーでデータベースに登録します

【１検証のためのWEBページを開き、商品検索MeCabブックマークレットをクリック】
まず、埋め込みデータのあるHTMLファイルを表示し、「商品検索MeCabブックマークレット」をクリックします
http://snowjobs.blog.jp/data/sample_test/2017_04_04/ブログにアップロード.html
データベースは「商品検索MeCabブックマークレット」から操作します
以下に、そのあとの操作方法について解説します
【２埋め込みデータの表示とデータベースへの登録と表示】
訪問者が「商品検索MeCabブックマークレット」をクリックし、
検索対象の文字列を「選択」したあとで、→「すもも」「もも」「も」「の」「うち」「中居正広のミになる図書館」...
　「１」　　　　　　　 埋め込みデータのあるWEBページから「商品ボックス」を表示します＊＊＊１
　「１」＋「OPTION」 データベースの内容を表示します＊＊＊DB
「ESC」＋「OPTION」 データベースに登録（埋め込まれた単語データを「１」キーで表示中に）＊＊＊１→DB
「ESC」＋「OPTION」 （何も表示されていない時に押した場合）表示済みのすべてのタイトルをデータベースに登録します
　　　　　　　　　　　＊＊＊ALL＊＊＊１←直前に、表示で使ったキーが「１」キーの場合
【３データベースの内容の表示】
訪問者が「商品検索MeCabブックマークレット」をクリックし、
検索対象の文字列を「選択」したあとで、→「すもも」「もも」「も」「の」「うち」「中居正広のミになる図書館」...
　「１」＋「OPTION」 データベースの内容を表示します＊＊＊DB
【４データベース情報の更新およびデータの削除】
データベースの内容を表示中に「ESC」＋「OPTION」キー＊＊＊DB→DB 
＊＊１データベースに再度アクセスして、表示内容を「最新の状態」にします
　←２データベースの内容を以前の内容に戻します（PATH_A==）△確認後に「PATH_B」に変更します
　△３データベースから削除（PATH_A==）
▽データベース操作の確認→「１」＋「OPTION」キー
下記のWEBページでデータベースに登録した内容が表示されるか確認します
https://www.google.co.jp/search?q=すもももももももものうち&ie=utf-8&oe=utf-8&hl=ja
＊＊＊＊＊＊＊＊＊＊＊＊＊＊
▽キーボードの操作のまとめ１「１」キー
対象の「文字列」の上にマウスポインタを移動後（またはドラッグして選択した後）に...
　　「１」　　　　　　　 埋め込みデータのあるWEBページから「商品ボックス」を表示します
　　「１」＋「OPTION」 データベースの内容を表示します
　「ESC」＋「OPTION」 データベースに登録（埋め込まれた単語データを「１」キーで表示中に）
　「ESC」＋「OPTION」 データベース情報の更新および削除（データベースの内容を「１」＋「OPTION」キーで表示中に
▽キーボードの操作のまとめ２「Ｕ」キー 「KEY_Ⓤ」で作成された単語データの場合
対象の「文字列」の上にマウスポインタを移動後（またはドラッグして選択した後）に...
　　「Ｕ」　　　　　　　 埋め込みデータのあるWEBページから「商品ボックス」を表示します
　　「Ｕ」＋「OPTION」 データベースの内容を表示します
　「ESC」＋「OPTION」 データベースに登録（埋め込まれた単語データを「Ｕ」キーで表示中に）
　「ESC」＋「OPTION」 データベース情報の更新および削除（データベースの内容を「Ｕ」＋「OPTION」キーで表示中に
＊＊＊＊＊＊＊＊＊＊＊＊＊＊
▽NEXT【簡単ガイドの目次】
　１商品検索MeCabブックマーレットの概要を説明します
→２データベースを使うことでどのWEBページからでも登録したデータを利用できるようになりました
　３商品検索MeCabブックマーレットの最新の機能について

＊＊＊＊＊＊＊＊＊＊＊＊＊＊「FTP＿SETTING」＊＊＊＊＊＊＊＊＊＊＊＊＊＊
▽１アップロードの初期設定（WEBサーバーがFTPに対応している場合＋ライブドアブログに対応しています）
【１アップロード送信を許可するファイルのコピー】
｜１｜Finderアプリで｜Library/WebServer/Documents/data/Export｜｜AD_WEB_PAGE｜フォルダを開きます
｜２｜以下のファイルを｜_Ftp_setting｜フォルダに「OPTION」＋ドラッグして複製をコピーします→｜許可を完了｜
　　｜Ａ｜｜AD_WEB_PAGE｜｜Ftp_permission.txt｜
　→｜Ｂ｜｜AD_WEB_PAGE｜｜_Ftp_setting｜フォルダ
【２FTPサーバーの接続情報を指定ファイルに書き込みます】＊＊＊｜FTP｜｜ライブドアブログ｜＊＊＊
｜１｜Finderアプリで｜Library/WebServer/Documents/data/Export｜｜_FTP｜フォルダを開きます→＿▢▢▢
｜２｜｜FTP_Connect_01.php｜をテキストエディタで開いて（１６００行目あたり最後尾...）
｜３｜FTPサーバーの接続情報など、以下の５項目を記入してください
＊＊①◎FTPサーバー名（ホスト名）→「ftp.blog.livedoor.com」（ライブドアブログで標準設定を使用した古いタイプ場合）
　＊②◎ユーザー名　　　　　　　　→「username」
　＊③◎パスワード　　　　　　　　→「password」
　←４アップロード先のホームのURLアドレス →｜http://blog.livedoor.jp/livedoorID/｜（ブログURL設定）
　←５FTPサーバー内の基準フォルダの初期値 →｜/data/Export｜＊＊＊
｜４｜ライブドアブログの場合は「File Manager API」を使用してアクセスします（＋2018-02-16）
｜５｜ブログにログインし「API Key」から２つのデータを取得してご記入ください
＊＊＊｜１｜ルートエンドポイント　　  →「https://livedoor.blogcms.jp/blog/＊MY＿BLOG＿NAME＊/file_manager/」
　　　｜２｜File Manager用パスワード →「＊＊＊」
　　　｜３｜MY＿BLOG＿NAME
｜６｜接続情報は｜９個｜まで登録できます→＿▢▢▢＿９＿▢▢▢
｜７｜各ブックマークレットからファイルを送信する時に接続先を｜変更｜できます→｜AD__Ⓤ｜｜KEY__Ⓤ｜｜Html__Ⓤ｜＊＊＊
＊＊＊＊＊＊＊＊＊＊＊＊＊＊「APP」＊＊＊＊＊＊＊＊＊＊＊＊＊＊
▽２使用したアプリケーション
１CotEditorーPHPファイルを開くためのテキストエディタアプリ
　https://coteditor.com/archives.ja（CotEditor３.１.８ 日本語対応 リリース 2017-03-15）
２CyberduckーWEBサーバーにファイルをアップロードするアプリ
　https://cyberduck.io/index.ja.html?l=ja（Cyberduck for Mac）5.4.0.23761
３DB Browser for SQLite.app ⒺーSQLite3データベースの内容を表示するアプリ＊＊＊
　http://sqlitebrowser.org（Mac .dmg--v3.9.1）
▽表示フォントの変更（ヒラギノ丸ゴジック12Pに変更します↑）
　　環境設定→ [Data Browser]→[Font]→「Hiragino Maru Gothic ProN」「12▽」
＊＊＊＊＊＊＊＊＊＊＊＊＊＊「EDITOR＿SETTING」＊＊＊＊＊＊＊＊＊＊＊＊＊＊
▽３テキストエディタの環境設定（CotEditor３.１.８日本語版）
メニューバー→「CotEditor」→「環境設定...」
①◎一般
②◎ウインドウ
③◎表示
④◎編集
⑤◎フォーマット
▽Shell Scriptのファイル関連付け（拡張子にcommand を追加）

▽この記事は「PC＿パソコン」用です
スマートフォンでは、記事が分割されるためこちらをクリックしてページを移動してください→同じ内容です
▽テンプレートから「ブックマークレット」を作成します（圧縮後にURIエンコードします）
※※※※※※※※※※※※※※※
＞ウインドウズなどOSＸ以外は、こちらの「入力欄」をご利用ください（１MBまでの制限があります）
※※※※※※※※※※※※※※※
▽入力欄とボタンの使い方
①◎最初に、テンプレートを選択します→「１」「２」「３」
②◎ここに処理の本体を記述のところに、プログラムを記入します→「Optimaize」
③◎ブックマークレットリンクを「お気に入りバー」にドラッグして登録することもできます
１２３OptimizeRESET
※※※※※※※※※※※※※※※
＞OSXの場合は、Finderアプリのサービスメニューに追加します（△上限なし）
※※※※※※※※※※※※※※※
▽ブックマークレットの作成に必要なファイルをダウンロードします（OSX_Finder_Only）
　　http://snowjobs.php.xdomain.jp/tools/services/JSを圧縮.ZIP（サービスメニュー）
次に、以下の圧縮ファイルをダウンロードし「解凍」します
　　https://dl.google.com/closure-compiler/compiler-latest.zip（Javaプログラム △7.1MB）
解凍して生成された
「compiler-latest/closure-compiler-v2018＊＊＊.jar」を JSを圧縮/Javaフォルダにコピーして（移動して）
「compiler.jar」にファイル名を変更してください。

▽「JSを圧縮」フォルダは、こちらにも同封されています（他のツールといっしょに）
下記のリンクから
商品検索MeCabブックマークレット体験版の「辞書機能を追加するインストーラ」をダウンロードします
　辞書機能を追加 /tools/３JSを圧縮する/「JSを圧縮」フォルダ

▽設定方法
①◎compiler.jar を含む「Javaフォルダ」をアプリケーションフォルダにコピーします
※※※「OPTION」＋ドラッグしてコピーします ※※※
JSを圧縮/Javaフォルダ→「/Applications」
②◎サービスフォルダに「JSを圧縮/Action/ブックマークレットの作成.workflow」を移動します
JSを圧縮/Action/ブックマークレットの作成.workflow →「/Users/あなたのホームフォルダ/Library/Services」
③◎システム環境設定アプリを起動します
　Ⓐ◎キーボード→「ショートカット」→「サービス」（歯車のマーク）
　Ⓑ▽ファイルとフォルダ
　　「ブックマークレットの作成」にチェックを入れます→「ON」
※※※※※※※※※※※※※※※※

▽ブックマークレットの作成方法
例→
Ⓐ◎最初に、テンプレートファイルをコピーして「ジャバスクリプトのファイル」を作成します
「JSを圧縮/Action/bookmarklet_sample」フォルダ
　　１template.js
　　２jQuery_template.js　←２ブックマークレットでjQueryを使う場合のテンプレート
　　３jQueryUI_template.js
Ⓑ◎ここに処理の本体を記述のところに、プログラムを記入し、完成させます→「＊＊＊.js」
▽完成後の操作
①◎Finderアプリで「ジャバスクリプトのファイル」を選択します
②◎右クリック→「サービス」→「ブックマークレットの作成」
③◎同じフォルダに「ファイル名＋_demo_Bkml.min.js」のファイルが作成されます※※※※※※
＞ソースコード/01_Program/comment_demo.js
　　　　　　　　　　　　　comment_demo_Bk.min.js　 「圧縮のみ」
　　　　　　　　　　　　　comment_demo_Bkml.min.js 「圧縮とURIエンコード」※※※※※
④◎書き出し内容は、クリップボードにも「コピー」されています※※※

▽ブックマークレットの登録方法
①◎Safariブラウザのメニューバー「ブックマーク」→「ブックマークを編集...」
「お気に入り」をクリックし、項目を「OPTION」＋ドラッグして複製し、編集します
　　Ⓐ◎名前→「適当に名前を付けます」
　　Ⓑ◎アドレス欄に「ペースト」してください※※※※※※

△注意事項
圧縮した後も「ジャバスクリプトのファイル」は当然そのまま残ります
圧縮ファイルを作成する前に「comment_demo_Bk.min.js」が存在すると、上書きされます
このプログラムは
s.pressアプリでは、変換されない日本語の文字列を「ユニコード」に変換してくれます
▽Closure Compiler Application（開発者ページ）
Getting Started with the Closure Compiler Application  |  Closure Compiler  |  Google Developers
＊＊＊＊＊＊＊＊＊＊＊＊＊
＊＊＊＊＊＊＊＊＊＊＊＊＊
１▼OSＸをお使いの方へ＊＊＊商品検索MeCabブックマークレットのご案内＊＊＊Ⓤ＊＊＊
あなたが普段、表示するWEBページにワンクリックで「機能」を追加するアプリです
ジャバスクリプトを読み込めない場合を除き、
どこのページにも機能を追加でき、WEBページを開いてボタンをクリックするだけですぐご利用いただけます
お客様にしていただくのは「キーボードを押すこと＊＊＊」と「マウスを操作すること」だけです
【１こんな使い方もできますー英語の単語帳】
例えば、英語の授業で、分からない単語を辞書で調べてノートに書き写し、次の授業に備える
辞書で調べた内容から、さらに辞書を引く。
このようないわゆる「単語帳」をスマートに作成する機能があります（内蔵辞書を使用）＊＊＊
スキャナのOCR「文字読み取り機能」を使って、文字列を読み取りさえすれば、
スムースに「単語帳」をA４用紙に印刷できます。（横向き４列）
辞書の検索結果は、ドラッグして並べ替えや削除でき、必要な部分だけを印刷できます
すべてを手書きで書き写すのはとても大変です。
文字列をパソコン内に読み込みさえすれば、速攻でしかも美しく印刷できます。
友達にコピーしてあげると喜ばれるかもしれません。
＊＊＊＊＊＊＊＊＊＊＊＊＊
上の例は、表示中のWEBページの内容を使って、通常コンテンツを表示、印刷する機能を使用したものです
外部からの読み込みにも対応させることで「単語帳」の作成が可能となっています
詳しくは→【１通常コンテンツのプリント手順】
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
【２英語の読み上げもスムース】
また、OSXにはびっくりするくらいすごい英語読み上げエンジンが搭載されています。これも使用できます
英文を選択後に「Ｔ」キーを押すと、読み上げが開始されます。＊＊＊｜Ｔ｜
右手のマウスで「文字列」をドラッグし、左手で「Ｔ」キーを押します。
英文を連続して読み上げたい場合、心地よくスムースに操作していただけます
【３こんな使い方もできますー商品コレクションの印刷】
このブックマークレットには「バーコード付き商品アイテム」を作成、印刷する機能もあります
お客様は「自分で好きなモノ」を自由に選んで、商品コレクションをいつでも作成できるようになります＊＊＊
商品ボックスには、
｜商品リンク｜画像｜文字情報｜商品バーコード｜GPS＋建物内コード｜QRコード｜URLリンク集｜など...
弁当箱に調理したモノを詰めるように、コンパクトでスマートに情報を収納できます。編集も自在です
また、ゼロから作成することもできます
例えば、アマゾンの商品ページで、適当な文字列を選択後に「１」キーを押すと商品ボックスが表示されます ＊＊＊｜Amazon｜＊＊＊１
その後「２」キーを押して「商品アイテム一覧ウインドウ」を新規に作成し、このウインドウから印刷する流れになります。＊＊＊｜２｜
２つ目以降の場合は、このウインドウへ「商品アイテム」を直接ドラッグして追加します→＿▢▢▢＿２＿▢▢▢
商品アイテム一覧ウインドウの「書き出しサンプル」を別ページの最後尾に用意しました
商品ボックスの操作方法や印刷手順も、こちらに記載しました→【書き出しサンプルへ移動します】
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
あなたが普段、表示するWEBページから
次から次とモノが溢れ出てくる感じや
それをスマートにコントロールしたときの心地よさを体験してもらいたいです＊＊＊
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
２▼（作成者側から見た）商品検索MeCabブックマークレットとは＊＊＊Ⓤ＊＊＊
WEBページの「単語」に情報を埋め込み、ポップアップで表示させるための統合ツールです。
ゼロからデータを作成するところから始まって
サーバーへのデータ送信、表示、印刷、さらにデータベースを使った共有表示まで
これらの一連のすべての操作を、ブラウザから行います
データは、同じサイト内の別の場所にアップロードされます
なので、WEBページはまったく汚しません
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
販売者のページでは、単に表示させるだけでなく
WEBページ内の「単語」に情報を埋め込む時などに、自由に使ってもらえる「基礎データ」を取得させる役割を併せ持ちます
販売されるその商品に関するさまざまな情報を発生させる「種」になります＊＊＊１→｜１｜Ｕ｜
テレビCMや新聞・雑誌の広告は、一度表示したら消えてしまいます。
あなたの作った広告やあなたの販売する商品の広告が
その商品に興味の有る方に不自然なく手元にストックしていだだけるとしたら、うれしいですよね。
主に、販売者からご提供いただいく基本情報を元に、
（作成者が）それぞれ独自の商品の広告と情報コンテンツの提供を同時に行えるようにすることで
使う方、作る方、販売される方、それぞれの方にメリットのある仕組みになっています＊＊＊
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
例えば、普通にダイレクトメールを送ってもほとんどの場合、ゴミ箱に捨てられてしまいます。
この仕組みは、それとは、真逆の発想です。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
最も知っていただきたいことは、この考え方とか思想に関する部分です。これに比べれば、他は重要ではありません
そして、種が有機的につながる仕組みを持つことによってどうなるのか、想像してみてほしいということだけです。→【FUTURE（余談）】
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
動画付き使い方ガイド（ダウンロード先はこちら）｜スマートフォンで表示する場合はこちらから
タグ ：
Finder
サービスアクション
OSX
サービスメニュー
ジャバスクリプトを圧縮
closure-compiler
compiler.jar
ブックマークレットを作成

１宗像久男先生「ガンは3カ月で治せる病気！ブドウ糖はガンの餌だった」 ワールドフォーラム2016年9月
▽タイトル付き動画の書き出しサンプル（↑上）
▽この記事は「PC＿パソコン」用です
スマートフォンでは、記事が分割されるためこちらをクリックしてページを移動してください→同じ内容です
＊＊＊＊＊＊＊＊＊＊＊＊＊＊「WINDOWS＿DROP＿ONLY」＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ウインドウズなどOSＸ以外は、こちらを「お気に入りバー」にドラッグするだけで「OK」です→＿▢▢▢
例→ VimeoⓊ２
＊＊＊＊＊＊＊＊＊＊＊＊＊＊「INSTALL＿FILE」＊＊＊＊＊＊＊＊＊＊＊＊＊＊
▽動画の埋め込み用のHTMLダグの作成に必要なファイルをダウンロードします（OSX_Safari_Only）
最初に、下記のリンクから
「商品検索MeCabブックマークレット」または「体験版」をダウンロードします＊＊＊
使い方マニュアルを参考にインストールします
http://snowjobs.blog.jp/archives/mecab_outline.html

＊＊＊＊＊＊＊＊＊＊＊＊＊＊「BOOKMARKLET＿DROP」＊＊＊＊＊＊＊＊＊＊＊＊＊＊
以下は、インストール「完了後」の操作になります（OSX_Safari_Only）
▽インストール後のCHECK
①◎ローカルサーバーの動作を確認します（Apacheサーバーの動作を確認します）
　MacOSX  「It works!」→ http://localhost/index.html の内容 がブラウザで表示されます
②◎PHPプログラムの動作確認
　http://localhost/phpinfo.php（→PHPの設定情報が表示されたら、PHPは機能しています）
③◎動画の埋め込み用のHTMLダグを作成するためのブックマークレットを登録します→「完了」
　下のリンクを「お気に入りバー」にドラッグしてください
　　 動画を埋め込むためのHTML書き出し →「お気に入りバー」（タイトルは使いやすいように短くします
例→ VimeoⓊ
＊＊＊＊＊＊＊＊＊＊＊＊＊＊「BOOKMARKLET＿DROP__WINDOWS」＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ウインドウズなどOSＸ以外は、こちらをお気に入りバーにドラッグします
例→ VimeoⓊ２
＊＊＊＊＊＊＊＊＊＊＊＊＊＊「EXPORT＿MOVIE＿HTML」＊＊＊＊＊＊＊＊＊＊＊＊＊＊
▽WEBページに、動画を埋め込むための「HTML文字列」を作成するブックマークレットの使い方
①◎最初に、Youtube または Vimeo の動画視聴ページをブラウザで表示します→「＊＊＊＊＊＊」
　　https://www.youtube.com/watch?v=＊＊＊＊＊＊
　　https://vimeo.com/＊＊＊＊＊＊
②◎お気に入りバーにドロップした「VimeoⓊ」をクリックします
③◎ウインドウに表示される文字列をコピーします→「完了」（キャンセルボタンで閉じます）
▽例１→ 最初の値は、横幅が可変します（親要素に幅が設定されていない場合）△「OK」ボタンをクリックする前の、はじめに表示されるHTMLタグ
HTML→
<DIV CLASS="h2_Class_d">
	<SPAN><SPAN class="hM_W4">１</SPAN>宗像久男先生「ガンは3カ月で治せる病気！ブドウ糖はガンの餌だった」 ワールドフォーラム2016年9月</SPAN>
</DIV>
<DIV style="position: relative; width: 100%; margin-bottom: 6px; padding-top: 56.25%;">
	<iframe width="480" height="270" src="https://www.youtube.com/embed/KJJfFzZBu3I?feature=oembed&amp;rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
</DIV>
<!--- <DIV CLASS="h3_Class"><span>宗像久男先生「ガンは3カ月で治せる病気！ブドウ糖はガンの餌だった」 ワールドフォーラム2016年9月</span></DIV> --->
<BR>
▽書き出し
　①◎タイトルを追加→「OK」＊＊＊
　②◎タイトルを追加し、横幅を設定します→「６４０」
　③◎横幅を設定します→「６４０ｔ」△末尾を「ｔ」タイトルは追加しません
また、
タイトルの表示に使用するスタイルシートを追加しない場合は、先頭に「Ｃ」を入力します
　①◎タイトルを追加→「Ｃ」
　②◎タイトルを追加し、横幅を設定します→「ｃ６４０」
▽例２「OK」をクリックした後の、２回目に表示されるHTMLタグ＊＊＊
HTML→
<DIV class="comment_gothic youtube_editor m"> <!---＊＊＊↓内容をDIVタグで囲います＊＊＊--->
<DIV class="h2_Class_d">
	<SPAN><SPAN class="hM_W4">１</SPAN>宗像久男先生「ガンは3カ月で治せる病気！ブドウ糖はガンの餌だった」 ワールドフォーラム2016年9月</SPAN>
</DIV>
<DIV style="position: relative; width: 100%; margin-bottom: 6px; padding-top: 56.25%;">
	<iframe width="480" height="270" src="https://www.youtube.com/embed/KJJfFzZBu3I?feature=oembed&amp;rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
</DIV>
<!--- <DIV CLASS="h3_Class"><span>宗像久男先生「ガンは3カ月で治せる病気！ブドウ糖はガンの餌だった」 ワールドフォーラム2016年9月</span></DIV> --->
<BR>
<!---＊＊＊↓タイトルの表示に使用するスタイルシート＊＊＊--->
<style type="text/css">...</style>
</DIV>
＊＊＊＊＊＊＊＊＊＊＊＊＊
＊＊＊＊＊＊＊＊＊＊＊＊＊
１▼OSＸをお使いの方へ＊＊＊商品検索MeCabブックマークレットのご案内＊＊＊Ⓤ＊＊＊
あなたが普段、表示するWEBページにワンクリックで「機能」を追加するアプリです
ジャバスクリプトを読み込めない場合を除き、
どこのページにも機能を追加でき、WEBページを開いてボタンをクリックするだけですぐご利用いただけます
お客様にしていただくのは「キーボードを押すこと＊＊＊」と「マウスを操作すること」だけです
【１こんな使い方もできますー英語の単語帳】
例えば、英語の授業で、分からない単語を辞書で調べてノートに書き写し、次の授業に備える
辞書で調べた内容から、さらに辞書を引く。
このようないわゆる「単語帳」をスマートに作成する機能があります（内蔵辞書を使用）＊＊＊
スキャナのOCR「文字読み取り機能」を使って、文字列を読み取りさえすれば、
スムースに「単語帳」をA４用紙に印刷できます。（横向き４列）
辞書の検索結果は、ドラッグして並べ替えや削除でき、必要な部分だけを印刷できます
すべてを手書きで書き写すのはとても大変です。
文字列をパソコン内に読み込みさえすれば、速攻でしかも美しく印刷できます。
友達にコピーしてあげると喜ばれるかもしれません。
＊＊＊＊＊＊＊＊＊＊＊＊＊
上の例は、表示中のWEBページの内容を使って、通常コンテンツを表示、印刷する機能を使用したものです
外部からの読み込みにも対応させることで「単語帳」の作成が可能となっています
詳しくは→【１通常コンテンツのプリント手順】
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
【２英語の読み上げもスムース】
また、OSXにはびっくりするくらいすごい英語読み上げエンジンが搭載されています。これも使用できます
英文を選択後に「Ｔ」キーを押すと、読み上げが開始されます。＊＊＊｜Ｔ｜
右手のマウスで「文字列」をドラッグし、左手で「Ｔ」キーを押します。
英文を連続して読み上げたい場合、心地よくスムースに操作していただけます
【３こんな使い方もできますー商品コレクションの印刷】
このブックマークレットには「バーコード付き商品アイテム」を作成、印刷する機能もあります
お客様は「自分で好きなモノ」を自由に選んで、商品コレクションをいつでも作成できるようになります＊＊＊
商品ボックスには、
｜商品リンク｜画像｜文字情報｜商品バーコード｜GPS＋建物内コード｜QRコード｜URLリンク集｜など...
弁当箱に調理したモノを詰めるように、コンパクトでスマートに情報を収納できます。編集も自在です
また、ゼロから作成することもできます
例えば、アマゾンの商品ページで、適当な文字列を選択後に「１」キーを押すと商品ボックスが表示されます ＊＊＊｜Amazon｜＊＊＊１
その後「２」キーを押して「商品アイテム一覧ウインドウ」を新規に作成し、このウインドウから印刷する流れになります。＊＊＊｜２｜
２つ目以降の場合は、このウインドウへ「商品アイテム」を直接ドラッグして追加します→＿▢▢▢＿２＿▢▢▢
商品アイテム一覧ウインドウの「書き出しサンプル」を別ページの最後尾に用意しました
商品ボックスの操作方法や印刷手順も、こちらに記載しました→【書き出しサンプルへ移動します】
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
あなたが普段、表示するWEBページから
次から次とモノが溢れ出てくる感じや
それをスマートにコントロールしたときの心地よさを体験してもらいたいです＊＊＊
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
２▼（作成者側から見た）商品検索MeCabブックマークレットとは＊＊＊Ⓤ＊＊＊
WEBページの「単語」に情報を埋め込み、ポップアップで表示させるための統合ツールです。
ゼロからデータを作成するところから始まって
サーバーへのデータ送信、表示、印刷、さらにデータベースを使った共有表示まで
これらの一連のすべての操作を、ブラウザから行います
データは、同じサイト内の別の場所にアップロードされます
なので、WEBページはまったく汚しません
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
販売者のページでは、単に表示させるだけでなく
WEBページ内の「単語」に情報を埋め込む時などに、自由に使ってもらえる「基礎データ」を取得させる役割を併せ持ちます
販売されるその商品に関するさまざまな情報を発生させる「種」になります＊＊＊１→｜１｜Ｕ｜
テレビCMや新聞・雑誌の広告は、一度表示したら消えてしまいます。
あなたの作った広告やあなたの販売する商品の広告が
その商品に興味の有る方に不自然なく手元にストックしていだだけるとしたら、うれしいですよね。
主に、販売者からご提供いただいく基本情報を元に、
（作成者が）それぞれ独自の商品の広告と情報コンテンツの提供を同時に行えるようにすることで
使う方、作る方、販売される方、それぞれの方にメリットのある仕組みになっています＊＊＊
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
例えば、普通にダイレクトメールを送ってもほとんどの場合、ゴミ箱に捨てられてしまいます。
この仕組みは、それとは、真逆の発想です。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
最も知っていただきたいことは、この考え方とか思想に関する部分です。これに比べれば、他は重要ではありません
そして、種が有機的につながる仕組みを持つことによってどうなるのか、想像してみてほしいということだけです。→【FUTURE（余談）】
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
動画付き使い方ガイド（ダウンロード先はこちら）｜スマートフォンで表示する場合はこちらから
タグ ：
oEmbed
Youtube
Vimeo
OSX
Apacheサーバー
商品検索MeCabブックマークレット体験版

↑このページのトップヘ