Archive for Javascript

nicoコメ補助ツール【HTML5対応版】

アイキャッチ画像は、星乃もるさんです。

 

さて、たいへん苦しんでいますが、ようやく「HTML5」対応版の暫定版ができましたので、アップいたします。

自分ではチェックできていませんので、ご使用の前に必ず事前の練習チェックをしてから行ってください。

残念ながら、「コマンド」や「コメント」は直接入力できずに、取りあえず「Clipboard」にコピーした状態になります。なので、自分でペイストして下さい。

実はプレーヤーのコマンドBOXやコメントBOXに書きこむことはできたのですが、それがちゃんと認識されないため、そのままではコメント投下を正しく行えませんでした。

とりあえず、方針を変更して、まずは暫定版として、クリップボードにコピーすることにしました。

 

「ショート再生機能」は、PC側タイマーを使って再生ボタンをクリックしていますので、通信やサーバー側の応答のばらつきにより、ばらつきますので、正確なものではありません。

 

いろいろと突っ込みどころ満載ですが、現状はこんな感じです。

 

No Ver. 説明 画像
 4  5.03  レイアウト見直し

追加パネルのフォントサイズ変更

 

ダウンロード用リンク:
nicoコメ補助ツール ver.5.03

3 5.02r2 ラジオボタンをクリックでクリップボードにコピー

ショート再生機能追加

ダウンロード用リンク:
nicoコメ補助ツール ver.5.02r2
2 5.02r1 コメントの上一行/下一行コピー機能追加 ダウンロード用リンク:
nicoコメ補助ツール ver.5.02r1
1 5.02 html5対応版

コメント/コマンドはペーストで投下

 ダウンロード用リンク:
nicoコメ補助ツール ver.5.02

 

クリックして、表示するスクリプトの記述をコピーして、用意したブックマークレットのプロパティーで、「URL」の部分にペーストして、ご利用ください。

 

なお、Firefox専用ですので、Ie等では動作しませんので、ご注意ください。

 

以下、簡単な説明書き

HTML5 と CSS をちゃんと勉強しないとw 恥ずかしくって、コードの公開ができませんw

特殊文字の復元(アンエスケープ)

ニコニコ動画の新しいプレーヤー(html5【β】)にコメント補助ツールを適用するため、ソースを見ていたら、なんかわからない部分があって、それは特殊文字をエスケープためだとわかりました。

【特殊文字】
[&lt;] ⇒ 「<」
[&gt;] ⇒ 「>」
[&amp;] ⇒ 「&」
[&quot;] ⇒ 「”」
[&nbsp;] ⇒ 「 」
[\/] ⇒ 「/」
[\u0000] ⇒ 「字」
そこで、久しぶりにそれを復元するツールを作りましたw

特殊文字&ユニコードのエスケープ

 

Javascript でグラフ

よさそうなものはいろいろとありますが、「jQuery-Visualize」がお手軽そうです。グラフのオプション指定は必要ですが、基本的には表を作れば自動でグラフ化できます。

自分は Access で作ったデータベースから必要に応じたレポートを作成し、グラフ化することに利用しています。

 

 

jQuery-Visualize
https://www.filamentgroup.com/lab/update-to-jquery-visualize-accessible-charts-with-html5-from-designing-with.html

基本形:
$(‘table’).visualize();

オプション:
type: ‘bar’, ‘area’, ‘pie’, ‘line’
width: number
height: number
appendTitle: boolean(‘true’,’false’
title: string. (table’s Caption element)
appendKey: boolean
colors: array(Default:’#be1e2d’,’#666699′,’#92d5ea’,’#ee8310′,’#8d10ee’,’#5a3b16′,’#26a4ed’,’#f45a90′,’#e9e744′])
textColors: array
parseDirection: string. ‘x’,’y’
pieMargin: number(Default: 20)
pieLabelPos: string(‘inside’,’outside’)
lineWeight: numberDefault: 4.
barGroupMargin: number(Default: 10)
barMargin: number(Default: 1)

 
ccchart
http://ccchart.com/

 

Chart.js
http://www.chartjs.org/

 

Google Chart Tools
http://yohshiy.blog.fc2.com/blog-entry-195.html

Microsoft Access を利用した Web アプリ

ACCESS

例えば、会社のイントラのサーバに Access でつくったデータベースファイルと、html ファイル、 js ファイルを置いておくことで、ライセンスが1つしかなくても、不特定多数でデータベースの編集、検索、レポートの作成が可能になりますねw

もちろん、Access を使えなくても、Web アプリを使えば良いことになりますw

こちらのサイトがとても参考になりますw

JavaScript初心者入門講座
http://java-script.seesaa.net/category/3195601-1.html
データベースファイル接続

database = new ActiveXObject(“ADODB.Connection”);
database.Open(“Drive={Microsoft Access Driver (*.mdb)}; DBQ=c:\\FileName.mdb;”);
データベースファイル切断

database.Close();
database = null;
ファイルの操作用 SQL 文

select [* or ITEM_NAME] from [TABLE_NAME] where [条件式1(ITEM_NAME) and 条件式2(ITEM_NAME)] order by [ITEM_NAME]

select min([ITEM_NAME]) where 条件式1(ITEM_NAME)

insert into [TABLE_NAME] value ([数値], [‘文字列’], [数値], [‘文字列’], [数値])

update [TABLE_NAME] set [ITEM_NAME]=”[文字列]”, [ITEM_NAME]=”[文字列]”, ,,, where 条件式1(ITEM_NAME)

delete from [TABLE_NAME] where 条件式1(ITEM_NAME)

要素を追加する Javascript

今回のアイキャッチ画像は、猫舌さんです。

今回のスクリプトは、2種類です。

1つは、ボタン操作で、要素を追加/削除するもの、もう1つはチェックボックスで、同様のことを行うスクリプトです。

関数側で要素の追加、削除を行うので、ブックマークレットの時は、関数を外部ファイル化しておくと、ボタンやチェックボックスと追加要素を挿入する要素だけあれば良いことになります。

このページでは上手く動かない様なので、こちらのデモページでご確認ください。

 


“:追加パネル 表示/非表示”

 

 

 

 

 

テキストBOXの背景色と文字色を変えるJavascript

アイキャット画像は、ちゅいさんです。

 

 

 

テキストBOXに入力されたカラーコードに、その背景を変更します。そして、文字が見えなくならない様にテキスト色も変更します。

 

今回は、以下の様なことをしています。

① テキストBOXに入力されたコードに背景を変更

② このカラーの明度を計算し、0.05を判定基準に文字色を決定

③ タイプ入力の際に文字が見えなくなるので、文字数が少ない時の文字色を指定

<html部>

 

<Script部>

 

 

キャンセル機能付きラジオボタンのJavascript

アイキャッチ画像は、ありしゃんさんですw

 

 

 

 


A
B
C

 

 

<html部>

 

<Javascript部>

これは、nicoコメ補助ツールで利用したもので、ラジオボタンで、ue、shita、naka の選択を行える様にしたものですw

そして、どのラジオボタンも2度押しで選択がキャンセルとなりますw

「分:秒」形式の値を[秒]に変換する Javascript

画像はチェスさんですw

パワフルなダンスが魅力的ですねw

http://www.nicovideo.jp/user/17413643

 

 

入力[分:秒]:
出力[秒]:

内容を解説すると以下の様になっていますw

① 入力を読み取り、

② 「:」の前後の文字列を分離して取り出し、

③ [分の数字] x 60 + [秒の数字] を計算

④ 計算結果の書込み

<html部>

<script部>

 

nicoコメ補助ツール Ver.2.20r5 のコード公開w

とこまゆげ&シヅキ

アイキャッチ画像は、シヅキさん + とこまゆげさんですw

 

実際には自分の使い勝手を良くするためにレイアウト変更をしているこの最新版は配布していませんw

特にサーバ側のファイルのコードは動くことを最優先にしているので、関数やら変数やらネーミングルールを決めていませんし、基本的にはサンプルコードを探して、それをコピペして使っているのでめちゃくちゃですw

でも、難しいことをしているのではないので、関数を1つ1つ見ていけばわかると思いますw

<BookMarklet>

 

<外部読込ファイル(関数部)bm-220r2.js>

 <外部読込ファイル(jscolor.js)>

こちらは、カラーピッカーのモジュールをそのまま使用しているだけですので、詳しくは配布サイトをご確認くださいw

 

 

Firefox用ブックマークレット作成補助

アイキャッチ画像は、エサ探知機さんです。

 

 

これは本格的なものではなく、単に改行を取り除くだけの機能のコード書き換えフォームです。

なお、入力した元のコードの文字数と改行数を情報として表示しますので、Firefoxのブックマークレットの文字数制限10,000文字の目安に利用してください。

この記事上では上手く作動しない様なので、こちらをご利用ください。


FireFox ブックマークレット メーカ

元テキスト:

処理後:

0文字(元テキスト)

0文字(改行数)

 

このコードは以下の様になります。下記のコードをコピペして、ローカルにHTMLファイルを作成して使用するのも良いと思います。