Help us understand the problem. What is going on with this article?

golangとjavascriptで日めくりカレンダー的なのを作った。

More than 1 year has passed since last update.

やりたかったこと
1・1か月ごとのカレンダーを表示
2・スケジュールの入力ができる(todoアプリ的な)
3・タスクがすべて完了したらマスの色を変える。
4・一か月前、一か月後まではボタンで切り替えて表示

ここまでを約1週間で行いたかった。

実際は?
現在の年月日、曜日を表示、時刻はデジタル時計のように、リアルタイムで更新するようにしました。
日めくりカレンダーのようにしました。

使用言語
golang,javascript,html,css

フォルダ構成

calender
      |_resources 
      |         |_index.html
      |         |
      |         |_styles.css
      |_hello.go


苦戦したところ
goで定義したもの(現在日時など)をどうやってHTMLに埋め込むか
CSSファイルを読み取ってくれなかった。
この二つが特に悩まされた。後はgoにこだわらないでほかの言語なら行けたんじゃね?と思う
(Goを必ず使わなくてはいけなかったのでそこのさじ加減が掴めませんでした)

どうやったか

hello.go
package main 


 import ( 
    "fmt" 
    "html/template" 
    "net/http" 
    "time" 
 ) 


 func main() { 
    fmt.Println("The Server runs with http://localhost:3000/") 
    http.Handle("/resources/", http.StripPrefix("/resources/", http.FileServer(http.Dir("resources/")))) 
    http.HandleFunc("/", Handler) 
    http.ListenAndServe(":3000", nil) 
 } 


 type Time struct { 
    Year    int 
    Month   string 
    Day1    int 
    Weekday string 
    Hour    int 
    Minute  int 
    Second  int 
 } 


 func Handler(w http.ResponseWriter, r *http.Request) { 


    t := Time{ 
        Year:    time.Now().Year(), 
        Month:   time.Now().Month().String(), 
        Day1:    time.Now().Day(), 
        Hour:    time.Now().Hour(), 
        Minute:  time.Now().Minute(), 
        Second:  time.Now().Second(), 
        Weekday: time.Now().Weekday().String(), 
    } 


    tmpl := template.Must(template.ParseFiles("./resources/index.html")) 
    tmpl.Execute(w, t) 


 } 


苦戦した箇所である、html、cssを読み込む処理は、


tmpl := template.Must(template.ParseFiles("./resources/index.html"))
tmpl.Execute(w, t)

読み込みたいファイルのパスを指定してあげて、
上で定義した変数を引数にして一緒に実行するようにしました。
これでhtml上にgoを埋め込むことに成功。

cssの読み込みは、

http.Handle("/resources/", http.StripPrefix("/resources/", http.FileServer(http.Dir("resources/"))))

この一文でresourcesフォルダ以下の静的ファイルを探してきてくれ、読み込みができるようになりました。

index.html
<!DOCTYPE html> 
 <html lang="en"> 
 <head> 
     <meta charset="UTF-8"> 
    <title>テスト</title> 
     <link rel="stylesheet" type="text/css" href="../resources/styles.css"> 
      <script> 
         function digitalClock(){ 
             // 現在日時を取得 
             var now = new Date(); 
             // 「時」を取得 
             var hour = now.getHours(); 
             // 「分」を取得 
             var minute = now.getMinutes(); 
             // 「秒」を取得 
             var second = now.getSeconds(); 

             // 0埋めで2桁表示にする 例)08:45:09 
             if(hour < 10) hour = "0" + hour; 
             if(minute < 10) minute = "0" + minute; 
             if(second < 10) second = "0" + second; 

            // 現在時刻を表示する 
             var elem = document.getElementById("clock"); 
             elem.innerHTML = hour + ":" + minute + ":" + second; 

             // 500ミリ秒後に再帰呼び出し 
             setTimeout(digitalClock, 500); 
         } 

         window.onload = function(){ 
             digitalClock(); 
         } 
     </script> 
 </head> 
 <body> 
 <div class="calenderbox"> 
    <pre><h1 class="month_now"><span>{{.Year }}</span></h1></pre> 
   <div id ="box1">  
    <div id="box2">  
         <p class="Date">{{.Month }}</p> 
      <p class="Date">{{.Day1 }}</p> 
     <p class="Date">{{.Weekday }}</p> 
    </div> 
   <div id="box3">  
        <p id="clock"></p> 
    </div> 
   </div> 
 </div> 
 </body> 

hello.goで処理したので、goの変数を以下のような形で受け取ることができます。

{{.変数名 }}

また、内で時刻を取得し、デジタル時計の見た目に設計したものをhtmlで返しています。

cssファイルは特に変わったことをしていないので割愛させて頂きます。

まとめ
触ったことがないものばかりだったのでここまでできたのも奇跡に等しいです。
ただ、まだ追加したい機能やより良い記述があるはずなのでしばらくこれを継続して取り組みます。
Goはとりあえずチュートリアルを完走します。
あとはjavascriptはじめてまともに使ってマスターしたらかなり便利だと感じました。
こちらもしっかり取り組んでいきます。

onizawajunpei4
PHP(+Laravel)の勉強をはじめました。 コマンドや勉強の記録をします。
techsurvivor
"TECH::Survivorはエンジニアキャリアのためのオンラインコミュニティです。 基本無料で案件紹介、副業・受託案件の紹介、オンラインメンター、ポートフォリオ作成支援などを行っています。"
http://techsurvivor.top/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした