どのブログサービスを使うべきか

世の中には、多くのブログサービスがあります。

• アメーバブログ(アメブロ)
• Yahoo!ブログ
• Blogger(このブログはBloggerです)
• WordPress
• 楽天ブログ

etc...

これだけあると、初心者はどうすればいいかわからなくなってしまいます。

そこで、それぞれの長所や短所をまとめました。

アメーバブログ

もっとも人気のあるといって過言でないブログサービスです。また、簡単な操作が可能です。
著名人など多くの人が利用しており、アメーバのアカウントを作ると勝手にブログは作成されます。
あいさつペタなどの特徴的な機能のほか、アカウントが非常に多いために友達もできると評判です。

しかし、カスタマイズ性に欠けるため、JavascriptやCSSなどをゴリゴリ書きたいエンジニアさんや、カスタマイズを楽しみたい方は避けるべきです。

Yahoo!ブログ

比較的簡単にブログが作れると評判です。
Yahoo!アカウントとの連携ができるからといった理由などで評判はいいようです。
しかし、コメント投稿の際の画像認証が不要などの理由から、ロボットによる迷惑コメントが相次いでいます。セキュリティ面からみると、避けるべきかもしれません。
カスタマイズも思うようにできないようです。

Blogger

今私が使用しているサービスです。
Googleと共通のアカウントで運営できるため、Google+やYoutubeなどとの連携は最高です。
テンプレートも数多く用意されているほか、大半のHTMLやCSS、デザインや画面右側のガジェット(PC版のみ)が編集できます。
ただHTMLの自動補正機能が上級者にとっては邪魔になることがあるので、JavascriptやCSSは極力外部ファイル化するのがポイントです。
比較的初心者から上級者までおすすめできる内容です。

WordPress

比較的上級者向けです。
何よりもカスタマイズ性はこの上なく最高です。
数多くのプラグインが使用できるほか、なにせ管理者自ら構築したサーバーですので正直、何かやろうと思ったらなんでもできます。
SSL暗号化、独自ドメインなどはもちろん、FTP転送や同じドメイン内にファイルが設置できるためにいろいろとできます。
既定で設定されているCSSなどを取り払うこともPHPの知識があれば可能です。つまり、なにもかも思い通りになります。
ただし、セキュリティや脆弱性、PHP、プラグイン、サーバーやインターネット、SEOに関する専門知識が必要になります。徹底的に上級者向けを追及したサービスといえます。

まとめ

結果としての管理人のおすすめです。

• 初心者ならBlogger
• 上級者ならWordPress

長い記事にお付き合いいただきありがとうございました。

209系方向幕をJavaScriptで作る

どうもこんにちは。

この間(随分前になりますが...)、 国鉄方向幕書体 をダウンロードしました。

そこで思いついたのが、Javascriptでの巻き取り機能をつける、ということです。

209系方向幕

JavaScriptでゴリゴリ書きました。
クロスドメインでセキュリティがあーだこーだ...という都合で、サンプルは外部サイトに設置しました。

そのうち作り方公開します...

路線も増やせたらいいなーと思っています。車種ごとの移植もそれほど苦ではないので。

ではまた、ご期待ください。

※これらのスクリプト、HTMLなどはすべて1から管理人が作成しています。そのためバグ等あるかもしれませんが、ご了承ください。またそういったものを発見された場合には、コメントにて報告にご協力ください。当ブログをより良いものとするため、ご協力お願いします。
ちなみに動作確認はIE9とGC7で行っています。

209系方向幕

遊び方

1. ページ下半分に幕対応表があります。その表示したい行先の左側に表示されている数字を半角で入力してください。
2. 「幕を動かすスピードを選択」の右側のスライダーは幕回しのスピード調整用です。左に行けば遅く、右に行けば速くなります。一番左はかなり遅いです。なお、幕を回し始めてから設定を変更しても、すぐには反映されません。その次に幕を回したとき、有効になります。
3. 上の二つが調整できたら、「実行」ボタンをクリックします。幕が回り始めてから自動的に止まるまで、途中で止めることはできません。どうしてもという時は再読み込み願います...
4. ちなみに幕表示部分の右のスクロールバーを操作すると手動で幕を巻くこともできます。ただし、自動で幕回しをしている最中はこの操作はできません。

209系方向幕

...では、思いっきりお楽しみください!!

Javascriptで郵便番号検索する

どうもこんにちは。必死で北斗星のはんだ付けを急いでしているchiko ryoです。

今回はよく通販サイトなどで見かける、「郵便番号で住所検索」についてです。

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<form>
郵便番号:
<input type="text" name="number1" size="4" maxlength="3"> － <input type="text" name="number2" size="5" maxlength="4"
onKeyUp="AjaxZip3.zip2addr('number1','number2','ken','shi','after');"><br>
都道府県: <input type="text" name="ken" size="40"><br>
市町村区: <input type="text" name="shi" size="40"><br>
以降の住所: <input type="text" name="after" size="40">
</form>

以上です。簡単ですね。

今回目新しいのはこれでしょうか。
onKeyUp="AjaxZip3.zip2addr('number1','number2','ken','shi','after');"

1行目で読み込んだライブラリで定義されている関数です。

書式は以下になります。

AjaxZip2.zip2addr( '〒上3桁', '〒下4桁', '都道府県', '市区町村', '町域大字', '丁目番地' );

引数にはinputタグのname属性を指定します。<form>タグのname属性は不要です。

今回はテキストフォームを使用していますが工夫次第でinnerHTMLなども使用可能です。

郵便番号のデータですが、常にデータベースは更新されるため、設置や管理も大変楽です。

実行例

郵便番号: －
都道府県:
市町村区:
以降の住所:

パスワードの安全度チェックをする

いろいろなところで見かける「パスワードの安全度チェック」なるものをしてみます。

では、ソースコードを。

<script type="text/javascript" src="passwordchecker.js"></script>
<script type="text/javascript">
function myCheck(){
 var label = getPasswordLevel(document.pass.text.value);
 var dom = document.getElementById("check");

 if(label == 1) dom.innerHTML = "<span style='font-color: red;'>危険</span>";
 else if(label == 2) dom.innerHTML = "<span style='font-color: orange;'>やや危険</span>";
 else if(label == 3) dom.innerHTML = "<span style='font-color: #0088ff;'>普通</span>";
 else if(label == 4) dom.innerHTML = "<span style='font-color: #08f;'>やや安全</span>";
 else if(label == 5) dom.innerHTML = "<span style='font-color: #00f;'>安全</span>";
}
</script>

<!-- ここからは表示部分 -->
<form name="pass">
<input type="text" name="text" value="ここにパスワードを入力" onchange="myCheck()" />
</form><br />
<div id="check">ここに実行結果が表示されます。</div>

下のサイトからライブラリがダウンロードできます。
JavaScript パスワード強度判定ライブラリ「Password Checker」

辞書に載っている文字を含むパスワードや数字だけのパスワードは、容易に想像がつくため「弱い」判定が下る、大文字や記号、英数字などを混ぜると強度が増すなどの判断基準が用いられています。

そのライブラリでは、getPasswordLevel()という関数が定義されています。この関数にパスワードを渡すと、安全度が返ります。
1が返れば危険、2が返ればやや危険、...といった具合で、3が普通、5が安全です。(確証はないですが;;)

実行例

※データはサーバーには送信されませんが、念のため本物のパスワードは入力しないでください。

JavascriptでGoogle検索を行う

Google検索をすると、やけに長いアドレスに気付くと思います。

...そうです。Google検索はGET転送をしているのです。
通常POST転送をJavascriptで実現しようとすると、Ajaxなどを使うことになります。しかし、Google検索ではGET転送を採用しているため、Javascriptでの操作が容易になります。

では早速ソースコードを。

<form action="https://www.google.co.jp/search" method="get">
<input type="text" name="q" value="" />
<input type="submit" value=" 検索 " />
</form>

さて、、、解説は不要ですね!

ただしこれらの属性値を一つでも変更すると動かなくなるものもありますのでご注意くださいませ。

一応これで一通り完成ですが、Javascriptを使うと条件で絞って検索したり、動画検索・画像検索させたり、Ajaxを使って入力と同時に検索結果を表示する、なんてことも可能です。

改造の仕方によってはかなり高機能なものも作れます。
いろいろな検索をしてGET転送でどのように値が送信されているのかを研究してみてください。

実行例

参考:Yahoo検索

<form action="http://search.yahoo.co.jp/search" method="get" target="_blank">
<input type="text" name="p" />
<input type="hidden" name="fr" value="yssw" />
<input type="hidden" name="ei" value="UTF-8" />
<input type="submit" value=" 検索 " />
</form>

JavaScriptでiniファイルを解読する Var.1.1

前回ソースを公開したINIを解読するための関数「myReadInI()」。

その更新バージョンを作りましたので、またもソースを公開します。

function myReadInI(mySname, myPname, myFname){

var i = 0; // プロパティiとjはカウンタです。
var j = 0;
var t = null; // コメント除去に使用します。
var ts = 0;   // これもです。

// オブジェクト生成
var objFileSys = new ActiveXObject("Scripting.FileSystemObject");

var objTextStream = objFileSys.GetFile(myFname).OpenAsTextStream(1, 0);
/*読み込みモードを使用、文字コードはUnicodeです。(Unicode文字が扱えるようにするため)*/

var data = new Array(); // 空の配列

// ファイルが最後まで読み込まれるまでループ  読み込み
while (objTextStream.AtEndOfLine==false) {

   t = objTextStream.ReadLine();
   ts = t.indexOf(";"); // コメントを探す
   if(ts == -1){ // コメントがない
    data[i] = t;
   }else{ // コメントあり
    data[i] = t.substring(0, ts);
   }
   i++;
}

// 読み込み及びコメント除去 ここまで
// 解読 ここから

do{
 var my1 = data[j].indexOf("[" + mySname);
 j++;
}while(my1 == -1); // 一行ずつ検索し、該当するセクションを探す
j--;

// 指定のセクションの内容の始まる行数(0から)を退避
var mySstert = j + 1;

// セクションの終わりを探す(先ほど先頭が見つかった行の次からスタート)
j++;
do{
 var my2 = data[j].indexOf("[");
 j++;
}while(my2 == -1);
j--;

// 指定セクションの最後の行を退避
mySend = j - 1;

// パラメータ名を検索
var my3 = mySstert;
do{
 var my4 = data[my3].substring(0, data[my3].indexOf("="));
 my3++;
}while(my4 != myPname);
my3--;

// 抽出
var Returndata = data[my3].substring(data[my3].indexOf("=") + 1);

// 得られた値を返す
return Returndata;

} // function宣言終了

強調表示されている行が変更箇所です。
では解説を。

t = objTextStream.ReadLine();

ファイル読み込み部分ですが、前回と違いいきなりdata配列に代入せず、一旦変数tに代入しました。(もう少しそれらしい名前をつけてあげましょう(^ ^; )

ts = t.indexOf(";"); // コメントを探す
if(ts == -1){ // コメントがない
 data[i] = t;
}else{ // コメントあり
 data[i] = t.substring(0, ts);
}

はい、ここが一番前回と異なる点です。前回は最後にコメント除去をしていました。パラメータ名は=の左側と完全一致しているかで、引数で指定されたパラメータ名と一致しているかの判定していたため問題ありませんでした。しかし、セクション名はindexOf()で一行ずつ検索をかけていたため、セミコロンをつけても角カッコがセクション名として認識されていました。今回のバージョンアップでそれが改善された形となります。
indexOf()で;を検索し、もしも;が存在すればそこから右を削除します。そのあとにdata配列に代入しているのです。

当然、ファイル読み込み時にコメント除去処理をしたため、最後のコメント除去プログラムは削除しました。

※この関数はコールされるたびにファイルを読み込み直し、一行ずつコメント除去、セクション名およびパラメータ名の検索をします。PHPのmail()関数のように何度も呼び出すのは非常に非効率的であります。現在その欠点を解消した関数を開発中です、、、
今しばらくお待ちください。

Javascriptでiniファイルを解読する

ちょっと気分を変えてプログラミングのお話を。

HTMLとJavascript、VBScriptなどでウィンドウアプリケーションが作れるという便利ツール

HTA

このHTAでINIファイルを読み込めればなぁ...と前々から思っていたのです。
しかし、管理人は{}がないVBScriptが苦手なので、Javascriptで作ることにしました。

そこで、さらっと書いてみたスクリプトがこれ。

function readInI (section, para) {
var i = 0;
var fs = WScript.CreateObject("Scripting.FileSystemObject");   // オブジェクト
var file = fs.OpenTextFile("text.ini", 1, false, -1);   // ファイルを開く

while (objTextStream.AtEndOfLine==false) {   // 空行が出現するまでループする
   var data[i] = file.ReadLine();   // 1行ずつ読み込む
   i++;

...下につづく

しかし、これだとエラーがでます。

「'WScript'は定義されていません」

どういうことかというと、WScriptオブジェクトはwscript.exeにしか使えないのです。要するに、HTAのJavascriptでは使えない。

ではどうするか。その答えはこれです。

// オブジェクト生成
var objFileSys = new ActiveXObject("Scripting.FileSystemObject");
var objTextStream = objFileSys.GetFile("test.ini").OpenAsTextStream(1, 0);

var data = new Array();

// ファイルが最後まで読み込まれるまでループ  読み込み
while (objTextStream.AtEndOfLine==false) {

   data[i] = objTextStream.ReadLine();
   i++;

}

...下につづく

これで正常にテキストファイルが読み込めるようになりました。

最終的なスクリプトを下に示します。

function myReadInI(mySname, myPname, myFname){

var i = 0;   // プロパティiとjはカウンタです。
var j = 0;

// オブジェクト生成
var objFileSys = new ActiveXObject("Scripting.FileSystemObject");
var objTextStream = objFileSys.GetFile(myFname).OpenAsTextStream(1, 0);
/*読み込みモードを使用、文字コードはUnicodeです。(Unicode文字が扱えるようにするため)*/

var data = new Array();   // 空の配列

// ファイルが最後まで読み込まれるまでループ  読み込み
while (objTextStream.AtEndOfLine==false) {
   data[i] = objTextStream.ReadLine();
   i++;
}

// 読み込み ここまで
// 解読 ここから

do{
 var my1 = data[j].indexOf("[" + mySname);
 j++;
}while(my1 == -1);   // 一行ずつ検索し、該当するセクションを探す
j--;

// 指定のセクションの内容の始まる行数(0から)を退避
var mySstert = j + 1;

// セクションの終わりを探す(先ほど先頭が見つかった行の次からスタート)
j++;
do{
 var my2 = data[j].indexOf("[");
 j++;
}while(my2 == -1);
j--;

// 指定セクションの最後の行を退避
mySend = j - 1;

// パラメータ名を検索
var my4 = mySstert;
do{
 var my6 = data[my4].substring(0, data[my4].indexOf("="));
 my4++;
}while(my6 != myPname);
my4--;

// コメント除去
var my3 = data[my4].indexOf(";");
if(my3 != -1){
 data[my4] = data[my4].slice(0, my3);
}

// 抽出
var Returndata = data[my4].substring(data[my4].indexOf("=") + 1);

// 得られた値を返す
return Returndata;

}   // function宣言終了

ソースをダブルクリックすると全選択ができます。もちろん普通に選択することも可能です。解説はスクリプト内のコメントで十分でしょう。



書式  ：  myReadInI( セクション名,  パラメータ名, テキストファイルのパス );


戻り値  ：  取得したパラメータの値が返ります。※半角数字は文字で返りますので数値を読み込みたいときはeval()を使ってください。


パラメータ

第1引数　必須
　セクションの名前です。[ ](角カッコ)は含みません。

第2引数　必須
　INIファイルのパラメータの名前です。

第3引数　必須
　INIファイルまでのパスです。絶対・相対どちらも指定可です。拡張子はなんでもかまいませんが、テキストファイルでかつ下に示す文法に従う、UTF-8のデータでなければなりません。



この関数で読み込めるINIファイルの文法を以下に示します。

1. セクション名の前には空白文字を入れてもかまいません。
2. コメントは;(セミコロン)から行末までで、途中からコメントとしても大丈夫です。
3. 空行から先はすべてコメントです。そうしたくない場合は、その行を ; でコメントとしてください。
4. 最後の行には必ず [ が含まれている必要があります。
5. セクション名およびパラメータ名は@などの特殊文字で囲むことを推奨します。これは、先頭が一致する名前だと行を誤認識してしまうことがあるためです。(そのうち修正します)

5.の例
INIファイルの内容

[test]
userid=ユーザーID
user=ユーザー
[end]
このINIファイルに対して
myReadInI("test", "user", "test.ini");
とすると、3行目のuserよりも先に2行目のuseridにindexOfがヒットしてしまうためです。

使用例




Downlordボタンをクリックするとサンプルプログラムがダウンロードされます。セキュリティが不安な方はソースをみて安心してくださいな。また展開してからtest.iniを作成してください。「ファイルが見つかりません」エラーがでます。

追伸
北斗星記事の方は、新しいこて先が届かず作業が停止状態です。
遅れてすみません。
...(((;^^)