tech memo in.: 2011

2011-09-30

postgresql sql文ちょっと

postgresql を少し

データベース作成
CREATE DATABASE name;
CREATE DATABASE dbname OWNER rolename;

データベース削除
DROP DATABASE name;

テーブルの作成　例
CREATE TABLE weather (
city varchar(80),
temp_lo int, -- 最低気温
temp_hi int, -- 最高気温
prcp real, -- 降水量
date date
);

テーブルの削除
DROP TABLE tablename;

INSERT、UPDATE、DELETE

PostgreSQL

2011-05-28

javascript 基本の基本

基本的な所から

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>sample</title>
        <meta charaset="UTF-8">
        <script>
            function plus(x,y) {
                var ans=x+y;
                return(ans)
            }
            function mul(x,y){
                var ans=x*y;
                return(ans)
            }
        </script>
    </head>
    <body>
        <script>
            document.writeln(plus(3,5));
            document.writeln(mul(5,5));
            document.writeln(plus())
        </script>
    </body>
</html>

出力
8 25 NaN

スクリプト全体をでコメントアウトすることで未対応のブラウザに対応

未対応のブラウザに対してのメッセージ

ってことだったんだけれども、twitterやgoogleのページを見たらしてないっぽくて、そっちに乗っかってみた。
あとHTML5ではscriptタグのtypeに初期値でtext/javascript入ってるからtypeが省略できるとgoogleのソース見て気づいた。

javascriptをするにあたって

まず対象にするバージョンがjavascript2.0ということで
以前の物との変更点を調べて見たところ、

あまりないらしい、

具体的には
・jsonのサポートの追加
・大きな仕様の変更はない

ということなんで、2.0とかあまり気にしなくても使えるようになれそうって風に思える。

2011-05-27

html5を簡単に作成

前回と前々回の流れで何かやりたいことがあった分けでもないけれども、
面白そうだったので、HTML5について触ってみた。
といってもテンプレート的な物までしかできなかったのだが。

htmlソース

以下が作成したhtmlのソースである。

index.html

<!DOCTYPE html>
<html lang="ja"><head>
    <meta name="description" content="site_description">
    <meta name="keywords" content="site_keywords"> 
    <meta charaset="UTF-8">
    <title>test webpage</title>
    <link rel="stylesheet" href="import.css">
    <!--    <script src="pass"></script> -->
    <!--[if lte IE 8]>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/html5.js"></script>
    <![endif]--> 
</head><body>
    <header>head
        <hgroup>
            hgroup1
            hgroup2
        </hgroup>
    </header>
    <section>section</section>
    <nav>nav
    <ul>
        <li>1th</li>
        <li>2th</li>
        <li>3th</li>
        <li>4th</li>
    </ul>
    </nav>
    <footer>footer</footer>
</body></html>

HTML5は使いやすいようにに作られているという感じで、サクサク作れた。

htmlはよくある、2colomにheaderとfooterが付いている形なのだが、
cssを作っている時にpxやら%やらの大きさで悩んでいた結果、文字を基準にしたemにして落ち着いた。

import.cssを読み込むとbase.cssとlayout.cssの2つのcssファイルを読み込むことができる。

import.css

@charset "UTF-8";

@import url(base.css);
@import url(layout.css);

layout.cssはhtmlのスタイルを変更している。

layout.css

body{
    width:74em;
    margin:0 auto;
    text-align:center;
    background:#000;
    -webkit-box-sizing: border-box;　/* Safari,Google Chrome用 */  
    -moz-box-sizing: border-box;　/* Firefox用 */  
    -ms-box-sizing: border-box;　/* Internet Explorer 8用 */  
    box-sizing: border-box;　/* Opera用 */  
}
header,section,nav,footer{
    display:block;
    background:#FFF;
    padding:2em;
    margin:1em;
}
header{
    min-height:6em;
}
section,nav{
    min-height:30em;
}
section{
    float:right;
    width:40em;
}
nav{
    float:right;
    width:20em;
}
footer{
    clear:both !important;
    min-height:3em;
}

あと肝心のcss3は
-webkit-box-sizing: border-box;　/* Safari,Google Chrome用 */
-moz-box-sizing: border-box;　/* Firefox用 */
-ms-box-sizing: border-box;　/* Internet Explorer 8用 */
box-sizing: border-box;　/* Opera用 */
ここだけで、padding、borderの値の適用方法が変わるものである。
あと、ここまでやって気づいたが,
css3にはbox系プロパティ？正確な名前は分からないが、簡単に2colomや3colomのliquidな物が作れるように
なっているらしく良さそうな感じ、使うかもしれない。

いちようHTML5のテンプレはできたし問題はないはず。
がHTML5の動的な感じのタグはまったく使ってないため、そのうち使いたい。

参考リンク
Web標準仕様日本語訳一覧

CSS3 でのレイアウトで使える box 系プロパティのまとめ

多摩美 - メディアリテラシー 2010::HTML5+CSS3 入門

html5で少し

前回に続きhtml関係で色々と調べて気になったものを調べた。

Canvas: javascriptを使って図形とか絵とかを描画できる、アニメーションの機能はなくて、コマ送りで実現するのかな
DOM: html,xmlのためのAPI。
SVG: 描画できる。アニメーションもできる。
audio,video,input,section,aside,nav: 新しいタグ（一部）,audio,videoがすごそう。とか

HTML5は何かプログラムっぽいような感じで面白そう,
あとなんだかんだjavascript必要そう。

htmlについて

HTMLの基本的なことについて

HTMLの移り変わり: HTML1.0->HTML2.0->HTMLi18n->HTML3.2->HTML4.01->HTML5
XHTML: HTMLの元であるSGMLから、 HTMLの反省点である化学式などの様々な表現をできるようにしたXMLがまずあり、 HTML4をXMLに近づけたものがXHTMLらしい。

参考リンク

HTML5とCSS3のブラウザ対応について

tech memo in.

ページ