http://lightbox.on.coocan.jp/html/utf8tool.php?hex=26C4&col=FFC0CB&target=26C4,26C5,26D4,26F3,26F5,26FD,2709 この URL で utf8 文字ツール を表示すると、先頭が 0x26C4 の文字になり、26C4,26C5,26D4,26F3,26F5,26FD,2709 で指定された文字の背景を col で指定した背景色にする事ができます。(hex=26C4 は、num=9924 でも動作します) また、この URL で表示されたページにあるボタンで表示位置を変更しても、範囲内に選択した文字があれば、背景色は変更されたまま表示されます。元の位置に戻したい場合は、F5 で再表示して下さい。
1) 右上の ● をクリックするとその文字が先頭になります 2) 文字の下の &#nnnnn; は、HTML 上で有効な文字そのものです 3) その下は、nnnnn を 16進数に変換したものです 4) 一番下は、文字そのもののコードを16進数であらわしています3種類のコード部分はクリックすると選択されるので、CTRL+C でコピーして利用しやすくなっています。 本体の文字が連続して欲しい場合は、先頭にしたい文字の右上の ● をクリックしてから、文字一覧取得ボタンをクリックしてウインドウを表示させると、その中のテキストエリアに320文字を連続して表示しています。
2020年05月25日
utf8 文字ツール の 文字参照リンクの作成方法
ほぼ、Google Chrome 限定ですが Web Speech API の現時点での実装と問題点回避方法
※ 長い文章を試すと、安全なのは 70文字くらいでした。長すぎると壊れて、Google Chrome を再起動する必要がありました Window.speechSynthesis 何故か最初のロードで speechSynthesis.getVoices() は一覧を取って来ません。この一覧でコンボボックスを作る必要があるので、とても回りくどい事をしています。 インターネットを調べましたが、過去のものは動かないものが多く、理由はこの Voice をセットしていない事が原因でした。
UI を jQuery で実装
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<textarea id="target_text" style='width:300px;height:60px;'>こんにちは</textarea><br>
<input type="button" id="speech_button" value="実行">
<select id="voice"></select>
<script>
var voice_types;
$(function(){
if ( typeof SpeechSynthesisUtterance === 'undefined' ) {
$('#target_text').val("Web Speech API は使えません");
}
// 初回ロード
speechSynthesis.getVoices();
// 詳細取得
get_voice_type ();
$("#speech_button").on("click", function() {
// 念のために取り出す
voice_types = speechSynthesis.getVoices();
if ( voice_types.length == 0 ) {
// 再取得で無かった場合、もう一度
get_voice_type ();
return;
}
var speech = new SpeechSynthesisUtterance($("#target_text").val());
// 選択した言語を使う
speech.voice = voice_types[ $('#voice > option:selected').val() ];
speechSynthesis.speak(speech);
});
});
function get_voice_type () {
setTimeout(function(){
voice_types = speechSynthesis.getVoices();
$('#voice > option').remove();
for( i = 0; i < voice_types.length; i++) {
$('#voice').append($('<option>').text(voice_types[i].name).val(i));
}
$('#voice').prop("value",12);
},100);
}
</script>
ここでは使っていませんが、pitch は声の高さを 0.1 づつで 1.6 ぐらいが限界みたいです(それ以上はかすれた変な声)。rate は速さで 0.1 づつ増やせますが、1.8 くらいで聞き取りは限界です。 関連する記事 Google Chrome での音声認識処理
Google Chrome での音声認識処理
試したくて、マイクを見にヤマダ電機に言ったら、最低でも780円くらいしたのでやめて、古い WEBカメラを引っ張り出して使ったら使えました。 参考にしたのは、こちら 処理の中核を確認して、音声が途切れる毎に表示 DIV を追加する方式にして実装しました。イベントはたくさんありますが、直接必要なのは result イベントです。全く音声がない時間が５秒くらい? 続くと自動的に終わります。 Google Chrome の設定のプライバシーのコンテンツの設定でマイクを選びました。例外の管理では、一度ブロックしたサイトの削除して使えるようにできます。ソースコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input id="st_btn" type="button" value="開始">
<input id="ed_btn" type="button" value="終了">
<div id="info"></div>
<div id="result">
<div id="first_text"></div>
</div>
<script>
var rec = null;
var target = $("#first_text");
$(function(){
if ( typeof webkitSpeechRecognition === 'undefined' ) {
$("#info").text("使用できません");
$("#st_btn").prop("disabled", true);
$("#ed_btn").prop("disabled", true);
}
else {
// インスタンス作成
rec = new webkitSpeechRecognition();
// 初期設定
rec.lang = "ja-JP";
rec.interimResults = true;
rec.continuous = true;
// イベント登録
rec.onerror = function(){
$("#info").text("error");
};
rec.onnomatch = function(){
$("#info").text("nomatch");
};
rec.onsoundstart = function(){
$("#info").text("音検知");
};
rec.onsoundend = function(){
$("#info").text("soundend");
};
rec.onspeechstart = function(){
$("#info").text("スピーチ開始");
};
rec.onspeechend = function(){
$("#info").text("スピーチ終了");
};
rec.onstart = function(){
$("#info").text("開始");
};
rec.onend = function(){
$("#info").text("終了");
};
// 結果テキストの作成
rec.onresult = function(ev){
var obj = ev.results;
for (var i = ev.resultIndex; i < obj.length; i++ ) {
if( obj[i].isFinal ) {
target.text(obj[i][0].transcript);
target = $("<div></div>");
$("#result").append(target);
}
else {
target.text(obj[i][0].transcript);
}
}
};
// ボタンイベント
$("#st_btn").on("click",function(){
rec.start();
$("#st_btn").prop("disabled",true);
})
$("#ed_btn").on("click",function(){
rec.stop();
$("#st_btn").prop("disabled",false);
})
}
});
</script>
関連する記事 ほぼ、Google Chrome 限定ですが Web Speech API の現時点での実装と問題点回避方法
2020年05月24日
PHP : 曲線が必要ならば ImageMagick ( 但し使えるかどうかはサーバー次第 )
( ▼ クリックすると拡大して、画像の外をもう一度クリックすると戻ります )GD と比べてはるかに美しい曲線を描画できます。 ロリポップでは普通に使えます さくらインターネットでは、php.ini に extension=imagick.so を追加 するだけで使用できるようになります ▼ 楕円
<?php
header("Content-type: image/png");
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "pragma: no-cache" );
header( "Cache-control: no-cache" );
$canvas = new Imagick();
$canvas->newImage(300, 300, "#C0C0C0");
$draw = new ImagickDraw();
$draw->setFillColor("#FFFFFF");
$draw->setStrokeColor( "#000000" );
$draw->setStrokeWidth(4);
$draw->arc( 50, 60, 250, 240, 0, 360 );
$canvas->drawImage($draw);
// フォーマット
$canvas->setImageFormat('png');
// 出力
print $canvas;
?>
▼ 四角形
<?php
header("Content-type: image/png");
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "pragma: no-cache" );
header( "Cache-control: no-cache" );
$canvas = new Imagick();
$canvas->newImage(300, 300, "#C0C0C0");
$draw = new ImagickDraw();
$draw->setFillColor("#FFFFFF");
$draw->setStrokeColor( "#000000" );
$draw->setStrokeWidth(4);
$draw->rectangle( 50, 50, 250, 250 );
$canvas->drawImage($draw);
// フォーマット
$canvas->setImageFormat('png');
// 出力
print $canvas;
?>
関連する記事 ImageMagickをWindowsのPHPで利用するPHP : 曲線が使い物にならない GD ライブラリ
さくらインターネットでは、PHP で extension=imagick.so するだけで ImageMagick が使えます
マニュアル 画像処理 [ImageMagick] : php オンラインマニュアル
2020年05月23日
ロリポップの WordPress に Twenty Fifteen テーマをインストールして、その子テーマを作成する
必要なものは、style.css と functions.php WordPress Codex は解りづらい。 なのでとにかく空でいいので style.css と functions.php を wp-content/themes/twenty-fifteen-my-child に作成します フォルダ名は自由。 Template: twentyfifteen がstyle.css のコメント内にあればいい style.css
/* Theme Name: Twenty Fifteen My Child Theme URI: none Description: none Author: lightbox Author URI: none Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-my-child */
※ Theme Name: に書かれたものが WordPress内で テーマ名 として表示されます functions.php PHP タグの上下には何もいれないようにします。( 日本語は書かないでください )
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
?>
上の中身は最後に入れます まず、ディレクトリを作成して空のファイルを作成する方法ですが、一般的な FTP ソフトであれば、そのままの構造をローカルで作成してアップロードしてしまえばいいです。( できるのであれば、その際に中身もそれぞれのファイルに保存してもいいですが、WordPress のテーマエディタを使ったほうがより肌で意味を感じ取れると思います ) FTP ソフトが無い場合は、ロリポップの 『ロリポップ！FTP』で、ディレクトリを作成して、その中に二つのファイルを作成すればいいです。この際、Apple の PC で『ロリポップ！FTP』経由で内容を書き込もうとすると改行コードを正しく扱わないので WordPress で内容を書き込みます。それがいいです。 ▼ これをアップロード▼ アップロード完了
この時点では、WordPress はこのディレクトリをテーマとは認識しませんが、テーマエディタで選択可能になります
なので、前述の内容をエディタで書き込めば利用可能になります
▼ 上の更新で既に、テーマ名は認識されています
▼ 後は有効化するだけです
jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
オンラインで実行画像を背景画像に使用する応用編もありますが、まずは title 属性 で試した後、contents オプションでバルーンをカスタマイズする方法から入るといいと思います。 ※ サンプルの contents には、Google Chrome で動作する HTML5 のコンテンツ( カレンダー )を使用しています jquery.balloon.js ダウンロードページ 設置サンプルコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://winofsql.jp/js/jquery.balloon112.js"></script>
<script>
$(function(){
$('#target1').balloon({
// 吹き出しを右に出すと画面の邪魔にならない場合が多いです
position: "right",
// 吹き出し端に付く正三角形のサイズ（高さ）
tipSize: 20,
// 吹き出しの CSS 設定です
css: {
"color": "#0000ff",
"font-size": "20px",
"font-weight": "bold",
"border": "solid 2px #111",
"padding": "20px",
"background-color": "#eee",
"opacity": 1,
}
});
$('#target2').balloon({
// 吹き出しを右に出すと画面の邪魔にならない場合が多いです
position: "right",
// 吹き出し端に付く正三角形のサイズ（高さ）
tipSize: 20,
// 吹き出しの CSS 設定です
css: {
"height": "270px",
"opacity": "1",
"color": "#000",
"font-size": "16px",
"border-radius": "10px",
"border": "solid 2px #A63814",
"padding": "10px",
"background-color": "#eee",
"opacity": 1,
},
// CSS の対象となる、吹き出しの内部コンテンツを定義します
"html": true,
"contents": '<img src="https://winofsql.jp/image/sab.gif"> ここには HTML を記述できます<br>▼ Google Chrome だと日付コントロール<br><input type="date">'
});
});
</script>
<pre>
▼ HTML の title 属性内を使用するシンプルなバルーン
<span
style='display:inline-block;border: solid 1px #ccc;padding: 20px;background-color:#333;color:#fff'
id="target1"
title="日本語表示あいうえお"
>この要素内の title 属性を使う</span>
▼ プラグイン側で、HTML の コンテンツを文字列を作成する応用編
<span
style='display:inline-block;border: solid 1px #ccc;padding: 20px;background-color:#333;color:#fff'
id="target2"
>contents オプションで HTML をバルーン内に表示</span>
</pre>
▼ HTML の title 属性内を使用するシンプルなバルーン この要素内の title 属性を使う ▼ プラグイン側で、HTML の コンテンツを文字列を作成する応用編 contents オプションで HTML をバルーン内に表示 関連する記事
jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
