クッキーよりも扱いやすいローカルストレージ
ローカルディスクにデータを保存する(HTML5)
完全に全てのブラウザに対応したわけではないのですが。
DOM APIの一部にローカルストレージというHTML5に追加された機能というものがありまして
これを使えばいちいちクッキーに頼らずとも簡単にデータを保存することができます
クッキーとの相違点が幾つかありますが、基本的にはローカルストレージは扱うのが簡単な分、永続的にデータを保存する(保存期間を決定できない、ただし任意での削除が出来る)といった所です。
Sample1
if(!window.localStorage){
alert("ローカルストレージは使えません");
return;
}
//フォームにあるデータを保存する場合
window.localStorage.setItem("保存するデータの変数名","ここに保存したい内容");
// windowは省略できるため
localStorage.setItem("saveContent","山田太郎");
// saveContentというローカルの変数に山田太郎が保存される
// 連想配列式、またオブジェクト傾向でかくことも出来ます
localStorage.saveContent = "山田太郎"; //オブジェクト式
localStorage["saveContent"] = "山田太郎" //連想配列式
//コンテンツを取り出すとき
window.localStorage.getItem("setItemで保存した時の変数名");
var Data = window.localStorage.getItem("saveContent");
alert(Data) //山田太郎と表示される
//getItemも同様に連想配列とオブジェクト式で書けます
Data = localStorage.saveContent; //オブジェクト式
Data = localStorage["saveContent"]; //連想配列式
//保存した内容の削除
window.removeItem("設定した変数名");
window.localStorage.removeItem("saveContent");
ローカルストレージの場合HTML5ですからクロスブラウザの問題がどうしても生じてしまいます。将来主要ブラウザで対応するようになったら。フル活用できるAPIだと思います。
またクッキー保存の場合はJavaScript単体でおこなうのではなく
クッキー用のjQueryがあるのでそれを使うのも良いと思います。
JavaScriptの関数のタイプを自分なりに調べてみた
関数には基本的に名前のある関数と名前の無い無名関数(匿名関数)の二つだけだと思っていたが、この前、即時間数という新しい関数をみかけたので一通り調べてみることにした。
普通の名前ありの関数
//引数無し、戻り値無し
function fuc(){
}
//引数無し、戻り値有り
function fuc(){
return;
}
//引数有り、戻り値無し
function fuc(name){
}
//引数有り、戻り値有り
function fuc(name){
return;
}
名前のある関数は関数名を消費するうえ、他の製作スクリプトと混合させると、関数名の衝突が起こる可能性があるため、あまり好まれません。
使う場合同じ処理を行いたい時のみに扱います。基本的に一回きりの処理に使う場合は無名関数を使うほうが個人的には良いと思う。
無名関数(匿名関数)
// DOMで関数を操作する
var domValue = document.getElementById("click");
domValue.addEventListener("click",function(){ //無名関数を使う
alert("表示されました");
},true);
/////////////////////////////////////////////////////////
<input type="button" id="click" value="無名関数で呼び出す">
無名関数は、関数名を消費しない所に利点があります。
JavaScriptで複雑なプログラムを組む場合は関数名を付けるよりも
直接HTMLタグにIDまたclass名を付けてDOMでアクセスした上でイベントを付け足して呼ぶのが基本的な方針になります。
addEventListenerの旧式の方法となりますが、代わりにonclickやonmouseoverなどのイベントを繋げても同じように効果が得られます。
即時関数
(function(){ //名前が無い形式
})();
(function time(){ //名前がある形式
date = new Date();
seconds = date.getSeconds();
alert(seconds);
setTimeout(time,1000);
})();
関数全体を()で囲んだ上に終わりにもう一つ()で囲んだ形の独特な形式を持っています。
意味的には名前のとおり、そのまま実行するという意味です。
関数は基本的に呼び出さなければ実行されませんが、即時関数の場合は態々ユーザーの振る舞いに答える必要性がないときに使うのが便利かと思われます。
- 時間の更新(setTimeout,setInterval)
- 記事の自動保存
JavaScriptの関数は柔軟で奥が深いです。
greasemonkeyを製作していた時に何気なしに関数をカッコで囲んでいたのも即時関数だということがようやく分かりました。
幸せという漢字についての言及
自分の身近なユーザーの発言であったが
幸とは人が手錠を掛けられている様子からできた漢字なのに何故棒を一本取ると辛と言う漢字に成る
「幸」って漢字にはそんな成り立ちがあったのですね。
興味があったので検索エンジンにて同様の語句を並べ検索すると
教えてgooのページに似た質問がありました。
ベストアンサーの回答の一部を引用しますが。
「幸」は一説によれば、元の成り立ちは、刑罰に使われた手かせの形と、それを逃れる意の字（逆のしんにょうを取った字）が合わさったものとされています。 つまり、「刑罰を逃れるから“幸せ”」という事です。
一方、「辛」は入れ墨針の形からです。この入れ墨針は、刑罰者に用いられていた入れ墨針です。
つまり「幸」と「辛」は別々の成り立ちのようです。
しかし実際に「幸」から一本の棒を取ると「辛」になるわけですから
偶然とは思えませんね。
漢字の成り立ちに意味を感じるものとしては他にも
信者 : 儲
人為(人の為) : 偽
人夢(人の夢) : 儚
などがあります。
個人的にいろいろと考えてみると
困 (木が周りに柵に囲まれてしまって困っている)
などと考えられます。
HSPで軽くタイピングゲーム製作
Web言語以外で始めて使う言語がこれになるわけですが。
3日間程勉強してとりあえず、基礎的な部分は抑えたので軽くタイピングゲームを作ってみました。
現在の所エフェクト効果は無いに等しいものですが、文字を入力して正しいと次のタイピングする文字が現れるというアルゴリズムのみ製作しました。
Sample : HSP
title "東方タイピングゲーム";
*open
pos 170,400;
objsize 300,30;
onkey *gameIf;
button "始める" , *game;
button "終了する" , *finish;
stop
*gameIf
if iparam = 13 : goto *game;
goto *open;
stop;
*game
cls;
R = 255 : G = 255 : B = 120; //カラーリストの生成:背景
R1 = 0 : G1 = 0 : B1 = 0; //カラーリストの生成:文字列
push = 0; //文字列の切り取り確認
name = 0; //タイピングする文字の番号
color R,G,B : boxf;
color R1,G1,B1;
font msgothic , 30 , 1;
*main
if name = 10 : goto *thend; //使用するタイプ対象の数
color R1,G1,B1;
pos 200,20;
type(0) = "RUMIA";
type(1) = "CIRNO";
type(2) = "HONMEIRIN";
type(3) = "PATCHOULIKNOWLEDGE";
type(4) = "IZAYOISAKUYA";
type(5) = "REMILIASCARLET";
type(6) = "FRANDLESCARLET";
type(7) = "LETTYWHITEROCK";
type(8) = "CHEN";
type(9) = "ALICEMARGATROID";
type(10) = "LILYWHITE";
mes type(name); //現在タイプしなければならない文字列の設定
*start
strlength = strlen(type(name)); //文字列の長さ取得する
date = strmid(type(name),push,1); //文字列の切り出し
onkey *down;
stop;
*down
string = strf("%c",iparam);
if date = string {
goto *hitting;
}
stop;
*hitting
push++;
if push = strlength{
push = 0;
name++;
color R,G,B;
boxf;
goto *main;
}
goto *start;
stop;
*thend
color 0,0,0;
mes "クリアしました";
stop;
*finish
end;
ざっとこんな感じです。
タイトル画面の始めるボタンを押すとゲームが始まります。
アルゴリズムは文字の部分的な参照を繰り返すといった感じです。
[flandlescarlet]の場合文字列を切り出してまず一文字目を参照してif文で照らし合わせtrueとなったら切り取り文字をシフト(繰り上げ)させて二文字目の[l]を参照させます。
最期にlengthで文字の長さを測っておき繰り上げの数と同じになったら次の単語を呼び出すという極めてシンプルな構造にしました。
そのためnとnnの扱いやsiやshiの扱いに小さい「つ」などの入力に誤差が出てしまいますが、それは後々解消していこうと思います。
HSPの感想としてはやはり、書くのが楽というよりかは簡易すぎて逆にやりづらく感じるものがありますね。
特にifで同等の値を参照するときに使う記号が==や!=でなく=や!であったり
while文にforにfunctionが存在していない(代替えできるものがある)など
通常の言語とかなり書き方が違うのも慣れが必要かなといった所です。
100行あればシミュレーションRPGを作れてしまうそうですので、期待は出来る言語ですね。
幾つかの言語を扱った感想
最近Web言語以外また、やっていないWeb系言語について軽く広く勉強しておりました。
そこで今までやってきた言語も含めてそれぞれの難易度や個人的な意見を添えつつ
今後新しい言語をやってみたいや、新しい言語を取得してみたいなどの手助けになれば幸いです。
幾つか個人的説明も兼ねておきます。
- 記述言語:マークアップ式のみの言語で計算等は出来ない
- スクリプト言語:プログラミング言語よりかは小さい用途で使われる言語
- プログラミング言語:大きな開発に用いる事が主軸でコンパイル式のものが主流
- 手続き型言語:主にALGOLやFORTRAN系の言語
- 問い合わせ言語:データの処理のために使われる言語をさす
また紹介する言語については
HTML
- 記述言語
- 難易度:★☆☆☆☆
- 用途:Web
Webサイトのページに使われるマークアップ式の言語
難しい構文は無く目印となる部分にタグと呼ばれるものをつけてWebの構成を作るために使われる。
Sample
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>Sample</title>
</head>
<body>
<h1>見出し1</h1>
<img src="sample1">
</body>
</html>
- 記述言語
- 難易度:★☆☆☆☆
- 用途:Web
HTMLに比べて独自にタグを作りマークアップする事が出来る。
XMLはPHPやJavaScriptを通して利用される。
Sample
<?xml version="1.0" encoding="UTF-8"?>
<root>
<userA>
<name>○○</name>
<age>40</age>
</userA>
<userB>
<name>□□</name>
<age>38</age>
</userB>
</root>
</root>
- 記述言語
- 難易度:★☆☆☆☆
- 用途:Web
スタイルシートと呼ばれHTMLでマークアップした言語にデザインをつけるためにある。
そのためHTMLだけでデザインをとるのは間違いとなる(<table>でWebの構築をしたり<font>を使う等)
Sample
body{
background: #F00;
color: #00F;
font-weight: bold;
margin: 0;
padding: 10px;
}
h1{
border: solid #000 3px;
background: #DDD;
}
- スクリプト言語
- 難易度:★★★☆☆
- 用途:Web
HTMLとCSSと合わせてDHTMLと呼ばれる。主にWebに動的な効果をもたらす。
JavaScriptはPHPと違い、ユーザーが許可しない場合があるためJavaScriptが使えなくても、通常に使用出来るサイトになるよう考慮しなければならない。
Sample
<script type="text/JavaScript">
window.addEventListener(function(){
alert("Hello!World");
document.title = "タイトル";
});
</script>
- 記述言語
- 難易度:★☆☆☆☆
- 用途:Web
HTMLの最新のバージョンで現在はまだ完全な規定がされておらず草案状態までとなっている。
タグによって対応していないブラウザがまちまちあるためクロスブラウザを免れるのは難しい(特にIE)
canvasやaudioなど比較的に視野に変化をもたらすタグが追加された。
articleやsectionなどの文章定義を厳密にするタグも追加されている。
Sample
<!DOCKTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<section>
<h1>最新記録</h1>
<p>魚市場に出回る<mark>マグロの長さ</mark>が更新された模様</p>
</section>
</body>
</html>
CSS3
- 記述言語
- 難易度:★★☆☆☆
- 用途:Web
CSS2の次にあたるバージョンでデザインが強化されている。
主に今までのCSSは静的なものであったが、時間指定などを予め決めておき反映させたり
ユーザーの操作も一部受け付けられるようになり、これだけでゲームが作れるまでとなった。
Sample
h1{
border: solid #000 2px;
border-radius: 3px;
background: #F00;
transion: background 2s linear;
-moz-transion: background 2s linear;
-webkit-transion: background 2s linear;
-o-transion: background 2s linear;
}
h1:hover{
background: #500;
}
- スクリプト言語
- 難易度:★★★☆☆
- 用途:Web
ユーザーの入力した情報等を自由自在に扱うことが出来る。サーバーで稼働しているため
この言語を扱うときはセキュリティに関しても勉強する必要性がある。(JavaScriptによるXSSやSQLインジェクション攻撃など)
予め用意された関数が多いのも特徴的である。
フォームに値が入力されていない時、JavaScriptで注意を促す事ができるが、ユーザーが拒否した時のことも考えて
PHPでも値が入力されていないとき、処理を行わないように設定する連携も多々ある。
またHTMLの文章内に直接記述出来る便利な一面もある。
Sample
<html>
<head></head><body>
<?php
print "Hello!World";
if(isset($_POST["name"])){
echo("ようこそ" . htmlspecialchars($_POST["name"],3) . "さん");
}
?>
<form action="this.html" method="post">
<input type="text" name="name">
<input type="submit">
</form>
</body></html>
- 問い合わせ言語
- 難易度:★★☆☆☆
- 用途:Web
PHPと連携して用いられる事が多い、言語自体ではただの表組を生成して
必要に応じてソートやデータの抽出を行うことがある。
XMLやJSONとは違い厳密な所から大量で膨大なデータを扱うのに適している。
Sample
CREATE TABLE tabledata (id INT , name TEXT , age INT);
INSERT INTO tabledata SET id = 1 , name = "○○" , age = 40;
INSERT INTO tabledata SET id = 2 , name = "□□" , age = 38;
UPDATE tabledata SET name = "△△" WHERE id = 1;
SELECT * FROM tabledata WHERE age > 39;
- スクリプト言語
- 難易度:★★★☆☆
- 用途:ゲーム、アプリ、ブラウザ
本来はゲームを作るために簡易に作られている。
そのため他の言語をやっていると、その簡単さに唖然とする事があるが逆に書き方が大幅に簡易化するため間違えることがある(if文の同じを示す記号は == ではなくて = であるなど、while文やforが存在していない)
Sample
title "Sample";
color 0,0,0 : boxf;
color 255,255,255;
font msgothic,30,1;
mes "Hello!World";
button "クリックすると終る" , *thend;
stop;
*thend
end;
- プログラミング言語
- 難易度:★★★★★
- 用途:Web、ソフト、モバイル関係
プログラミングにおいてはかなり奥が深くてやりごたえがある言語
ハローワールドを記述するだけでもかなりの行をとるため普通は専用のソフトを使いながら基礎的な文法は飛ばして記述するのが主流
sample
public class Message { public static void main (String[] args) { System.out.println("文字を表示する"); } }
- 手続き型言語
- 難易度:★★★★☆
- 用途:膨大な計算に使用される
C言語が存在してから使われる頻度が少なくなったFORTRANですが、旧プログラムとして勉強するのには適している言語です
昔のコンピューターは大文字しか使えないこともあってその名残で記述は大文字でします。
Sample1
INTEGER I,J,a(8)
REAL P,Q
DO 200 0,8
a(J) = J
200 CONTINUE
J = 10
I = 0
P = 20.0
Q = 30.0
CALL DATA(P,Q,I)
WRITE(*,*) "PとQの合計値は" . I
STOP
END
SUBROUTINE DATA(P,Q,I)
I = P+Q;
STOP
その他のライブラリ等
JavaScriptとXMLをかけ合わせた非同期通信の事で単にDOMを扱う時だけでもそう定義されることがある。
またXMLファイルをXMLHttpRequestでオブジェクトとして生成しそこからノード計算で必要なタグを取り出すのが一般的である。
JavaScriptでは難題なソースを予めライブラリとして作成してそれを呼び出す形で使用する。
主に$セレクタと呼ばれるもので値を指定して効果を出す形が多い。
CGI
Perlとよく併用して呼ばれる事があるが、PHPやC言語でも記述は可能である。
用途は様々あるが掲示板の作成で使われることが9割をしめている。Webは閲覧側のみに情報を渡すシステムにみえるがCGIを使うことによってユーザーの情報を得ることが可能である(例:IPアドレス)
Sample
#!usr/bin/perl
print "Content-Type: type/html\n\n";
print 'IPアドレスは $ENV{"REMOTE_ADDR"}です';
iTunesアプリでHTML,CSS,JavaScriptを扱う
無料でオフライン下で出来るJavaScriptプログラミング
jsany
http://itunes.apple.com/jp/app/javascript-anywhere/id363452277?mt=8
jsanyはiPodやiPhoneでオフライン下で動く便利なWeb製作アプリです。操作する端末がPCであるため、使う人にとっては使いにくいと思います(特にPC派の人)
しかしながらパソコンなしで、実際に実行結果を端末の画面で確認できるのが良いところです。
製作物は最初からHTML,CSS,JavaScriptの3つのファイルに分けられています。必要最低限のソースも打ってくれてあるので、新しい製作物を作るとき態々そのタグを入力する必要もありません。
jsanyの良いところは、オンライン下であるとき、外部のファイルが読み込めるところにあります。
Web製作では予め用意している画像を用いることもあると思います。その画像をオンライン時にはURLを指定して呼び出すことも可能です。
辞書登録なんかをしておくと良いかもしれません。
よく使う外部ファイルや、各関数を予め辞書登録しておき、任意の文字列で呼び出す等してみると飛躍的に操作性はあがります。
例)
入力 : かんすう
出力 : function name(){}
入力 : いめーじ
出力 : http://www.hoge.ne.jp/hoge.png
このようにしておけばパソコンでは数秒で出来る作業を分単位で製作しなければならない、という状況を防ぐことが出来ます。
大規模なプログラミングは出来ませんが、通学や通勤中の思いつきのソースを打ち込む分には使えると思います。
はてなブックマークの騒動に関してちょっと搜索
全体の推移
事が大きく進んだ要因として、Twitterでの@HiromitsuTakagiの発言が発端です。
https://twitter.com/#!/HiromitsuTakagi/status/178147856937517056
最初のつぶやきから二日ほどではてなからの謝罪の日記が投稿されました
http://hatena.g.hatena.ne.jp/hatena/20120313/1331629384
トラッキング問題について
はてなブックマークのトラッキング問題ですが、トラッキングが一番の問題となりました。トラッキングとはユーザーの行動を監視して情報を収集する手段です。具体的な例として、アクセスしているブラウザの判別やクリックした対象などのあらゆるデータをユーザーが行うたびに収集して保存します。
最終的にこれで各ユーザーの行動の総和をとり、メディアの利用者の傾向を図るわけですが。
今回問題になったのは第三者への提供且つ、無料という所に大きな問題があったようです。
トラッキングはWebの維持に用いられる頻度が少ないうえ、ユーザーに告知なしに第三者に提供してしまった事による、問題が主となっているようです。
はてなブックマークははてなの一番中枢にあたる部分でもあるサービスであるため、かなりはてなには都合の悪い事件だったと思います。
一部のユーザーでは、はてなブックマークを使用するのをやめたり、はてな自体を退会してしまったユーザーも少なからずいるようです。
