2015年08月

ClipMenu0.4.4a12 △クリップボードの履歴をペースト***③☆☆☆ダウンロード

ClipMenu は、
 ユーザーがコピーした内容の履歴を保存して貼り付け作業を便利にするアプリです。

クリップボード履歴の数は、自由に設定できます。
よく使う項目はスニペットとして登録できて、いつでもペーストできます。
履歴やスニペットなどのメニュー項目を右クリックアクションメニューを呼び出せます。

▽右クリックで選択した文字列を加工するプログラムを「アクション」と呼びます。
カスタムアクションのヘルプ(説明)

①◎今日の日付をコピー08月08日(土)
 half_templete="0123456789";
 zen_templete="0123456789";
 week_templete="日月火水木金土";
//①◎今日の日付オブジェクトをdataに取得します
 var data=new Date();
/*▽昨日の日付オブジェクトをdataに取得する場合----------------------------
  var today = new Date();
  var todayYear =today.getFullYear();
  var todayMonth =today.getMonth();
  var todayDate =today.getDate();
  var data=new Date(todayYear, todayMonth, todayDate - 1); -----------------*/
 var mon=(data.getMonth()+1).toString();
 var day=(data.getDate()).toString();
 if (mon.length<=1){mon="0"+mon;}
 if (day.length<=1){day="0"+day;}
 var mon= zenkaku(mon);
 var day= zenkaku(day);
 var week=week_templete.charAt(data.getDay());
 var today=mon+"月"+day+"日"+"("+week+")";
 return today;
function zenkaku (moji) {
  var result_="";
  for(var i=0; i<moji.length; i++){
   this_str=moji.charAt(i); //①◎文字列から i 番目の1文字を取り出します
   index =half_templete.indexOf(this_str, 0); //半角テンプレートからの文字がある場合
   if (index >=0) {
    this_str=zen_templete.charAt(index);} //全角テンプレートからindex 番目の1文字を取得
    result_= result_+this_str;
  }//---for(var i=0; i<moji.length; i++){
  return result_;
}
②◎RGBカラーを切替.js rgb(246, 247, 251); ⇄ #F6F7FB;

③◎ユーザー辞書_plist.js
▽IMEのタブ区切りテキストやことえり単語辞書をOS X 用に変換して取り込めます。
カンマまたはタブ区切りの読み語句品詞....⇄ⒷOSXのユーザー辞書
 あす,08月09日(日)              品詞....以降は切り捨てられます
 うえ,⇅
拡張子を plist [システム環境設定][キーボード]▽ユーザー辞書にドラッグしてください。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
 <array>
  <dict>
   <key>phrase</key>
   <string>08月09日(日)</string>
   <key>shortcut</key>
   <string>あす</string>
  </dict>
  <dict>
   <key>phrase</key>
   <string>⇅</string>
   <key>shortcut</key>
   <string>うえ</string>
  </dict>
 </array>
</plist>

④◎ユーザー辞書_VCARD.js
▽IMEのタブ区切りテキストやことえり単語辞書をIOSデバイス用にアドレスカード形式に変換
カンマまたはタブ区切りの読み語句品詞....⇄ⒷOSXのアドレスカード形式
 あす,08月09日(日)              
 うえ,⇅
拡張子を vcf [連絡先]▽右側にドラッグしてください。
BEGIN:VCARD
VERSION:3.0
PRODID:-//Apple Inc.//Mac OS X 10.10.3//EN
N:.;08月09日(日);;;
FN:08月09日(日) .
X-PHONETIC-FIRST-NAME:あす
ORG:あす;
END:VCARD
BEGIN:VCARD
VERSION:3.0
PRODID:-//Apple Inc.//Mac OS X 10.10.3//EN
N:.;⇅;;;
FN:⇅ .
X-PHONETIC-FIRST-NAME:うえ
ORG:うえ;
END:VCARD

CotEditor2.1.6△プログラミング向けシンプルテキストエディタ ***③☆☆☆ (2015/07/17)
OS X10.8以降はこのバージョンになります。

SnowLeopard からYosemite に変更した時、
前回と同じ設定にするのに時間がかかってしまいました。

もしよかったら、
自分の設定を参考にしてください。


CotEditorの環境設定
[メニューバー][CotEditor][環境設定...]
①◎一般

②◎ウインドウ


③◎表示

①◎フォント: ヒラギノ丸ゴ ProN W4 14 ▽フォントサイズを14px***③☆☆☆
②◎行の高さ:0.88倍 ▽***③☆☆☆
③◎基本
 カラーのテーマのClassicを[歯車マーク▽][複製]新規にテーマを作成してください。
 新規テーマの値を変更します。△上の画像 ↑では [Classic] のままですが...

  文字    424242 16進数カラー値
  カーソル  000000
  不可視文字 7F7F7F
▷2列目
  背景    FFFFFF
  現在の行  D7F3B8
  選択範囲  A4CDFF //システムカラーを使う
④◎シンタックス
  キーワード 0C1A7E
  コマンド  0C1A7E
  タイプ   0D8DA8
  属性    760F50
  変数    434343
▷2列目
  値     0C1A7E
  数値    0000FF
  文字列   891314
  文字    0000FF
  コメント  236E25
④◎編集

▽ブックマークファイルは以下のウェブブラウザに対応しています
 ⒶFirefox
 ⒷGoogle chrome
 ⒸSafari5.1.7(Windows)
 ⓇSafari8.0.5(Mac OS X 最新版)
 Ⓔ△Internet Explorer でも読み込めるようです[追加]
①◎ブックマークのインポートする
 簡単な操作で複数のリンクを同時にブックマークに保存できます***③☆☆☆
Windows7の場合------------
Firefox
 右上のメニュー「履歴」[すべての履歴を表示]
 [インポートとバックアップ ▽][HTMLからインポート(I)...]
Google chrome
 右上のメニュー(Chromeの設定)[ブックマーク][ブックマークマネージャ(B)]
 [管理▽][HTMLファイルからブックマークをインポート...]
Internet Explorer11
 右上の[]お気に入りに追加の右側の[][インポートとエクスポート...]
  [ファイルからインポートする(I)][お気に入り][①◎参照][②◎どこにインポートしますか]
   ①◎ダウンロードフォルダにある「フォントのブックマーク.html」を指定します
   ②◎インポートする「場所」を指定できます
Safari5.1.7(Windows7)
 [メニューバー][ファイル][ブックマークをインポート...]
MacOSX の場合------------
Firefox
 [メニューバー][ブックマーク][すべてのブックマークを表示]
 [左から4番目の▽][HTML から読み込む...]
Google chrome
 [メニューバー][ブックマーク][ブックマークマネージャ]
 [管理▽][HTML ファイルからブックマークをインポート...]
Safari8.0.5(MacOSX)
 [メニューバー][ファイル][読み込む▷][ブックマークの HTMLファイル...]

②◎フォントのインストール
Safari8.0.5(Mac OSだけ解説します)
 [ホーム][ライブラリ][Fonts]ここにフォルダとともにドラッグしてください ↓
△フォントは直接ダブルクリックしてインストールしないでください。

▽空フォルダを目次に使っているところがポイントです***③☆☆☆


フォントのブックマーク.html[右クリック][ダウンロード...]
フォントの空フォルダ.zip

Macで作成しましたので
Windowsでは文字化けするかもしれません。


フォントの使い方[追加]
ウインドウズ
①◎Font Changer1.01***③☆☆☆_

 Windowsのシステムフォントを任意のものに変更できますアプリ全体に適用されます
IOSアプリ
②◎Phont △追加したフォントはさまざまなアプリで使用可能になります***③☆☆☆


有料でダウンロードできるフォント
 ⒶOpenType CS80-DL ヒラギノ丸ゴ W4 StdN V8.00(MacOSX に標準搭載)
 ⒷOpenType CS80-DL ヒラギノ丸ゴ W3 StdN V8.00
  MacOSX には搭載されていない
  「ヒラギノ丸ゴ W4」より少し線の細い特別なフォントです ***③☆☆☆
 Ⓡヒラギノ丸ゴシック体の書体見本[詳細見本へ]
ヒラギノフォントのメリット
①◎「Font Changer1.01」アプリで
  システムフォントを「ヒラギノ丸ゴStdN」に変更すると
   適用前に比べて格段にキレイに表示されます。
②◎特にSafari5.1.7アプリのブックマークの編集画面では顔がほころびます
  ブックマークの各タイトルに
  「△***③◎☆☆☆ ⒶⓏ」などの特殊文字も利用できるようになります
③◎「WEBブラウザ」「システムフォント」「WORD」アプリなど幅広く利用できます。
  また、
  上記の「Phont 」アプリで Iphoneにインストールすることで
   いろいろなIOSアプリで使用できるようになります。

案の定
エンゲル係数

かい
句風
工夫
工夫(id=kufuu_je)
句風
工夫(id=koufu_j_1)
交付(id=koufu_j_2)
テスト
テスト-ケース(-ハイフンあり)
テストケース
test
test case
交付
テストケース           エンゲル係数

このプログラムは、
ヒラギノ丸ゴ ProN とSafari8.0.3(WebKit)に最適化されています***③☆☆☆

Windowsでは
①◎下記のフォントをインストールして表示して見てください。
  和田研中丸ゴシック2004絵文字P(2015/06/18)4.3.7.0

ライブドアブログでマウスオーバーポップアップを表示できるかテストしてみるの続きです
とりあえず出来てしまった。

簡単に解説したいと思います。

操作方法
 ①◎単語にマウスを合わせるとポップアップが表示されます。
 ②◎表示後単語をクリック表示/非表示を切り替えます。
        (非表示の状態は継続します)
 ③◎表示後単語またはポップアップ以外をクリック[閉じる]
 Ⓡポップアップの右下↘でサイズを自由に変更できます。
 Ⓡウインドウのサイズを変更時にポップアップ位置が自動で調整されます。

プログラムの概要
 ①◎まず単独で表示可能なHTML書類を作成します。
  http://snowjobs.blog.jp/content/2015_08_04/DICT/DICT_test.html
 ②◎テキスト入力欄の単語
  <span class="dictPanel">案の定</span><br>
  <span class="dictPanel">エンゲル係数</span><br>
  <span class="dictPanel" data-word="kufuu_je">工夫(id=kufuu_je)</span><br>
 ③◎span.dictPanelのdata-word属性の値またはテキスト内容⇄
  DICT_test.htmlのDIV.wordのid属性の値と一致する内容(DIV.word)をポップアップに表示します。

 Ⓡ一致する項目がない場合はまだやっていません。****

入力欄の内容(先頭部分のみ)----△jqueryとjquery-UI は読み込み済みです
 <script type="text/javascript" src="http://snowjobs.blog.jp/content/2015_08_04/popup_test.min.js"></script>
 <DIV id="DICT_file_URL" class="display_none" style="display:none;"
   data-dict_URL="http://snowjobs.blog.jp/content/2015_08_04/DICT/DICT_test.html"></DIV>
 <style type="text/css" >
  P.normal_16 {
   color:#636363; line-height: normal; font-size: 16px;
   font-family:"HiraMaruProN-W4","Hiragino Maru Gothic StdN"; }
 </style>
 <P class="normal_16">
  <span class="dictPanel">案の定</span><br>.....

ポイント***③☆☆☆
 ①◎DICT_test.htmlのCSSスタイルを<DIV>で囲っています。
   jQueryで内容を取り込めるようになります。

 ②◎DICT_test.htmlの画像は「絶対パス」で指定して、
   CSSスタイルもHTML内に書いてください。(単体とポップアップ表示用の2種類)

 ③◎ポップアップのリサイズの↘ボックスのCSSスタイルを忘れずに...
  .dict_popup .ui-resizable-se {
    position: absolute;
    z-index: 998;
    right: 0; bottom: 0;
    width: 16px; height: 16px;
    cursor: se-resize; }
問題点
 ①◎この方法はDICT_test.htmlの画像を含めたすべてを読み込みます。
  表示する時だけ画像を読み込むようにするのがベストです。PHP...?

 ②◎ポップアップ表示中は単語のspan.dictPanel に余白を追加するため、
   他の要素が少し移動してしまいます。上に要素を追加する...?


ライブドアブログでマウスオーバーポップアップを表示できるかテストしてみる ①◎jQueryなどのプログラムを自身のブログ内にアップロードします

[ログイン][マイページ][画像/ファイル][画像/ファイル]
[ファイル管理][フォルダを作る][script]
[script][jqeury.js][jquery-ui.js] にアップロードすると

アドレスは次のようになりました。

  http://snowjobs.blog.jp/script/jquery.js
  http://snowjobs.blog.jp/script/jquery-ui.js

[右クリック][リンクをコピー]で確認できます。
「http://ブログのURL」 に /フォルダ/ファイル名 を付けた
分かりやすいものになるようです。


無料ブログで
階層構造でファイルを管理、アップロードが可能だとは思いませんでした。***③☆☆☆


②◎ブログにプログラムを読み込む設定を記述します
[マイページ][ブログ設定][カスタムJS]
  <script type="text/javascript" src="http://snowjobs.blog.jp/script/jquery.js"></script>
  <script type="text/javascript" src="http://snowjobs.blog.jp/script/jquery-ui.js"></script>
[記入後][保存する]

[記事を書く]に戻りテキスト入力欄の下の[プレビュー]を押した後
プレビュー画面のウインドウに切り替えます

[右クリック][要素の詳細を表示]HTMLの<head>の内容を見ると
一番下の<!-- Add Header Tag // -->部分に読み込まれていることが確認できました。
△MacOSX Safari8.0.5


動作確認
 [画像をクリック]この画像のURLが表示されます
この記事のHTMLタグ編集の入力欄では次のように記載されています。

<span class="normal">△MacOSX Safari8.0.5</span>
<img src="http://snowjobs.blog.jp/content/2015_08_02/image/08021336.jpg" id="img_test">
<script type="text/javascript">
 $(function() {
  $("#img_test").click(function(event){alert( $(this).attr("src") ); });
 });
</script>

補足
上記のタグ付きのHTML文字列は
HTML文字実体参照にエスケープして表示しています。
(javascriptタグ内のプログラムを除く)

 <&lt; >&gt; .....
MacOSXではClipMenuアプリで簡単に変換できます。
ClipMenu0.4.4a12***クリップボードの履歴をペースト
 ①◎タグ付きのHTML文字列をコピーします△履歴メニューに保存されます
 ②◎画面右上のClipMenuボタン①◎のメニュー項目[右クリック]
 ③◎[HTML▷][HTML文字実体参照にエスケープ]ペースト完了

補足
jQueryとjQuery UIは次のようにダウンロードしてください。
 ①◎Download Builder | jQuery UI
 ②◎Version1.11.4 (Stable, for jQuery1.6+)
 ③◎画面の下[Download]解凍します
 Ⓐ[jquery-ui-1.11.4.custom][external][jquery]jquery.js
 Ⓑ[jquery-ui-1.11.4.custom]jquery-ui.js
△この2つをアップロードしてください。

↑このページのトップヘ