20200217のHTMLに関する記事は5件です。

【Golang】テンプレートを簡単に使える外部ライブラリを見つけた (echo)

前提

  • 言語は、Golang。フレームワークは echo を使用しております。
  • templateをより簡単に使えるパッケージを紹介しています。

詳細

https://github.com/foolin/echo-template

Deprecated!!!
Please consider trying to migrate to Goview

https://github.com/foolin/goview
はじめ、前者の echo-template を発見しましたが、後者の goview に統合されたらしく、後者を使用しました。一応、 前者も使えます。
echo, Gin, Go-chi, go.rice 等にサポートしているらしいです。

インストール

go get github.com/foolin/echo-template

go get github.com/foolin/goview/supports/echoview-v4

diff

どれだけ簡略化されるのか。diff形式で。

diff(main.go)
 package main

 import (
-   "html/template"
-
    "github.com/labstack/echo"
+   "github.com/foolin/goview/supports/echoview"
    "net/http"
 )


-type Template struct {
-   templates *template.Template
-}
-
-func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
-   return t.templates.ExecuteTemplate(w, name, data)
-}
-
 func main() {
    // Echo instance
    e := echo.New()


-   t := &Template{
-       templates: template.Must(template.ParseGlob("views/*.html")),
-   }
-   e.Renderer = t
+   e.Renderer = echoview.Default()

    e.GET("/page", func(c echo.Context) error {
        return c.Render(http.StatusOK, "page.html", echo.Map{"title": "Page file title!!"})

diff元のソースコードはに貼っておくので、気になったら見てください。

結果

コードを省略できる。


備考

呼び出しについて

.html.tpl等、拡張子無しでRenderする場合は、/views/layouts/master.htmlが呼び出される。

ソースコード

通常

main.go
package main

import (
    "html/template"

    "github.com/labstack/echo"
    "net/http"
)

type Template struct {
    templates *template.Template
}

func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
    return t.templates.ExecuteTemplate(w, name, data)
}

func main() {
    // Echo instance
    e := echo.New()

    t := &Template{
        templates: template.Must(template.ParseGlob("views/*.html")),
    }
    e.Renderer = t

    e.GET("/page", func(c echo.Context) error {
        return c.Render(http.StatusOK, "page.html", echo.Map{"title": "Page file title!!"})
    })

    // Start server
    e.Logger.Fatal(e.Start(":9090"))
}

echoviewを用いた場合

main.go(echoview)
package main

import (
    "github.com/labstack/echo"
    "github.com/foolin/goview/supports/echoview"
    "net/http"
)

func main() {
    // Echo instance
    e := echo.New()

    e.Renderer = echoview.Default()

    e.GET("/page", func(c echo.Context) error {
        return c.Render(http.StatusOK, "page.html", echo.Map{"title": "Page file title!!"})
    })

    // Start server
    e.Logger.Fatal(e.Start(":9090"))
}

その他

マークダウンで ```diff ってやると、差分にちゃんと色が着くってことに驚いている。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Python】ウェブサイトの最終更新日を取得

大雑把でもいい。サイトの更新日を知りたい。

クロールしたサイトをサイト更新の日付順に並び替えたいのですが、サイトの更新日を取得する方法がわからなかったので調べました。

参照

pythonでWEB上に置いてあるファイルのタイムスタンプの取得を行いたい。投稿 2017/10/13 14:41
Last-Modified

HTTP の Last-Modified レスポンスヘッダーは、リソースが最後に変更されたとオリジンのサーバーが判断している日時を含みます。これは受信または保存されたリソースが、同じものであるかを判断する検証材料として使用されます。 ETag ヘッダーよりも精度は低く、その代替手段になります。

実装

get_lastmodified.py
import requests
res = requests.head('https://www.kantei.go.jp')
print(res.headers['Last-Modified'])

import datetime
html_timestamp = datetime.datetime.strptime(res.headers['Last-Modified'], "%a, %d %b %Y %H:%M:%S GMT")
print(html_timestamp)

% python get_lastmodified.py
Mon, 17 Feb 2020 08:27:02 GMT
2020-02-17 08:27:02

datetimeの標準フォーマットへの変換も行っています。

追記

この方法が動的サイトであまりに非力なので、もう少し考えてみました。

サイトの更新日を真面目に取得する

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Vue)簡単なローンシミュレーター

完成版

Vue勉強用


See the Pen
LYVNmJq
by sphenisc (@sphenisc)
on CodePen.



年齢と年収を入力すると借入可能額を計算するだけの簡単なコードです。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

画像の代わりにaltのテキストを表示する

スマホの時だけ画像非表示にしてくださいってたまに言われます

本当はスマホ用の画像を用意した方がいいのですが時間や予算がまったくなかったりするときのための方法

元の状態


See the Pen
wvaGyLX
by sphenisc (@sphenisc)
on CodePen.


完成版


See the Pen
ZEGWrgd
by sphenisc (@sphenisc)
on CodePen.



imgタグには疑似要素を付けられないのでimgの上のh4にafterを付けてJSで imgのalt → afterのdata-label へと中身を移してからCSSのafterのcontentとして表示しています。
alt属性はそもそも画像が表示できない場合の代替テキストを書くための場所なのでSEO的にも問題なし

JSなしでやりたい場合


See the Pen
jOPqzPd
by sphenisc (@sphenisc)
on CodePen.


  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

0から分かるCSSだけでフェードアウトしてみた

はじめに

お久しぶりです!今回は小ネタみたいなものですが、サイトに取り入れると少しかっこよくなる
「CSSによるフェードアウト」です!!
とても簡単なのでちらっと見ていってください(^^)/

この記事を読むとどうなるの?

→CSSでのフェードアウトの方法が分かる

どうやってやるの

①HTMLを作る(当たり前ですね)

何をするにしてもCSSを使うので、まずはHTMLを適当に作りましょうね。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--CSSの読み込みを忘れないようにしましょうね-->
    <link rel="stylesheet" href="stylesheet.css">
    <title>Document</title>
  </head>
  <body>
    <div class = fadeout>
        <img src = "画像やgifのURL">
    </div>
  </body>
</html>

②アニメーションを使おう

CSSでアニメーションを使うのであれば2つのことをする必要があります。
以下のコードを見ながら理解していきましょう!

stylesheet.css
.fadeout { 
    animation: fadeOut 2s; /*keyframesで命名したものを使う。2秒間で消える*/
    animation-fill-mode: both; /*0%の時と100%の時の状態を保つ*/
}

@keyframes fadeOut {
    0% {
        opacity: 1; /*初めに存在する*/
    }
    100% {
        opacity: 0; /*最後に消える*/
    }
}

.fadeoutの部分について

animation: fadeOut 2s;
ここがアニメーションの全てです!
読んでの通り、アニメーションとして二秒間でフェードアウトしますよっていうコードです。

animation-fill-mode: both;
これはフェードアウトする前とした後の状態をずっと継続させるというコードです。
これをかかないとフェードアウトしても消えた状態が維持されません

ここまでは大丈夫でしょうか?
これだけでできたら楽勝なのですが流石にそこまで単純ではありません。
fadeOutの部分が何を表すのかを書かなければなりません。

keyframes部分について

keyframesというものを使ってどのようなアニメーションをさせるのかを決めないといけないのです。
次のように書きます

@keyframes 任意の名前 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

今回はフェードアウトをするのでfadeOutという名前をつけたというだけです。
0%と100%というのは「最初」と「最後」を表しています。
opacityは「存在するかしないか」を表していて、1は存在、0は存在しないということです。

最後に

久しぶりに書いた記事ですがいかがだったでしょうか
皆さんもフェードアウトを使ってサイトをかっこよくしましょう!!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む