Posted by アイ・エス・シーシステム事業部
on 2011年06月07日 in HTML,JavaScript/Ajax,jQuery,WEB,WEBサービス,便利ツール,技術


Initializr というサイトで
15秒でHTML5のテンプレート的なコードを生成出来てしまいます!

こんな感じで・・・・

【HTML&CSS】
サンプルページにするとサンプルページのコードがくっついてきます。

【Javascript】
jQueryのminバージョンを付けて!

【Compatibility】※互換性
Modernizr!・・・ってモダンブラウザ的なことだろう・・・ と思う。

【Server Configuration】
サーバーコンフィグ・・・いらない

【Analytics】
いらないかな・・・・


この設定で作った物をダウンロードしたページ・・・

中身のコードはこんな感じ・・・(抜粋)
[html]
<!doctype html>
<!–[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]–>
<!–[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]–>
<!–[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]–>
<!–[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html lang="en" class="no-js"> <!–<![endif]–>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>
<meta name="description" content="">
<meta name="author" content="">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">

<script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
<p class="info">Your HTML5 project is almost ready! Please check the <a href="TODO.txt">TODO list</a>.</p>
<div id="header-container">
<header class="wrapper">
<h1 id="title">Your title</h1>
<nav>
<ul>
<li><a href="#">Some</a></li>
<li><a href="#">navigation</a></li>
<li><a href="#">links</a></li>
</ul>
</nav>
</header>
</div>
<div id="main" class="wrapper">
<aside>
<h3>Something aside</h3>
</aside>
<article>
<header>
<h2>Your article heading</h2>

    ・
    ・
[/html]

冒頭に[if IE]の嵐がっ!
モダンブラウザ対応した証拠ですね。
No Contentsを選べば手っ取り早い雛形の完成です。

Posted by アイ・エス・シーシステム事業部
on 2011年05月21日 in WEBサービス,便利ツール,雑記


今日のあなたの取り扱い説明書をゲットしてください!

Powered By ISC-WEB
ページのみ表示

入力された「名前」を元にいろいろ解析(?)して今日のあなたの「取扱説明書」を表示します。

いろいろやってみてください。
日付も関係させてありますので同じ名前でも明日は違う結果が待っています。

バージョン2では
任意の結果表から結果を出力することが出来るようにしました。

「項目追加」ボタンで入力欄を増やしてどんどん追加できます。
※項目追加したあとは「名前」を変更してやってみてください。

Posted by アイ・エス・シーシステム事業部
on 2011年05月15日 in WEBサービス,便利ツール


今日のあなたの取り扱い説明書をゲットしてください!

Powered By ISC-WEB

入力された「名前」を元にいろいろ解析(?)して今日のあなたの「取扱説明書」を表示します。

いろいろやってみてください。
日付も関係させてありますので同じ名前でも明日は違う結果が待っています。

Posted by アイ・エス・シーシステム事業部
on 2011年05月03日 in JavaScript/Ajax,WEB,便利ツール,技術


素敵なWebサービスを発見しました!
HeartRails Express | 路線/駅名/最寄駅データサービス
こちらのWeb APIを使うだけで「エリア/都道府県/路線/駅/最寄駅」の情報が簡単に取り扱えてしまいます。
しかも、商用・非商用問わず無料で利用出来ます。

サンプル↓

ソースはこれだけ・・・

[html]
<html><head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>都道府県→路線→駅のコンボが簡単に出来るWebサービス</title>
<script type=”text/javascript” src=”http://express.heartrails.com/api/express.js”></script>
</head>
<body onload=”HRELoadPrefecture(‘prefecture’, ‘line’, ‘station’);”>
都道府県を選択すると・・・<select id=”prefecture” name=”prefecture” onchange=”HREOnChangePrefecture();”>
<option value=”都道府県を選択してください”>都道府県を選択してください</option></select><br />
路線が自動的に入れ替わり・・・<select id=”line” name=”line” onchange=”HREOnChangeLine();”><option value=”路線を選択してください”>路線を選択してください</option></select><br />
駅もその路線の駅一覧に入れ替わります・・・<select id=”station” name=”station”><option value=”駅を選択してください”>駅を選択してください</option></select>
<br />
<a href=”http://express.heartrails.com/”>Heart Rails Express</a>| 路線/駅名/最寄駅データサービス を利用しました。
<br />
※「都道府県名」 「路線名」 「駅名」 の連結コンボボックス をそのまま利用しただけです。
</body>
[/html]
不動産サイトとかナビ系サイトとかに使えそうです!

ページトップへ戻る

Get Adobe Flash player