NEST :: laboratory RSSフィード

引っ越しました。

http://ginpen.com

基本的にこちらの内容は残しておきます。
ただいくつかの記事については向こうへ持って行こうと思っています。


カレンダー
<< 2016/09 >>
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30

本家はこちら: NEST http://nest.l-w-l.info

. archive / . bookmark

HTML, CSS, JavaScript中心に興味あることあれこれを扱う技術系blogです。昔はそうでなかったので、古いのには妙なものも混ざってるかもしれません。

なお全ては自分が理解した事の覚書的文書であるため、事実に反する場合があります。気付かれた方はご指摘頂ければと思います。

書いてる人 : 高梨ギンペイ@横浜でSEやってます。Twitter→@ginpei_jp

2011/02/06

引っ越します

色々とやりたい事も増えてきたので、はてダを卒業して独自ドメインの方へブログを移動します。


http://ginpen.com

今後とも、よろしくお願い致しまっす!

2010/12/30

5分で分かる JavaScript を知らない人が JavaScript の便利さを学べる記事を書いたよ

JavaScript を知らない人に JavaScript の話して欲しいと言われる夢を見たのでブログ書きました。*1

難しい話は抜きにして JavaScript は <script></script> で囲えば動きます。*2 HTML をコードレベルで編集できるサービスなら、設定は一切不要です。

<script>
JavaScriptのコード
</script>

拡張子にも制限はありません。最終的にHTML文書として出力されるのであれば、htmlでもphpでもcgiでも構いません。なおフレームの代わりにPHPを使うという為になる記事があるのですが、ここでは関係ないので読むのは後ででよいです。

ついでに JavaScript を少しでも使えるようになれば、こんなことができるという一例を紹介します。

コピーライトの西暦を自動更新

JavaScript を使えばページフッタの西暦も自動更新します。

<script>
document.write('<p>Copyright (c) 20010-' + (new Date().getFullYear()) + ' Takanashi Ginpei. All Rights Reserved.</p>');
</script>

自分の年齢を自動更新

JavaScript を使えば自分の年齢を自動更新して表示できます。

<script>
document.write('<p>' + ((new Date().getFullYear()) - 1983) + '歳</p>');
</script>

ページの部品を読み込む

JavaScript を使えばページ内に部品を読み込むことができます。

<script src="footer.js"></script>

閉じタグ </script> を忘れないようにしてくださいね。

これを応用すれば以下のようにしてフッタとヘッダを同期できますよ。

<script src="header.js"></script>
<div id="contents">
テキストテキストテキスト
</div>
<script src="footer.js"></script>

header.jsなどのファイルの中には、普通に書き出したいHTMLをdocument.write('');で括って書きます。

// header.js
document.write('<h1>ようこそ</h1>');
document.write('<p>ようこそginpei\'sホムーページへ! ゆっくりしていってくださいね。</p>');
document.write('<p><a href="link.html">リンク集</a></p>');

なお一重引用符「'」を使う場合、その前に「\」を置いて「\'」と書く必要があります。

他人のサイトの内容を読み込む

人のサイトのデータをチェックして何かしたいときは、どうしたら良いでしょうか?

実は JavaScript は手軽に使える分、悪用される危険性が高いのです。そこでセキュリティ上の制限として、他のサイトの情報を取得する事はできないようになっています。*3

代わりにHTMLのiframe要素などを使ってはいかがでしょうか?

複数のメッセージをランダムに表示

<script>
var message = ['メッセージA', 'メッセージB', 'メッセージC', 'メッセージD', 'メッセージE'];
document.write(message[parseInt(Math.random()*message.length)]);
</script>

指定した月のカレンダーを出力

少し長いですが、2010年12月のカレンダーを出力します。

動作サンプル

<script>
document.write(calendar(2010, 12));

function calendar(year, month) {
  var jpweek = ['日', '月', '火', '水', '木', '金', '土'];
  var date = new Date(year + '/' + month + '/' + 1);
  var week = date.getDay();
  date.setMonth(date.getMonth()+1);
  date.setTime(date.getTime() - 1000 * 60 * 60 * 24);
  var days = date.getDate();
  var day = [];
  
  for (var i = 0; i < days; i++) {
    day[week+i] = i + 1;
  }
  
  var calendar = '<table>';
  
  calendar += '<tr>';
  for (var i = 0; i < jpweek.length; i++) {
    calendar += '<th>' + jpweek[i] + '</th>';
  }
  calendar += '</tr>';
  
  for (var i = 0; i < day.length || i % 7 != 0; i++) {
    if (i % 7 == 0) {
      calendar += '<tr>';
    }
    
    calendar += '<td>';
    calendar += day[i] || '&nbsp;';
    calendar += '</td>';

    if (i % 7 == 6) {
      calendar += '</tr>';
    }
  }
       
  calendar += '</table>';
  
  return calendar;
}
</script>

以上のように結構便利なものがあります。コピーして貼りつければサーバーアップロードしなくても動きますのでどうぞ。


というわけで、WEBLEの5分で分かる PHP を知らない人が PHP の便利さを学べる記事を書いたよのJavaScript版でした。

追記 : 改めてJavaScriptの紹介をしてみました。新年だしJavaScript始めてみませんか?

*1:というのは嘘で、ネタ元の書き出しを踏襲しているだけです。

*2:HTML4までではtypeを指定する必要がありましたが、HTML5からは初期値としてtext/javascriptが与えられるようになったので、省略できます。 http://www.html5.jp/tag/elements/script.html#attr-script-type

*3:その制限をかいくぐる方法もありますが、今知る必要はないでしょう。

2010/10/09

[]お名前.comでドメイン名を取得する際の注意点ふたつ

さっきドメイン名をお名前.comで取得したんですが、ちょっと「おや?」と思った事があったのでメモしておきます。

whois情報公開代行」を選択したのに、元の情報が表示される?

個人の家の住所なんか世界に向けて発信したくないので、whoisの登録情報には自宅ではなくお名前.comの代替情報を公開する事にしました。

-ドメイン取るなら お名前.com:Whois情報公開代行

ドメイン登録時に一緒に申し込めるんですが、その申し込みのステップの途中で「whois情報確認」みたいなのをすると、普通に自分の名前で出てきてしまいました。

なんじゃこりゃーと思ったのですが、そのまま登録してみるとちゃんと適応されてました。ああびっくりした。

登録後のアンケートに改善要望を書いておいたので、そのうち注意書きくらいは増えるかもしれません。

違うメールアドレスに住所が送信される?

今回が初めての利用だったのでユーザー登録も同時に行ったのですが、その際にメールアドレスの確認は行われませんでした。

確認なしにドメイン登録の結果が送信されてくるので、誤った、かつ実在するメールアドレスを入力した場合、そこへ自分の名前や住所が送信されてしまいますね。怖い怖い。

気をつけてコピペするようにしましょう。

2010/09/25

[]記号区切り "hoge_fuga" をキャメルケース "hogeFuga" に変換する方法

replace() の第一引数正規表現を与えて、第二引数に置換を行う関数オブジェクトを与えて処理します。

'hoge_fuga_123'.
    replace(
        /_./g,
        function(matched) {
            return matched.charAt(1).toUpperCase();
        });
// => "hogeFuga123"

正規表現の末尾の g は全部にヒットさせるためのオプションですね。

第二引数は普通は文字列を与えるのですが、関数を与えることもできます。このとき引数にマッチした文字列が順に入り、戻り値には置換後の文字列を与えます。詳しくは昔の記事を見てみてください!