制作物

SVGで印鑑画像を作るツールを公開しました。

SVGで印鑑のように赤丸で囲んだ文字の画像を作るツール
Seal editer made with SVGを公開しました。

制作上の解説は後日ですね。

SVGを触ってみた。

今回はSVGを触ってみます。

Content created by AXY のほうで
グラフを書きたいと思ってD3.dsを触りながらDOMの書き換えで「なにこれ便利ー」って思ってたんだけど、
ＳＶＧでグラフ書くとこでちょっと引っかかったのでした。
そんなわけで、ＳＶＧを直接書いてみようという訓練をしてみました。

それでは本編。

HTML5とJavascriptとPythonでファイルをアップロードしてみた。

前回

HTML5とJavascriptとファイルビュアーを作ってみた。 で
ローカル上にあるファイルの表示をしてみました。
今回はそのファイルをサーバーにアップロードして、アップロード先のURLを返してもらう
ファイルアップローダーを作ってみようと思います。

それでは、本編です。

テキストボックスの入力除外リスト機能を作ってみた。

その言葉は使わせない！

今回はテキストボックスに入力した文字列の中身を照合して、
使用していいのか判定して、表示みたいと思います。

それでは本編です。

HTML5とJavascriptでファイルビュアーを作ってみた。

ブラウザで

ローカルファイルを表示できるものを作ってみました。
画像とテキストファイルの取り込みができます。
いい感じ(>_<)

選択候補付きテキストボックスを作ってみた。

DataListが使いにくかったから

自分で候補を表示する機能を作ってみました。
jQueryなし、html5+javascriptのみで実現できます。
それではやってみましょう。

table要素を絞り込んでみた。

今回は

JavascriptでTable要素を絞り込んでみます。
キビキビ動いていい感じです。

それではやっていきましょう。

相互連動するSelect要素を作ってみた。その２

初めに

前回の　相互連動するSelect要素を作ってみた。 で欠陥(使い方次第な気もするけど)を見つけたので作り直してみました。
それではやってみましょう。

CSS備忘録 スライドして出てくるサイドバーを作る

初めに

今回はスライドして出てくるサイドバーを作ってみます。
シュッシュッと動いて意外とかっこいいものになりました。

CSS備忘録 CSSだけでドロップダウンメニューを作る

CSSだけでマウスオンすると展開するメニューを作ってみました。
これHTMLだから簡単だけど、GUIアプリで作ったら大変だなきっと・・・。とか思ってます。

それではサンプルです。

CSS備忘録 CSSだけでポップアップボックスを作る

特定の編集画面をページ遷移ではなく、
ポップアップで作れないか試してみました。

結構いい感じです。CSSって本当に便利なんですね。(気が付くの遅いよね。絶対。)

それでは、サンプルです。

CSS備忘録 ページの中央にdivブロックを設置

CSS備忘録
場面中央にdivブロックを設置するような画面構成ってあると思います。
ログイン画面とか・・・・。

というわけで、divブロックを中央に設置してみます。

CSS備忘録 レスポンシブ タイルデザインから1カラムデザインに切り替える

CSSの勉強を続けていく中で苦手意識が少し取れてきた気がします。
レスポンシブデザインにも挑戦しています。

とはいえ1から書いてと言われたらいささか辛いかもしれません。

というわけで備忘録です。 今回はレスポンシブ！

CSS備忘録 コンテンツが短いときは最下部に固定されるフッター

HTMLの編集をしていく中でCSSの勉強が必要になってきたんですが、
このCSSが非常に厄介でいまいち思った通りの見た目になってくれない・・・。

いろいろ調べて、これはもうありがちなパターンをテンプレートにする感じなんではないかと思い始めてきました。 というわけで備忘録的なサンプルです。

HTMLを動的に書き換えよう

前回はAjaxでデータを動的に取得してテキストボックスに内容を入れてみました。
今回はHTML自体を書き換えてみたいと思います。

それではコードです。

ブログにソースコードを記載するのがちょっと面倒だったから

Bloggerに記事を書き始めて一か月ぐらいになるんですが、
実は面倒なことがありました。
「ソースコードの貼り付け」・・・
htmlタグをタグとして解釈されない形で書かないといけなかったからです。
具体的には<と>を&lt;と&gt;への書き換えです。

ごく最初は手作業。
次はwordで・・・(あほか！)
それで今回Pythonが扱えるようになってきたので、
今回はそれを処理として書いてみました。
それではコードです。

Pythonでシェルコマンドを実行してみたかったから

PythonからCGIとしての応答の内容として「 ls 」とかのコマンドを実行してみたかったので、
いろいろ調べてみました。

最終的に対象ディレクトリをlsコマンドを使ってファイル一覧を取得して、
ファイルのリストを返してくれるCGIを作ってみました。
(CGIのテストにいちいちURL打つのがめんどくさかったのさ・・・。いくら履歴があるとはいえ)
思ったよりも便利でラッキーでした。

さてコードです。

CGIで送られてきたすべてのPostクエリの内容を表示してみる。

前回CGIを動かせるように設定をしてみましたが、
やはりサーバーとやり取りをするためには、リクエストを受けて処理することが必要です。

でも、デバッグするとき全部のinput要素のnamaなんか書いてられない・・。めんどくさい！
なので送られてきたものをすべて表示する処理をいろいろ調べて書いてみました。
今回はPerlとPythonの二つです。