“名前だけ、診断系サイト”の作り方

『診断系のジェネレータ（○○メーカーみたいなもの）を自分も作りたいなあ。』と思い、勉強し始めてから半年以上たちました。

結局、○○メーカーのようなものを作ることはできませんでした…。
絵とか使うのは、なんだかよくわかりません。

それでも一応、名前を入力したら言葉による結果が返ってくるような簡単な診断系サイトのようなものを作ることができました。
基本的なJavascriptのみでできている、簡単なものです。

そのおかげというかなんというか、簡単に改造ができて、あまり難しいことを考えずに、ブログに載せることができたりします。

私は記憶力の方がかなりアレなので、忘れないうちにHTMLとかJavaScriptによるプログラムの仕方やブログに載せる方法を、なるべく分かりやすく書いておきたいと思います。
　

続きを読む

正直、JavaScriptが何なのかHTMLが何なのか、私自身いまいちちゃんと理解してるとは言いがたい状況なのですが、とりあえず私が使ってるツールやサイトを紹介します。


TeraPad
作者：寺尾 氏 のページ　　　ベクターのダウンロードページ
フリーのテキストエディタソフト。簡単に言うとメモ帳（notepad）の機能拡張版。
JavaScriptのプログラミング（というかHTMLの編集）には、メモ帳でもいいけど、“検索”や“置換”ができるので、いろいろ便利です。


JSLint
スクリプトエラーが出てるけどどこがエラーになっているか分からないとき、どこがエラーになってるか教えてくれるサイト。
スクリプト（script）をコピーしてJSLintのサイトの四角い枠の中に貼り付けて、下にあるボタンを押すとどこでどんなエラーが出たか教えてくれます。
ただ、英語のサイトなので、何が書いてあるかさっぱり分かりません。
でもエラーの場所はだいたい分かるので、そこに絞ってエラーの原因を探すことができます。
私の場合、全角のスペースか、“{”と“}”の数が合わないとかそんな理由が多いです。



それでは実際に作ってみましょう。

　　　　　　　　　　　　　　　　　　　　基本編１　とりあえず基本のプログラム 　


　
　

テーマ:占い - ジャンル:趣味・実用

いろいろ説明しても、分かりにくくなるだけなので、とりあえずやってみましょう。

まず、TeraPadを起動します。

続きを読む

前回、つくったプログラムを元に、簡単な診断系サイトのようなものを作ってみたいと思います。
今回はまず名前を数値に変換するまでです。

続きを読む

オリジナルの診断系コンテンツを作るときに最も重要なのがこの、
結果として表示される言葉のリストです。

というわけで、今回は　言葉のリストを作って、それをプログラムに乗っけるところまでをやりたいと思います。

続きを読む

それでは、前回作ったリストの中から、言葉を一つ取り出して結論として表示させたいと思います。

一応、今回で完成します。

続きを読む

結果を表示するときに、ゆっくり表示するようにしてもったいつけるやり方です。

ここからは一応、基本編を見てきた人用の説明です。

　　　　　　　　　　　　　　　　　　　　　見てない方は見ておいたほうがいいです…　→　基本編

続きを読む

最後に、オチのようなものをつけてみます。
オチとかの解説をするのは、とても恥ずかしいのですが…。

　　　　　　　　　　　　こちらを見ていることが前提になっています。→　基本編
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　応用編１

続きを読む

このサイトで作った診断・占いのプログラム（ＨＴＭＬとJavascript）を載せることができるブログの一覧です。
ホームページとかは難しそうなので、私はもっぱら無料ブログを使っています。
　

続きを読む

テーマ:占い - ジャンル:趣味・実用

載せる方法といっても、ただ単に記事として載せればいいだけだったりします。
FC2ブログやso-netブログやlivedoorBlogはそれで大丈夫だと思います。

とはいえ、注意点がないわけではありません。

続きを読む