Qitailangのブログ

Webデザイン、碁、Esperanto、自然農法的家庭菜園

スマホでも打てるボード碁会所を設置してみました

趣味が囲碁なのですが、ボード碁会所を設置してみました。操作は簡単です。

1. メンバー登録する

2. 掲示板に対局を希望する旨の投稿をする。手合いなどは掲示板を使って相談する

3. 対局相手が決まったら白番・黒番どちらかが対局盤を設定する

4. 対局盤を開いてマウスクリックで石を打ち、コメントを添えて、投稿する

そのうち棋譜が投稿できる検討用の掲示板を設置して、あーだ、こーだと言いながら検討できるようにするつもりです。

すでに何人かメンバーになっていただいているのですが、スマホで昼の空いた時間でも打てるのが良いといった感想をいただいています。

f:id:idqtl:20170212104901p:plainhttp://qitailang.small.jp/go/boardgonew/

バー、ショットバー向けテンプレートを作ってみました。

Shot Bar、ワインバーなどをイメージしてホームページ・テンプレートをつくってみました。

f:id:idqtl:20150910113437j:plain

http://qitailang.small.jp/template/bar/index.html

http://qitailang.small.jp/template/

 背景画像をウィンドウ全体に表示してみました。あまりウィンドウ全体がスクロールしないように、div要素をbxSliderでスライド表示にし、価格表などはオーバーフローにして、ウィンドウ内でスクロールするようにしました。その代わりにniceScrollでカスタムスクロールバーにして、ちょびっとオシャレにするつもりが、niceScrollとbxSliderの相性が悪くエラク苦労してしまいました。結局niceScrollを止めてjscrollpaneにしたら、あっさっりできてしまいました。niceScrollはスライド内容など動的コンテンツには向いてないようです。

割烹、和食レストラン、居酒屋向けテンプレートを作ってみました

和風な飲食店むけテンプレートです。

画像置換を使ってソースを読みやすくしました。SEO的にも有利じゃないかと...

デザインはきわめてシンプルな代わりに、bxSliderでちょと動きのあるページにしてみました。

http://qitailang.small.jp/template/kappou/index.html

http://qitailang.small.jp/template/

f:id:idqtl:20150903121822p:plain

テンプレートをダウンロードできるようにしてみました

これまで、カスタマイズしたり自作したwebページテンプレートを全部ではないですが、ダウンロードできるようにしてみました。

http://qitailang.small.jp/template

 

f:id:idqtl:20150830183935p:plain

f:id:idqtl:20150830183951p:plain

f:id:idqtl:20150830184008p:plain

問い合わせ用メールリンクを作る

f:id:idqtl:20150813122301j:plain

問い合わせにはフォームを使うのが一般的で、それなりの会社だったらそうするのが普通だろう。

しかし、私の経験ではフォームでは、スパムメールは排除できても、admin@hoge.comみたいな架空メールアドレスからの投函を防ぐのが難しいのではないであろうか?

フォームの利点は記入内容を指定できることだ。そこで個人、小規模会社などを想定してメール・リンクを使ってそれに近いことをでやってみることにする。

http://qitailang.small.jp/template/how_to_make_mail_link/

上のツールは、記入してもらいたいことが促せると同時に、暗号化によってスパムメールも排除できる(かなり安全性は高いと思う)。

和風レストラン、古民家レストラン、寿司店、旅館向けテンプレートを作ってみました(NIkukyu-Punchさんのテンプレートをカスタマイズ)。

http://qitailang.small.jp/template_modified/yado2_blue/

http://qitailang.small.jp/template/

中華料理店向けテンプレート

中華料理店向けテンプレート向けテンプレートを作ってみました。

f:id:idqtl:20150714080701p:plain

 http://qitailang.small.jp/template