PHP/Javascript/JQuery/CSSの勉強

Javascript修行中。基礎固め中...

slideshareAPI

使い方

http://asklife.info/archives/2119

○必須項目
api_key :登録するとメールで届くapi_key
ts :unix時間(phpならtime()関数)
hash :メールで届いたsecretにtsの時間をくっつけたものをhash()関数でsha1アルゴリズムを利用してハッシュ化した値

1.javascriptで作りたい

[xmlhttprequestでエラー]

XMLHttpRequest cannot load xxxxx Origin xxxxxx is not allowed by Access-Control-Allow-Origin」が出たので
対応したい。

[対処策]
http://www.muratayusuke.com/2011/05/28/access-control-allow-origin/
http://tomio2480.hatenablog.com/entry/20120922/1348262110

同一生成元ポリシーが、解消できないので
動作遅くなりますが、一度サーバを経由させて取得させることにしました。

[処理の流れ]
1.Javascript(GET送信)
2.PHP(サーバ) APIでデータ取得しJSON生成
3.Javascript(JSON取得)
4.HMLへ展開

Javascript コンストラクタ・プロトタイプ

前に買った、オブジェクト指向Javascriptという本を使って
勉強中。

オブジェクト指向JavaScript

オブジェクト指向JavaScript

node.jsやりたいんだけどまずJavascriptの基礎を固めておかないと
ついていけねえ。。。と思ったので。

勉強の為に書いたコードを自分のメモ代わりに載せておく。
あとで見返せるように。。。

//5.1 コンストラクタ 特殊なプロパティ
//[持っている内容]
//---------------------
//arguments: //引数
//caller: //どの関数から呼ばれたか
//length: //要素数
//name: //関数名

function test(a,b,c){
	return a * b;
}

console.log("テスト関数 length:" + test.length );
console.log("コンストラクタ:"   + test.constructor );

//5.1 プロトタイプ

function Gadget(name, color){
	this.name  = name;
	this.color = color;
	
	this.whatAreYou = function(){
		return 'I am a ' + this.color + ' ' + this.name;
	}
}

//関数に、プロパティを追加できる。

Gadget.prototype.price  = 100; //プロパティ追加
Gadget.prototype.rating = 3;
Gadget.prototype.getInfo  = function(){
	return 'Rating: ' + this.rating + ', price:' + this.price;
}; //メソッドを追加

var g = new Gadget( 'aren', 'red' );

console.log( "プロトタイプ price:"  + g.price );
console.log( "プロトタイプ raitng:" + g.rating );
console.log( "プロトタイプ name:"   + g.name );

console.log( "プロトタイプ getInfo:"   + g.getInfo() );

Gadget.prototype.get = function(what){
	return this[what];
};

console.log( "プロトタイプ get:"   + g.get('price') );

//関数内のプロパティを探してなければprototypeのプロパティを検索する

//優先順位は、関数内のプロパティ > prototypeのプロパティ

Javascript googleスプレッドシートを全取得

googleスプレッドシートの、存在するシート全て取得する
プログラムを書いてみたが、$.ajaxで複数ファイル取得した後の
処理にどう引き継げばいいのか分からない。

タイマー仕掛けて$.ajaxの複数ファイルコールバック処理の
完了を待った後、次の処理をスタートするという形になるんだろうか。
。。うーむ。

↓参考にさせていただいたサイト

[CSV解析]
http://liosk.blog103.fc2.com/blog-entry-75.html
カラム内の改行にも対応したCSV解析

[ユニーク配列取得]
http://javascripter.hatenablog.com/entry/20080730/1217413682
※今回のソースには、入ってないけど勉強させてもらいました。

//CSV解析
function parseCSV(text, delim) {
    if (!delim) delim = ',';
    var tokenizer = new RegExp(delim + '|\r?\n|[^' + delim + '"\r\n][^' + delim + '\r\n]*|"(?:[^"]|"")*"', 'g');

    var record = 0, field = 0, data = '', qq = /""/g;
    text.replace(/\r?\n$/, '').replace(tokenizer, function(token) {
        switch (token) {
            case delim: 
                data[record][++field] = '';
                break;
            case '\n': case '\r\n':
                data[++record] = [''];
                field = 0;
                break;
            default:
                data[record][field] = (token.charAt(0) != '"') ? token : token.slice(1, -1).replace(qq, '"');
        }
    });

    return data;
}

templatelist = {
	template:[],
	
	//スプレッドシートの取得
	getspreadsheet:function(gid){
		var gspreadsheetUrl = "https://docs.google.com/spreadsheet/pub?key=キー&single=true&output=csv&gid=";
		$.ajax({
			url: gspreadsheetUrl + gid,
			type: 'GET',
			dataType: 'text',
			cache: false
		})
		.done(function( data ) {
			var csv = parseCSV(data);

			console.log(csv);
			//次のシートを読み込む
			gid++;
			templatelist.getspreadsheet(gid);
		})
		.fail(function( data ) {
			console.log("失敗:");
			
			//処理がここから続く
			
		});
	}
};

//googleスプレッドシート取得
templatelist.getspreadsheet(0);

Javascript徹底攻略 第3章[写経]

Javascript徹底攻略の、第3章 MVC入門編のソースを写経。

JavaScript徹底攻略 (WEB+DB PRESS plus)

JavaScript徹底攻略 (WEB+DB PRESS plus)

[URL]

http://bzz0217.sakura.ne.jp/sample.html

[メモ]

jQuery.grep 指定された関数で配列をフィルタリング http://stacktrace.jp/jquery/api/utilities/jquery.grep.html

list.shift(); 配列の先頭のインデックスの削除 http://www.scollabo.com/banban/jsindex/sample/sample_263.html

jQuery.each 汎用的な繰り返し処理 http://semooh.jp/jquery/api/utilities/jQuery.each/object%2C+callback/

これからやりたい勉強/勉強進捗

とりあえずやりたい事適当に書き殴ってるので、
順序は前後するかも。。。

Javascript

1.node.jsでチャットシステムを作りたい

  ■2013/11/05 さくらvpsにインストール
   のつもりが、まずteratermでログイン出来ねえ。。
   使うの久しぶりで、開始で萎える。。
   初心者には、ここが分かりやすい。
   http://www.xn--vps-073b3a72a.com/

   何故かteratermから繋がらないので
   OS再インストールorz
   ぎゃああ、そういえばTCPポート変えてたの忘れてた。。
   そりゃ繋がらんはずだわorz

   OS再インストールしても、teraterm繋がらない、なんでだと
   思ってたら、さくらのヴァーチャルコンソールでCentOSのバージョンを
   指定した後でないと駄目のよう。ここで嵌った。

   とりあえず、今日は上記サイトの8.webページの設定まで。

  ■2013/11/06 やっとさくらvpsにnode.jsインストール
   昨日の続きを朝からスタート。
   PHP/MySQLをインストールする。

   その後、下記サイトを参考に、node.jsを入れる。
   http://www.mztm.jp/2013/05/27/sakuranodejs/
   http://netdiever.com/archives/12224
   
   foreverまで入れたので、次はやっと本題のチャットシステムを
   作る。

  ■2013/11/07 node.jsを使う
   node.jsをインストールしたはいいものの、
   何故か動かない。

   http://netdiever.com/archives/12224
   上記サイトを参考に設定してみると
   動いた。

   とりあえず、「Hello Node」を表示させることは成功

   でも、このままだとコンソールから抜けると
   動かなくなってしまうようなので、デーモン化
   foreverを使う。

   で、念願のチャットシステムを動かしたいということで
   サンプルがあったので、動かしてみる。
   http://wise9.jp/archives/4218

   だが、エラーになってしまい動かない。何故だ。。。

   node.jsの仕組みがぜんぜん分かってないので
   どうすればいいのか見当もつかない為、基礎学習は行っておかないと
   マズイなと思った。

   なので、いきなりチャットシステムの構築はせずに
   まずは一歩初心の道を進んで生きたい。

2.開発環境を整える

  ■テストで便利
   QUnit/Jasmine/Sinon.js/PhantomJS/js-test-driver

3.MongoDBを使ってみる

4.Javascript徹底攻略本

  1.まず写経
   ●第2章 MVC入門編 アイスクリームショップ       http://dash.hatenadiary.com/entry/2013/11/08/021103

  2.内容を理解
  3.実践

PHP

1.WordPressを使って自分好みのブログを作ってみる

  ■2013/11/07 wordpressをさくらvpsにインストールしてみる
   簡単だった
   wp-config.phpのDB名やユーザ名の修正は必要ですが。。。
   http://goo.gl/3yEXlb

   作ったwordpressサイト↓
   http://133.242.184.146/wordpress/

2.セキュリティを学ぶ

3.自分好みのアンテナサイトを作る

4.vim使いになる!

5.PHPエンジニア養成読本を読んでまとめる

CSS 勉強

前置き

CSS苦手。

あまり触ってこなかったのもあって
スタイル指定しても反映されなかったり
変な余白が出来たり、四苦八苦している。

なので、基礎についてしっかり 把握しておこうと思う。

基礎 セレクタ

意外と知らない!?CSSセレクタ20個のおさらい

読んだ。 いろいろ使えそう。
idセレクタ、classセレクタとは?:CSS入門

命名について

・英数字や、「-(ハイフン)」で作成しましょう。
特殊文字や、機種依存文字は、使わないようにしましょう。
 「_(アンダーバー)」も古いブラウザでは、使えない場合があります。
・漢字も、もちろん使えません。
・先頭の文字は、英字ではじめましょう。
・長過ぎると鬱陶しいので、端的な長さにしましょう。
・用途や位置が推測できる名前にしましょう。(header、navi、wrap、menu、main、entry、footerなど)
・小文字を推奨します。

優先順の指定は間違えやすいところ。 初心者が陥りそうなCSSの7の間違い

ブラウザ初期設定CSS

chromeの開発者ツールの「Element → Styles」で 「useragent stylesheet」が設定してもないのに、はじめから ついてるのが気になった。

デフォルトスタイルシートから考える、リセットCSSの留意点

ブラウザには、デフォルトスタイルシートというのがあり、
ブラウザによってあらかじめスタイルシートが定義されています。

これによって、文章をHTMLで適切にマークアップをすれば、
適度な間隔を保つようになっています。

なるほど。

ブラウザごとにデフォルトスタイルシートがある

ブラウザごとの誤差はこのせい

デフォルトスタイルシート リセット要

CSS指定の優先順位について、まとめ

CSSは後に書かれた指定ほど優先順位が上
 外部ファイルCSSを読み込んだ場合も、後指定されたものが優先

・条件付きセレクタ・!important付き指定が例外となる
 (1)詳細さにより優先度が決定
   #outline #side #sidesubspace li a{略} こちらが優先
   ↓
   #sidesubspace li a{略}

 (2)「!important」を付けると優先度は増す。

・HTML上のCSSと、ユーザのCSS設定、ブラウザの初期設定との優先順位
 「HTML内のCSS」>「ユーザ設定」>「ブラウザの初期設定」
 
 ※!importantをつけたユーザ指定
 「!important付きユーザ指定」>「!important付きHTML内のCSS指定」>「HTML内のCSS指定」