最近仕事でよくやるのに毎回忘れるので自分用にメモ。Windowsでの話。

階層が深いサイトでヘッダーやフッター・リンク等をphp等でテンプレート化してインクルードさせる場合、相対パスだと一段・二段…と深い階層に遷移した際にリンクの起点がズレるのでcssやイメージのリンクが切れてしまうことがあり、これを回避する為にルートパスで記述することがあります。 しかし、ルートパスでサイト構築する場合、そのままブラウザでローカルプレビューするとcssやjs、imageへのリンクが切れた状態で表示されるかと思います。 基本php等でローカルプレビューする場合、xampp使ってapache起動して確認したりしていますが、何も考えずにプレビューするならC:\xampp\htdocs\配下にディレクトリ作るかと思うのですが、C:\配下にテスト環境作っていくのってなんか気持ち悪いしディレクトリが肥大化していくので自分には耐え難かったです。 どのみちルートパス用にサーバー構築するならば、C以外でローカルサーバーを立てた方がwin-winな関係でしょう、ということでapacheのヴァーチャルホストを使ってC以外（今回はD）にローカルサーバーを構築していく方法を書いていきます。

• C:\xampp\apache\conf\extra\httpd-vhosts.confの最後に下記を追記。

<VirtualHost *:80>
 DocumentRoot "D:/hogehoge/test"
 ServerName test-server
</VirtualHost>

• C:\xampp\apache\conf\httpd.confの最後に下記を追記。

<Directory "D:/hogehoge/test">
 Options Indexes FollowSymLinks Includes ExecCGI
 AllowOverride All
 Order allow,deny
 Allow from all
</Directory>

• C:\Windows\System32\drivers\etc\hostsの最後に下記を追記。

127.0.0.1 test-server

127.0.0.1の横に、1.でServerName の隣に書いたサーバー名を書けば良いです。 - xamppのapache起動。 - ブラウザのURLバーにtest-serverと入力してアクセスできるか確認

参考にしたサイト

• サイトルートパスをローカルプレビュー
• 名前ベースの仮想ホスト

提出課題

HTML課題をHTMLで書く（gistをforkして編集する）。 ポイント：章立てをh1, h2やul liなどを使って自分なりにマークアップしてみる

提出方法

HTML課題にHTMLマークアップをしたものをGistに貼り、そのURLをlingrインターン用チャットに貼る。（後のGithubの章でこれをGithubにもアップする）

こうしてみた。 https://gist.github.com/4175535

あとは時間余ったのでドットインストールのCSSの基礎を見始めた。

引き続きHTMLの学習です。

今日は HTML要素のリファレンスのフォーム系・インタラクティブ系要素に目を通していきました。 フォーム系は業務で携わる部分が少なく苦手でしたが、HTML5から規定された要素や属性が沢山あるので目から鱗が落ちまくって楽しく学習できました。 ## フォーム系

• autofocus/placefolder/required要素あたりは直近の業務で使う機会があったのでおさらい。
• datalist/keygen/output/input要素のtype属性でHTML5から追加になったものはtelとemailしか使ったことなかったのでデモ作りながら確認。

インタラクティブ系

• css等で弄らなくてもsummary要素内の内容をクリックしてdetails要素の表示を開閉できるの便利。

HTML要素のリファレンス読書は今回で終わりです。 次回はいよいよHTML課題をやっていきます！

引き続きHTMLの学習です。

今日はHTML要素のリファレンスのテーブルデータ系要素に目を通していきました。

• table要素 テーブルをレイアウト目的で使うのであれば、role="presentation" という属性を使わなければいけない。 captionの付け方が沢山ある。caption、details、figure、figcaption等のタグとの組み合わせ。 <td headers="">とか使ったことない。 最善の選択肢は、テーブルのレイアウト方法を解説した説明文を書くのではなく、説明が必要とならないようなテーブルに調整すること。
• tr/td/th/thead/tbody/tfoot：閉じタグ省略可 これが一番びっくりした。thead/tbody/tfootのサンプルコード読んでいて、あれ…？閉じタグないけどいいの…？と不思議に思って調べたら、結構あるのですね、閉じタグ省略可な要素。レンダリングの速度にも貢献するぽいので目から鱗でした。 li/p//dt/ddも閉じタグ省略可らしいです。 http://victreal.com/Junk/htmlTag/ http://www.w3.org/TR/1999/REC-html401-19991224/index/elements.html
• thのscope属性の解釈が面白い。 アクセシビリティへの寄与を考慮するなら使った方良さそう。

今日は合間に仕事の修正入れてしまったので進まなかった…次回はフォーム系要素をやっつける予定です。

今回はインターン始めてから初の作業記事です。 FJORD, LLCさんのインターンでは、隔週ごとに学習週と作業週に分かれており、インターン開始の最初の週は強制的に学習週が振られます。 記念すべき最初の作業は、プログラマー・デザイナー共通で作業週最初の課題「怖話を一通り使って改善点と自分がやりたいこと（もしあれば出来ること）をブログに書く」です。

怖話とは、FJORD, LLCさんのキラーコンテンツであるスマホで読める怖い話投稿サイトです。iphoneアプリとAndroidアプリもあります。怖い話が得意な方は一度お試しください。夜眠れなくなります。怖い漫画もあるのでオススメです。

以下、iphoneとPCで怖話を使ってみて考えた改善案など。

改善案

• ログインはメールアドレス以外にtwitterとfacebookログインに対応した方が、「怖い（いいね！の怖話版です）」をつけたりコメントや投稿のハードルが下がってサイトの滞在時間が長くなるのでは。
• アプリ版のUIがweb版と差がないので簡素化してみてはどうか。スクロール無しでアイキャッチ画像・投稿・ランキング・特選の怖い話・新着の怖い話…くらいのカテゴリを表示できるようにして、他はメニューアイコンに忍ばせてみては。
• サウンドノベル調モードで怖い話を読む時、タップやクリックで進めていった後、少し戻りたい時に戻れないの辛い。

1・3は自分はプログラミングできないので貢献できませんが、2ならできるかもしれません。あと貢献できそうな作業って、怖い漫画描くくらいですかね…。