1 アトミクラブホームページメンテナンスマニュアル 2016 年 1 月 28 日 ホームページ 担 当 : 梨 本 1. マニュアルの 目 的 アトミクラブホームページの 継 続 的 維 持 のため メンテナンスに 必 要 な 情 報 をドキュメントに 残 し 定 期 的 に 更 新 する 2. 問 合 わせ 先 レンタルサーバー(ロリホップライトプラン) 上 にホームページを 構 築 している 為 不 具 合 (HTML 記 述 ミスを 含 む) 発 生 時 の 問 合 わせ 先 は ユーザー 専 用 ページ(https://user.lolipop.jp/)にログイン 後 お 問 合 わせページにある お 問 合 わせ フォームにて 質 問 する (ログインパスワード=2280imota) ユーザー 専 用 ページログイン 画 面 お 問 い 合 わせフォーム
2 3. 使 用 言 語 HTML(HyperText_Markup_Language ) ウェブ 上 の 文 書 を 記 述 するためのマークアップ 言 語 タグ 以 外 は 基 本 日 本 語 を 使 用 文 字 化 けを 防 止 する 為 META タグでキャラクターセットを 宣 言 ( 全 ページ) <META http-equiv="content-type" content="text/html; charset=shift_jis"> CSS(Cascading Style Sheets カスケーディング スタイル シート)は 今 後 検 討 4. 使 用 ツール 1) HTML 編 集 ソフト TTTEDIT (フリーウエア) 入 手 先 URL http://www.vector.co.jp/download/file/win95/net/fh226216.html ホームページビルダーのような 専 用 ソフトは 使 用 しない (ソースレベルでの 自 由 な 編 集 がやりずらい 為 ) 2) ファイル 転 送 ソフト NextFTP (シェアウェア) 3 ヶ 月 無 料 試 用 可 入 手 先 URL http://www.toxsoft.com/nextftp/ 設 定 方 法 は 別 紙 1 参 照 3) EXCEL HTML 変 換 ツール(Web 版 ) サイト URL http://tech-unlimited.com/exceltable.html 個 人 別 年 間 ベスト 記 録 等 の 編 集 に 最 適 文 字 サイズ 左 寄 せ 右 寄 せ センター 設 定 は EXCEL での 前 準 備 が 必 要 4) 画 像 編 集 ソフト JTrim (フリーウエア) 入 手 先 URL http://www.forest.impress.co.jp/library/software/jtrim/ 写 真 のサイズ 変 更 を 行 っても 画 像 が 粗 くならない 5) PDF 変 換 ソフト CubePDF (フリーウエア) 入 手 先 URL http://www.forest.impress.co.jp/library/software/cubepdf/ 6) HTML クイックリファレンス(Web 版 ) 入 手 先 URL http://www.htmq.com/ 7) 契 約 レンタルサーバー ロリホップライトプラン 契 約 容 量 50GB アカウント 情 報 等 は 別 紙 2 参 照
3 5.ホームページの 構 成 1)トップページ ヘッダー インデックスメニュー( 画 面 左 側 ) 本 文 ( 画 面 右 側 ) フッターによって 構 成 される (HTML のフレーム 設 定 を 使 用 ) 本 文 は 集 合 写 真 Topics 訪 問 者 数 閲 覧 年 月 日 時 刻 主 要 リンク 先 によって 構 成 される アトミ 伝 言 板 事 務 局 掲 示 板 訪 問 者 数 閲 覧 年 月 日 時 刻 表 示 は 既 存 CGI(フリー)を 使 用 ヘッダー インテ ックス メニュー 合 宿 等 の 集 合 写 真 Topics 訪 問 者 数 閲 覧 年 月 日 時 刻 主 要 リンク 先 フ ッ タ ー 2) トップページ 以 外 のインデックスメニューのあるページ( 駅 伝 報 告 等 ) ヘッダー インデックスメニュー 本 文 フッターによって 構 成 される インデックスメニューは 各 ページ 共 通 ヘッダー インテ ックス メニュー 本 文 フ ッ タ ー
4 3) インデックスメニューの 無 いページ( 記 録 速 報 大 会 参 加 報 告 等 ほとんどのページの 構 成 ) ヘッダー 本 文 フッターによって 構 成 される ヘッダー 本 文 フ ッ タ ー 6.ファイルの 階 層 構 造 サーバー 直 下 (ルート) Top ページ インテ ックスメニューのあるページ 記 録 速 報 ( 表 2 参 照 ) image 画 像 ファイル(jpg,gif 等 ) atomi アトミクラブ 通 信 HTML ファイル 表 1 参 照 サーバー 直 下 (ルート) best 各 年 度 アトミベスト 記 録 HTML ファイル 個 人 ベスト 記 録 HTML ファイル&PDF ファイル fmr 各 年 度 ランナーズフルマラソンベスト 記 録 HTML ファイル&PDF ファイル photo イベント 名 イベント 毎 の 写 真 ファイル(jpg)ファイル イベント 毎 の HTML ファイル( 写 真 ファイルとリンク)
5 表 1 各 コンテンツのディクトリ 名 とファイル 一 覧 ディクトリ 名 ファイルの 内 容 4_jyukugo RUNNER's 四 字 熟 語 (HTML ファイル) 15kinen 15 周 年 記 念 寄 稿 集 (HTML ファイル) 20kinen 20 周 年 記 念 文 集 (HTML ファイル) 25kinen 25 周 年 記 念 寄 稿 集 リンク メッセージ 集 (HTML ファイル) 30kinen 25 周 年 記 念 パーティ 採 録 版 (HTML ファイル) ac 第 46 回 奥 武 蔵 駅 伝 のアーカイブ (HTML ファイル) aoto 青 森 - 東 京 駅 伝 出 場 選 手 活 躍 の 記 録 (HTML ファイル) atomi アトミクラブ 通 信 (HTML ファイル) atomi_pdf アトミクラブ 通 信 (PDF ファイル) ayumi 草 創 期 ~ 現 在 までの 各 年 度 毎 のできごと (HTML ファイル) ayumi_15 草 創 期 ~15 周 年 記 念 までの 各 年 度 毎 のできごと (HTML ファイル) ayumi_20 草 創 期 ~20 周 年 記 念 までの 各 年 度 毎 のできごと (HTML ファイル) best 各 年 度 フォルダ 下 :アトミベスト 記 録 (HTML ファイル) 各 年 度 フォルダ 下 : 個 人 ベスト 記 録 (HTML ファイル&PDF ファイル) ekiden 草 創 期 から 現 在 までの 駅 伝 報 告 (HTML ファイル) fmr 各 年 度 フォルダ 下 :ランナーズ 一 歳 刻 みフルマラソン 記 録 (HTML&PDF ファイル) gtt 織 田 F 利 用 者 の 会 主 催 合 同 TT 記 録 集 (HTML&PDF ファイル) hagaki アトミハガキ 通 信 (HTML ファイル) image 画 像 ファイル 集 (gif&jpg ファイル) info 各 イベントの 案 内 等 (HTML ファイル) kiji 雑 誌 等 に 掲 載 された 記 事 (HTML ファイル) kiko メンバーから 寄 せられた 寄 稿 集 (HTML ファイル) kin メンバーの 近 況 報 告 (HTML ファイル) kokusaim 国 際 マラソンの 報 告 (HTML ファイル) photo 各 イベントフォルダー 毎 : 写 真 ファイル(jpg) rec 大 会 記 録 会 出 場 者 の 記 録 報 告 集 ( 草 創 期 ~ 現 在 ) rerep メンバーの 大 会 出 場 報 告 (HTML ファイル) tcrep 草 創 期 ~ 現 在 までの 合 宿 報 告 (HTML ファイル) toku_kiko 特 別 寄 稿 (HTML ファイル) sonota その 他 コンテンツ( 織 田 F 使 用 ルール 等 ) (HTML ファイル)
6 表 2 サーバー 直 下 のファイル 一 覧 ファイル 名 ファイルの 内 容 index.html トップページ 4_jyukugo.html RUNNER's 四 字 熟 語 リンク annai.html アトミクラブのご 案 内 Anniversary.html 記 念 行 事 等 リンク atomi_ayumi.html アトミクラブのあゆみリンク best_rec.htm アトミベスト 記 録 個 人 ベスト 記 録 集 リンク bb_info.html アトミ 伝 言 板 入 り 口 (アトミ 伝 言 板 へようこそ) ekiden_rep.html 駅 伝 報 告 リンク fm_1ysr.html ランナーズ 一 歳 刻 みフルマラソン 記 録 リンク gtt.html 合 同 タイムトライアル 記 録 集 リンク kiko.htm 寄 稿 集 リンク kiroku.html 大 会 記 録 会 出 場 者 の 記 録 報 告 集 リンク link.html 走 友 会 陸 上 関 連 団 体 個 人 のサイトリンク 集 menu.html 練 習 日 程 HTML ファイル menu.pdf 練 習 日 程 PDF ファイル photo.html 写 真 集 リンク photo_rest.html 写 真 集 パスワード 入 力 画 面 sokuho.html 大 会 参 加 記 録 速 報 ( 開 催 日 順 ) sokuho_po.html 大 会 参 加 記 録 速 報 ( 伝 言 板 投 稿 順 ) tc_rep.htm 合 宿 報 告 リンク toku_kiko.html 特 別 寄 稿 リンク 表 3 使 用 CGI(Common Gateway Interface) 一 覧 CGI 名 機 能 出 典 元 fantasy.cgi アトミ 伝 言 板 ( 画 像 認 証 付 ) http://www.kent-eb.com/ joyful.cgi 事 務 局 掲 示 板 ( 返 信 アップロード 付 ) http://www.kent-eb.com/ rest7.cgi 事 務 局 掲 示 板 パスワード 認 証 http://cgi-design.net/ rest15.cgi 写 真 集 パスワード 認 証 http://cgi-design.net/ dream.cgi 訪 問 者 カウンター 表 示 年 月 日 表 示 http://www.kent-eb.com/ report.cgi アクセスレポート http://www.kent-eb.com/ CGI の 著 作 権 は 出 典 元 にあります
7 7.HTML コーディング 1) 編 集 上 のこだわり 1 ホームページ 全 体 で 統 一 感 を 出 す ヘッダー フッターの 配 置 画 像 ファイルの 配 置 と 使 い 方 バックグランドカラーの 統 一 等 2 見 易 いこと 見 る 人 にとってわずらわしいと 思 われる 動 く 画 像 はできる 限 り 使 用 しない 記 録 集 は 見 やすく( 記 録 速 報 等 のテーブル 先 頭 行 幅 の 統 一 センター 右 寄 せ 左 寄 せの 統 一 ) テーブルの 改 行 タグ /tr を 必 ず 入 れる テーブルのスペースには 空 白 要 素 を 必 ず 入 れる 意 図 しない 空 白 文 字 (スペース)は 入 れない ( 意 図 しない 箇 所 が 改 行 される 恐 れがある: 伝 言 板 からコピペする 場 合 は 要 注 意 ) 2) 階 層 間 のハイパーリンク 方 法 1 同 階 層 間 ( 同 ディレクトリ 間 ) index.html ページから menu.html へのリンク 例 <A href="menu.html"> 練 習 日 程 </A> 2 再 上 位 階 層 から 1 階 層 下 index.html ページから image ディクトリにある header01.gif 画 像 へのリンク 例 <IMG SRC="image/header01.gif"> index.html ページから ekiden ディレクトリにある bounen_2015.html ファイルへのリンク 例 <A HREF="ekiden/bounen_2015.html"> 忘 年 親 睦 駅 伝 大 会 2015 報 告 </A> 3 再 上 位 階 層 から 2 階 層 下 index.html ページから best/best_2014 ディレクトリの best_2014_10m.html ファイルへのリンク 例 <A href="best/2014/best_2014_10m.html">2014 年 度 アトミクラブベスト10: 男 子 </A> 41 階 層 下 から 再 上 位 階 層 ekiden ディレクトリの bounen_2015.html ファイルから TOP ページ(index.html)のリンク 例 <A href="../index.html">トップページ</a> 52 階 層 下 から 再 上 位 階 層 best/2014 ディレクトリの best_2014_10m.html ファイルから TOP ページ(index.html)へのリンク 例 <A href="../../index.html">トップページ</a> 61 階 層 下 から 2 階 層 下 photo ディレクトリの yeo2015.html ファイルから 忘 年 会 写 真 photo_1.jpg へのリンク 例 <IMG SRC="./yep_2015/photo_1.jpg">
8 3)コーディング 例 記 録 速 報 (sokuho.html)の 例 東 近 江 元 旦 健 康 マラソン 1 月 1 日 ( 金 祝 ) 大 会 名 SP 全 角 2 文 字 開 催 日 ( 曜 日 ) <P> 10km 男 子 種 目 ( 英 数 は 半 角 に 統 一 ) <TABLE width=350 border=1> テーブル 幅 枠 の 幅 <TR ALIGN="left" VALIGN="middle"> 横 方 向 : 右 寄 せ 縦 方 向 : 中 央 <TD width=100> </TD><TD ALIGN="center">36 分 35 秒 </TD><TD ALIGN="right">40 歳 以 上 4 位 </TD></TR> <TD> </TD><TD ALIGN="center">46 分 58 秒 </TD><TD> </TD></TR> </TABLE> <TD width=100> </TD> 名 前 の 列 幅 を 揃 える(<TD width=100>) 名 前 の 文 字 数 が 多 い 場 合 は width=110 <TD ALIGN="center">36 分 35 秒 </TD> 記 録 は 全 角 XX 時 間 XX 分 XX 秒 表 示 センター 定 義 <TD ALIGN="right">40 歳 以 上 4 位 </TD> 順 位 等 は 半 角 数 字 右 寄 せ </TR> 改 行 タグは 必 須 <TD> </TD></TR> 順 位 の 記 載 が 無 い 場 合 は 空 白 要 素 を 必 ず 入 れる 4) 効 率 的 なコーディング フルマラソン 1 歳 刻 みランキングのように EXCEL で 情 報 が 提 供 される 場 合 の 効 率 的 なコーディング 方 法 を 以 下 に 記 載 します センター 左 寄 せ 右 寄 せ センター 右 寄 せ EXCEL テーブル(1 部 抜 粋 ) 22 歳 17 2 時 間 29 分 09 秒 福 岡 22 歳 96 2 時 間 51 分 14 秒 東 京 1 EXCEL テーブルの 列 間 に 全 角 文 字 (あ い う 等 )を 挿 入 あ 22 歳 い う 17 え 2 時 間 29 分 09 秒 お 福 岡 あ 22 歳 い う 96 え 2 時 間 51 分 14 秒 お 東 京 2 全 角 文 字 とテーブルデータを& 関 数 で 結 合 後 形 式 ( 値 )を 指 定 して 貼 り 付 け 関 数 式 を 除 去 あ22 歳 い う17 え2 時 間 29 分 09 秒 お 福 岡 あ22 歳 い う96 え2 時 間 51 分 14 秒 お 東 京 予 め 数 値 は 文 字 列 に 変 換 00:00:00 は 00 時 間 00 分 00 秒 に 変 換 してから 関 数 結 合 すること 3EXCEL ファイルを 一 旦 保 存 する 4EXCEL HTML 変 換 ツール(http://tech-unlimited.com/exceltable.html)を 開 き 変 換 条 件 を 設 定 する 変 換 条 件 = 見 出 しは 不 要
9 5 変 換 したい EXCEL 表 をコピペで 貼 り 付 け 変 換 する ボタンをクリック 6 変 換 された HTML テキストをテキストエディタ(TTT Editor)に 貼 り 付 ける 変 換 された HTML 7TTT Editor の 置 換 機 能 を 使 用 して 左 寄 せ センター 右 寄 せを 設 定 する 置 換 した HTML
10 7 過 去 の 作 成 済 み HTML フィルを TTT Editor で 開 き 置 換 した 部 分 を 貼 り 付 け 必 要 な 箇 所 ( 年 度 等 ) を 修 正 し リネームして 保 存 する EXCEL の 事 前 準 備 作 業 は 少 し 手 間 がかかるが HTML 化 作 業 時 間 は 短 縮 される 置 換 文 字 列 は 予 めメモ 帳 に 記 載 しておき メモ 帳 からコピペすると 更 に 楽 に 作 業 できる 右 寄 せに 加 えフォントサイズを 指 定 して 置 換 する 場 合 は 下 記 参 照 1フォントサイズ(size=2)を 追 記 2</TD>に 加 え </font>)を 追 記
11 別 紙 1:Next FTP の 設 定 現 在 契 約 しているレンタルサーバー(ロリホップ)に 合 わせた Next FTP の 設 定 です パスワード=2280imota
12 別 紙 2: 契 約 レンタルサーバーアカウント 情 報 ユーザー 専 用 ページにログイン(P.1 参 照 )するとアカウント 情 報 を 閲 覧 できます