読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

JavaScriptの動かないコード(中級編)Aタグがリンクとして機能しないエラー (URL・hrefの%エンコードがRFC違反だと,IEで例外が発生)

連載目次へ 以下のJavaScriptコード(というよりHTMLそのもの)が意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: HTML上で,Aタグによりリンクを表示する。 そのリンクのURLを, JavaScriptから取得する。 <a href="http://google.com/?q=%" id="a1">ブラウザは, このHTMLリン</a>…

画像ファイルを,HTMLファイル内に埋め込み,1ファイルに統合する (BASE64を使ってファイル数を減らす方法)

バッチのまとめTOPへ 画像など外部ファイルは,HTMLの中に「文字列として埋め込む」ことができる。このためには,BASE64エンコードの技術を使えばよい。 下記の文字列を,ブラウザのURL欄にコピペしてみよう。PNG 画像が表示される。(画像の内容は,Linuxペ…

はてなダイアリーに執筆した記事一覧を,表形式に整理するブックマークレット (アーカイブページを,Excelに貼り付けやすく整形加工)

JavaScriptプログラミングのTOPへ はてなダイアリーの「記事一覧(アーカイブ)」のWebページから情報を抽出して,Excelに貼り付けやすい,「タブ区切りの表形式」に変換してくれるブックマークレット。 javascript:(function(d,T,b,tb,L,U,byCN,arr,i,git,t…

台湾語のピンイン文字の,コピペ用一覧表 (声調符号付きアルファベットで発音を表記)

「中国の言語を学ぶ」 TOPへ 閩南語の一種である台湾語には,発音記号の代わりとして,いわゆる「教会ローマ字(Church Romanization)」または「白話字」という伝統的なピンイン表記法がある。 その台湾語ピンイン表記法について,1声から8声までの声調符号…

たった2ファイルで,HTML+JS製のネイティブAndroidアプリを作る手順 (動作するサンプルコード付き。WebViewの活用方法)

AndroidプログラミングのTOPへ 重要なお知らせ:この記事で公開した情報は,AndroidのMVCフレームワーク「Android-MVC」の機能の一部として取り込まれました。より正確な設計情報や,動作可能な全ソースコードを閲覧したい場合,「Android-MVC」の公式ページ…

CSSだけで「横並び」と「縦並び」を切り替え可能なテーブルを,dl・dd・dtタグで作ろう (table要素を使わない,変更しやすい表組みレイアウトの実装方法)

HTML上で表組みを実装する際には,table要素を使うのが一番手っ取り早い。 しかし,tableで作った表組みは,変更しづらい。(メンテ性がよくない) 例を挙げよう。下記のように,「項目名」と「項目の説明」が横並びで並んだ表組みがあるとする。 この表組み…

中国語を独学するための,辞書やピンイン変換・翻訳ツールなど無料のオンライン教材のリンク集

「中国の言語を学ぶ」 TOPへ 中国語の言語情報をWeb上で取得したい場合,下記のようなオンライン・ツールが必要になる。 単語の辞書 文章を自動翻訳できるページ ピンインによる発音を知るためのページ。音声付き。 最近は情報の流れが高速化したので,紙の…

Webサイトの画像に文字を埋め込もうとする人がいたら,フォントのライセンス問題を知ってもらうために見せるページ (MS明朝・MSゴシックは,商用利用可能か?)

フォントには,著作権がある。 Webページ上でテキストとして表示するのは問題ないが,画像の中に文字列を埋め込むと,フォントのライセンス違反になる場合がある。この点は意外と知られていない。 フォントごとに,ライセンスの内容は異なる。例えばWindows…

ソーシャル系ボタンの設置用サンプルコード (はてブ・Twitter・Facebook・Googleプラスワン等のプラグインをサイト上に表示する方法)

はてブ・Twitter・Facebook・Google+1 など,「押すボタン」系のソーシャルプラグインをWebページ上に表示する方法。 すぐコピペできるよう,HTMLのコードで掲載。 (1)Twitterの「ツイートする」ボタン (2)「はてなブックマークに追加」ボタン (3)…

Facebookアプリで「Hello, World」の作り方と,リリースまでの開発手順

Facebookは,世界最大のSNS。 ユーザ数は,現時点で 世界で7億人弱。(twitterは2億人) 日本国内で400万人弱。(twitterは推定約2千万人) ※利用者数やPVではなく,ユーザ数。 Facebookユーザー数が米国で減少も日本では再度増加傾向 http://takao.asaya.…

WebアプリとAndroidアプリのアナロジー (「Androidのアレは,Webで例えるなら○○だ」)

AndroidプログラミングのTOPへ Webアプリの開発者が,初めてAndroidアプリを作るとする。Android SDKの使い方など,新しく覚える事が多い。学習には時間がかかる。 そこで,効率的に学ぶため,Webを使った「例え話(アナロジー)」で覚えてみるのはどうか? …

HTMLとスタイルシート(CSS)の業務スキルレベル 判別表 (5段階)

スキルチェックの目次へ HTMLおよびスタイルシート(CSS)を利用したWebページ制作の,簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。これは,「Webページをコーディングして作る人」全般に当てはまる。 …

CSSの動かないコード(中級編) Windowsのデスクトップテーマが「XP」の時,ボタンに背景画像を表示したい

クイズ… 下記の HTML+CSS が,意図した通りに表示されないのはどうしてですか。(制限時間1分) やりたい事: ボタンの背景に,画像を表示したい。 <style> input { /* ボタンの背景に画像を表示する */ background-image : url(fuga.PNG); /* 背景画像は繰り返さ</style>…

なんとなくCSSを使っている人が,CSS中級者になるために (「崩れないレイアウト」のセオリー)

CSSを「なんとなく」知っていて,「なんとなく」使っている,というケースがある。 そういう場合,思わぬところでレイアウトが崩れ,要素の正確なポジショニングができず,「なんとなく」ずっと悩み続けることになる。 その原因は,CSSの中級のノウハウが足…

JScript製の簡易 HTML テンプレートエンジン (Webサイト作成時に,画面の共通部品を外部読み込み)

簡易なHTMLテンプレートエンジンのようなもの。 例えばHTMLファイル内に「 #header# 」と書くと,その部分が header.html の内容で置き換えられたような新HTMLが生成される。 つまり,ページ間の共通部分をべた書きしないで済ませるための,よくある置換(inc…

JavaScriptの動かないコード (中級編) テーブルに行追加できない

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) <table border="1" id="my_table"> <tr> <td>1行目です。</td> </tr> </table> <input type="button" onClick="f()" value="行を追加"> <script language="JavaScript"> function f() { //alert( my_table.innerHTML ); // 行要素を作成 var e_tr = document.createElement("tr"); var…

JavaScriptの動かないコード (中級編) p要素への appendChild() で失敗する

連載目次へ クイズ…下記のJavaScriptコードが,意図した動作をしないのはどうしてですか。(制限時間1分) やりたい事: <p>タグの中に,div要素が1つ入っている。もう一つdiv要素を追加して, <p id="target_tag"> <div id="div_1">1つ目のdivです。</div> <div id="div_2">2つ目のdivです。</div> </p> というタグ構造に…