【実際のプログラム】公開
分譲マンションを検索できる
（諸条件/利用交通機関、駅名、時間
※対象エリアの一部のDATAでテスト運転済
【検索エリア】
北摂エリア
大阪府豊中、箕面、吹田、池田、高槻、茨木
阪神エリア
西宮、芦屋、東灘区、灘区
１．【HTML】プログラミングのポイント説明
1-1.
プログラミングでは頻繁に使われるハンバーガーメニュー
ページ内のリンク先へ遷移させる複数のクリックのあつまりで、折り重なってハンバーガーのような表示に見えるテンプレート（様式）
1-2.
href ( hypertext referenceの略 ：エイチレフ )はリンク先の場所を指定します。
glyphicon (http://icon-search.jp/)は、あらかじめ用意されたものの中からアイコンを選んで表示する機能。
Webサイトでアイコンを表示する際、「イラストレータやフォトショップを使って画像として切り出し、imgタグを使って表示」しますが、Glyphiconのようなアイコンフォントでは」、画像として切り出す必要がなく、HTMLタグ（span）にclassをつけるだけでよく画期的な仕組です。
例えば、ハート♡であれば、
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>遷移させるプログラムの指示
＃ ⇒ id
<li><a href="#top">TOP</a></li>
～～～～#の部分からid="top"と書かれたところへジャンプ～～～～
<div id="top" class="top__bg">hrefの記述の仕方は、プログラムの中で
「# + id名」と書き、設定されたid先へ画面が飛んでいきます。
1-3.
「ul」「li」タグ（このプログラムでは「ol」タグは使っていません）
HTMLではul、ol、liの3つのタグを使って箇条書き（リスト）を作ることができます。
1-4.
このプログラミングのDATA仕分は「/」で区切っています。
HTMLシートの中でDATAを「/」で区切り、区切ったDATAを検索できるプログラミングをかいています。
1-5.
プログラミングの配列では、一番目のDATAを「０番」と呼びます。
配列は[ ]で表現されます。この[]中にDATAを格納していく場合に[a,b,c,d,e,f,g]という７つのDATAが保存されている場合、
一番初めのDATAのaは「0番」目に保存されていると言います。
DATAが７つありますので７番目でなくgは「６番」目となります。１つマイナスの「番目」と呼びます。プログラミングの初期ではよく間違いますので注意が必要です。
1-6.
このプログラムのDATAには「●分」があるものと「分が無い」ものが混在していた
DATAから「分」を取り除き、数字だけにさせるプログラミングが必要でした。
「/」で区切った一番右端の見てください。
例えば時間で３分と記載されている場合と単純に数字の10と記載している場合があります。
この一文字を分離するプログラムする為に丸２日かかりました。
この「悩み」を解消するために、ネットで調べあらゆるパターンを試行錯誤することでスキルが身に付きます。
あきらめずに頑張るしかありません。
Web上のメンターがいると質問できるという心理的な安堵感があるため、あきらめずに考える勇気がでます。結局は質問せずに自分でできるケースが８０％ありますので、メンターがいるとことはお勧めです。
1-7.
このプログラミングでは、検索キーワード（所在地、交通機関、徒歩など）をDATAからセレクトし抽出するようにしています。
DATAを見れば非常に簡単ですが、これをJavascriptで種類ごとに分けてDATAを格納するプログラムを書くのにも丸２日かかりました。
この中で、抽出するための関数（自分で定義するものと、エクセル関数のようなライブラリー）や方法がなんとなくイライラしなはらも気づだします。
ライブラリ(Library)とは、汎用性の高い複数の プログラム を、再利用可能な形でひとまとまりにしたもので、「クラスや関数といったパーツのまとまり」で提供されるソースコードの部品です。
1-8.
プログラミングの快感とは
かなり悩んだあとに自分の想定した通りに検索される快感は癖になります。
「生意気で全く振り向かなかっ部下たちが一気に素直になり100%こちらの指示に従い完璧に処理を実行」してくれるわけです。
かつ「瞬間に変化する感動」はプログラムを書いた人でないと味わえない感覚です。
1-9.
プログラミングでは非常に細かくDATAを分離できますが、検索する顧客の立場でセレクトキーワードを選ぶことが最優先。
例えば、徒歩時間の分け方の場合、単純に1分ごとにも分離抽出できますが、徒歩1分と徒歩２分では細かすぎるので５分刻みで抽出できるほうが便利だとかを顧客立場で考えれば判断できる。
1-10.
プログラミングでよく言われ言葉に「ロングテール」というものがあります。これがネットビジネスの醍醐味です。
ロングテール（英語: the long tail）とは、インターネットを用いた物品販売の手法、または概念の1つ。
販売機会の少ない商品でもアイテム数を幅広く取り揃えること、または対象となる顧客の総数を増やすことで、総体としての売上げを大きくするものと ウィキペディア に解説されています。
小さなものを積み上げて莫大な量にできるという従来の「大量で少ない種類」とは逆転し、「少量で多品種」という考え方。AMAZON（アマゾン）はその典型的な企業。
恐竜の尻尾（tail）のような形状から「ロングテール」と呼ばれる。
1-11.
ホームページをプログラするときにはSEO対策としてキーワード選定が重要
SEO対策の世界では、
検索語に使われる単語の数で
ヘッドキーワード（1語：ビッグキーワードとも言います）と
ミドルキーワード（2語）
ロングテールキーワード（3語以上）
に大きく分類されます。
一般的には、検索ボックスに入力する単語の個数が多くなるほど、より具体的なトピックにフォーカスすることができます。
ロングテールキーワードは、3つ以上の単語を組み合わせた複合キーワード（検索クエリ）。ヘッドキーワードであるビッグキーワードよりもより具体的な内容が検索されることになります。
1-12.
1-13.
1-14.
時間で検索する部分のプログラムの抜粋
<p>■<徒歩>時間でさらに抽出<span id="cityCity"></span>
<select name="example2_2" id="target2_2">
<option value="0">選択下さい</option>
<option value="5">徒歩5分以内</option>
<option value="10">徒歩6-10分以内</option>
<option value="15">徒歩11-15分以内</option>
<option value="20">徒歩16-20分以内</option>
<option value="21">徒歩20分以上可</opti>
</select>
</p>
1-15.
1-16.
今回のHTMLのプログラムは約700行です。
HTMLで書いた内容は「骨と筋肉」です。骨と筋肉だけではプログラムは動きません。
そこにどのように動かすか（画面遷移、変化）やDATAの保存先など細かい指示を与えるプログラムを別に書きます。
そのプログラムがJavascriptです。
<script src="bootstrap/js/bootstrap.min.js"></script> のような部分がありますが、１行でも不足するプログラムが動かなくなります。
この辺りは、詳しい親切な知人がいるか、プログラミング教室、または、Web上のスクールに通わないと時間がかかりすぎる内容です。
