fkm blog

software開発に関することを書いていきます

web

Ractive.js + Page.js + Webpackのテンプレート(4)

このテンプレートの説明、その4 github.com fetchTemplate() は指定したHTMLテンプレートを取ってくるメソッドとしたけど、そのHTMLテンプレートがどんなのかを説明する回 サンプルで読み込むHTMLテンプレートはこれ <h1>Top</h1> これが、 index.html の id=containe…

Ractive.js + Page.js + Webpackのテンプレート(3)

このテンプレートの説明、その3 github.com page.jsを使うと簡単にルーティングができるのがわかったので、次は各画面をどう実装するか。 /// <reference path="./IPage.ts" /> import Ractive from '../ractive'; export default class TopPage implements IPage { private app: IApplicati</reference>…

Ractive.js + Page.js + Webpackのテンプレート(2)

page.js部分をもう少し。該当部分のコードを再掲しておきます。 export default class Router implements IRouter { // 中略 navigate(path: string): void { page(path); } redirect(path: string): void { page.redirect(path); } } 画面遷移する 画面遷移…

Ractive.js + Page.js + Webpackのテンプレート(1)

続いてテンプレート内の要素説明。今回は Router export default class Router implements IRouter { constructor(app: IApplication) { page('/', () => { this.showPage(new TopPage(app)); }); } start(): void { page(); } navigate(path: string): void…

Ractive.js + Page.js + Webpackのテンプレート(0)

もちろんTypeScriptです。pagejs-webpackの下に作成してます。 github.com 準備 テンプレートなので別のとこにコピーしてから使う。まずは必要なものをインストール $ npm install TypeScriptをインストールしてる場合は、多分次のコマンドが必要。もし忘れ…

jQuery UIを使ってみる(4)

タブも使ってみる. アコーディオンと同様に, HTMLでブロックつくってtabs()でタブ化する というノリらしい. お約束はこの2つかな? ulでラベル部分を作る. このときページ内リンクも作る ラベルとタブ本文のidをあわせておく 小さいので全文載せるよ. <html> <head> <meta charset="utf-8"> <title>JQ</title></meta></head></html>…

jQuery UIを使ってみる(3)

ボタンセットというのがあるらしい. ラジオボタンの見た目をボタンに変更できるみたい. まず, こんな感じでグループっぽく作る. ラベルにはforでidを指定するみたい. <section id="radio"> <input type="radio" id="radio1" name="os"/><label for="radio1">Android</label> <input type="radio" id="radio2" name="os"/><label for="radio2">iOS</label> </section>

jQuery UIを使ってみる(2)

次はdatepicker. 本家のサンプルだと微妙に使い方が。。。テキストボックスに日付をいれてもらう代わりに, カレンダーで選ばせる時が出番. <html> <head> <meta charset="utf-8"> <title>JQuery UI Lesson 3</title> <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.min.css" > <script type="text/javascript" src="jquery-1.9.1.js"></link></meta></head></html>

jQuery UIを使ってみる(1)

アコーディオンを使ってみるよ. まずはソースから. 短いので全部書くよ. <html> <head> <meta charset="utf-8"> <title>JQuery UI Lesson 2</title> <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.min.css" > <script type="text/javascript" src="jquery-1.9.1.js"></script> </link></meta></head></html>

jQuery UIを使ってみる(0)

使わないと覚えないので, 使ってみるまずは使い道ありそうな, dialog. 覚えたての$(function() {})の出番 <section id="dialog" title="Hello dialog"> <p>Here is the message</p> </section> <section> <input id="dialog-link" type="button" value="Show dialog"/> </section> <script> var opt = { autoOpen: false, width: 400, buttons: [ { text: "Ok",…

jQueryの$(function() {} )

jQueryの$(function() { }); って何だろう$(document).ready()のシンタックスシュガーらしい $(function() { alert('読み込み、終わったでー'); }); $(document).ready(function() { alert('読み込み、終わったでー'); }); 覚えておこう

横に並べる

ブロックを横に並べたいときーdisplay:inline-block; をつければいいのかー

こんなのもそろそろ作れる?

web

基本はブラウザ上で動作するチャット でもリロードが面倒なのでメッセ風に送受信 ならgmailアカウントでいいじゃんという風になるけど、複数人での登録不要チャットで 雰囲気としてはIRC-コマンド+ブラウザ上で動作 かなぁ

CSRF

web

某所のサーバーがCSRFで落とされた。こんな場合、攻撃した側に非があるが、脆いcgiを作成した方にも非があるのだろうか…?Webアプリケーション作成も大変そうだ

HTML狂とプログラマー

ワタシの知り合いには「ただしいHTML推進委員会」みたいな人が数人いたりする。チェッカーは満点が基本で、「携帯からもちゃんと閲覧できるページを作りなされ」といった感じだ。 「正しく書く」という分ではまぁ共感できるが、「携帯でも閲覧できるペー…