▽この記事は「PC_パソコン用です
スマートフォンでは、記事が分割されるためこちらをクリックしてページを移動してください同じ内容です
概要
この記事商品検索MeCabブックマークレット(統合ツール)追加した機能について解説します音声なし
WEBページ内
対応する各キーに対して、単語単位
広告付きHTMLコンテンツ間接的に埋め込む機能を追加しました
この機能は、キーボードまたはUIOP[] GHJKL; M,./合計17個のキーに対応しています
例えばWEBページ訪問者)「キーで表示させたい場合は
商品アイテム一覧ウインドウからAD_Ⓤブックマークレット使用して、書き出しアップロードを行います
 1単語ごとデータの書き出しキー単位での一括アップロード2つの機能を含みます__▢▢▢
次に
WEBページ各キーごとのHTMLファイルの場所の情報を記入した1行分の空要素のタグを書き込みます
埋め込みデータHTMLファイル)は、同じサイト別の場所にありますので、WEBページはまったく汚しません。
(△アップロード時に入力ダイアログで表示されますコピーします
これで(埋め込みデータの)表示の準備は完了です1書き出しとアップロード
キー検証用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ブックマークレットクリックし、
検索対象の文字列を選択したあとで、すもも」「もも」「」「」「うち」「中居正広のミになる図書館」...
キーを押すだけで、その単語に対応するデータをすぐに表示できます2(訪問者による)表示
さらに
その単語対応するデータがある場所を(表示させたポップアップURL情報
データベースに登録しておくことで
どこのWEBページからでも
OPTIONキーその場所のデータ引き出し、表示させることができます
が作成したものでも制限なく登録できます3(データベースを利用した)情報の相互利用
以上の3つの機能を新しく追加しました!!!

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

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

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

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

3HTML形式の単語データの編集
単語タイトルHTMLファイルを、Safariブラウザで開きますうち.html」
内容を編集した後AD_Ⓤクリックします「OK」 単語タイトルHTMLファイル書き換えられます
WEBサーバーFTPに対応している場合のアップロード」(2017年05月10日(水)---0607
 ライブドアブログFile Manager APIにも対応しました(+2018-02-16
キー単位での一括アップロード
単語タイトルHTMLファイルを、Safariブラウザで開きますうち.html」
お気に入りバーAD_Ⓤクリックします
  変更のあったHTMLファイルのみアップロード
  すべてをアップロード保存先フォルダアップロードします)FFF
 (最初に、FTPサーバーの情報などを指定ファイルに書き込む必要があります。詳しくは以下で解説します)
アップロード完了後入力ダイアログ」で
 「キー表示させるための空要素DIVタグが表示されますコピーします
 同じドメイン内HTMLファイルにそのままペーストします完了
例1キー
<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>
4FTPに対応していない場合は、手動でアップロード
作成した保存先フォルダブログにアップロードします(Cyberduckアプリを使用します)***
  「/Library/WebServer/Documents/data/Export/AD_WEB_PAGE/content_blog」フォルダドロップします
  http://snowjobs.blog.jp/data/Export/AD_WEB_PAGE/content_blog」***DIVタグ」***
5検証用の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/テスト00B.html
6動作確認
Safariブラウザで(検証用のHTMLファイルを)開いて、動作を確認します
お気に入りバードロップして登録してある)商品検索MeCabブックマークレットクリックし、
検索対象の文字列を選択したあとで、すもも」「もも」「」「」「うち」「中居正広のミになる図書館」...
キーを押します完了
また、HTML形式単語データに、複数商品アイテム収録してある場合
キーを押すことで表示切り替えます商品ボックス1つだけ表示されます)
以上で「単語ごとのデータの書き出しと一括アップロード」の解説を終了します
**************
は、
上記の方法で作成された埋め込みデータのあるWEBページ
キーを押して表示した単語データの場所データベースに登録しておくことで
どこのWEBページからでも(その文字列さえあれば)
OPTIONキーその単語に対応する場所のデータすぐに表示させることができます

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

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

**************「FTP_SETTING」**************
アップロードの初期設定WEBサーバーがFTPに対応している場合+ライブドアブログに対応しています
1アップロードに必要な設定ファイルの複製コピー
Finderアプリ「Library/WebServer/Documents/data/Export/AD_WEB_PAGE」フォルダを開きます
アップロードしたい保存先フォルダに以下の2つOPTIONドラッグして複製を移動させてください
  FTP_Connect.php***
  FTP_Permit.txt
2データフォルダを Finderアプリで開きます
アップロードしたい保存先フォルダフォルダを、開きます
/Library/WebServer/Documents/data/Export/AD_WEB_PAGE/content_blog 保存先フォルダ
                         AD_WEB_PAGE/content_blog/FTP_Connect.php***
                         AD_WEB_PAGE/content_blog/FTP_Permit.txt
3FTPサーバーの情報などを指定ファイルに書き込みます】***FTPライブドアブログ***
コピーして移動したFTP_Connect.php」をテキストエディタで開いて(324行目あたり)
FTPサーバーの接続情報など、以下の5項目を記入してください
**①◎FTPサーバー名ホスト名「ftp.blog.livedoor.com」(ライブドアブログ標準設定を使用した古いタイプ場合
 *②◎ユーザー名        「username」
 *③◎パスワード        「password」
 アップロード先ホームのURLアドレス 「http://blog.livedoor.jp/livedoorID/」(ブログURL設定
 FTPサーバー内基準フォルダ初期値 「data/Export/AD_WEB_PAGE」
ライブドアブログの場合はFile Manager API使用してアクセスします+2018-02-16
 ブログログインしAPI Keyから2つのデータを取得してご記入ください121行目あたり)
***ルートエンドポイント    「https://livedoor.blogcms.jp/blog/*MY_BLOG_NAME*/file_manager/」
   File Manager用パスワード ***
**************「APP」**************
使用したアプリケーション
CotEditorPHPファイルを開くためのテキストエディタアプリ
 https://coteditor.com/archives.ja(CotEditor3.1.8 日本語対応 リリース 2017-03-15
CyberduckWEBサーバーにファイルをアップロードするアプリ
 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」**************
テキストエディタの環境設定CotEditor3.1.8日本語版
メニューバーCotEditor環境設定...
①◎一般
②◎ウインドウ
③◎表示
④◎編集
⑤◎フォーマット
Shell Scriptのファイル関連付け拡張子にcommand を追加

ブックマークレットをテンプレートから作成します圧縮後にURIエンコードします
※※※※※※※※※※※※※※※
ウインドウズなどOSX以外は、こちらの入力欄をご利用ください1MBまでの制限があります
※※※※※※※※※※※※※※※
入力フォームの使い方(1MBまで
①◎最初にテンプレートを選択します」「」「
②◎ここに処理の本体を記述のところにプログラムを記入します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

宗像久男先生「ガンは3カ月で治せる病気!ブドウ糖はガンの餌だった」 ワールドフォーラム2016年9月
タイトル付き動画の書き出しサンプル
**************「WINDOWS_DROP_ONLY」**************
ウインドウズなどOSX以外は、こちらをお気に入りバードラッグするだけでOKです_▢▢▢
VimeoⓊ2
**************「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.phpPHPの設定情報表示されたらPHPは機能しています
③◎動画の埋め込み用のHTMLダグを作成するためブックマークレット登録します完了
 下のリンクお気に入りバードラッグしてください
   動画を埋め込むためのHTML書き出し お気に入りバー」(タイトルは使いやすいように短くします
VimeoⓊ
**************「BOOKMARKLET_DROP__WINDOWS」**************
ウインドウズなどOSX以外は、こちらをお気に入りバードラッグします
VimeoⓊ2
**************「EXPORT_MOVIE_HTML」**************
WEBページに、動画を埋め込むためのHTML文字列作成するブックマークレット使い方
①◎最初に、Youtube または Vimeo 動画視聴ページブラウザ表示します「******」
  https://www.youtube.com/watch?v=******
  https://vimeo.com/******
②◎お気に入りバードロップしたVimeoⓊクリックします
③◎ウインドウに表示される文字列コピーします完了」(キャンセルボタン閉じます
例1 最初の値は、横幅が可変します親要素に幅が設定されていない場合)△OKボタンクリックする前の、はじめに表示されるHTMLタグ
<DIV CLASS="h2_Class_d">
	<SPAN><SPAN class="hM_W4">1</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」***
 ②◎タイトルを追加し、横幅を設定します640
 ③◎横幅設定します640t」△末尾を「t」タイトルは追加しません
また、
タイトルの表示に使用するスタイルシートを追加しない場合は、先頭にを入力します
 ①◎タイトルを追加
 ②◎タイトルを追加し、横幅を設定しますc640
例2OKクリックした後の、2回目に表示されるHTMLタグ***
<DIV class="comment_gothic youtube_editor m"> <!---***↓内容をDIVタグで囲います***--->
<DIV class="h2_Class_d">
	<SPAN><SPAN class="hM_W4">1</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>

↑このページのトップヘ