記事一覧

timeタグのpubdate属性の廃止について

2016-12-01 12:46

こんにちは。制作チームの野澤です。
先日、HTML5のコードのチェックを行う機会があったのですが、
そのページの公開日としてtimeタグのpubdate属性を使ってその日付を指定していたのですが、
現在その仕様は既に廃止されており、文法エラーになることに気づいたのでちょっとご紹介したいと思います。

例えば以下のようなコードをチェックするとエラーになります。

https://syncer.jp/html-reference/time によると

pubdate属性は、2011年11月に廃止されました。指定すると文法違反になります。

とのこと。

また、http://ascii.jp/elem/000/000/676/676208/ でも

本記事は、「W3C Working Draft 25 May 2011」の仕様をもとに説明していますが、「Editor’s Draft 7 March 2012」ではpubdate属性が削除されているほか、これまでは許されていなかった、“西暦のみ”“月日のみ”といった表記が認められるなど、多くの仕様が変更されています。

と紹介されており、pubdate属性の取扱いは変更になったようです。
W3Cの定義書もチェックしましたが、やはりpubdate属性は見当たりません。
代わりにschema.orgのmicrodataを使った書式がサンプルとして紹介されていました。

いくつかのサイトではまだ未だに「pubdate属性つけられますよ」と言っているところもあるので、きちんとコードのチェックをかけたり、W3Cのプライマリな仕様書を確認する必要がありますね。

laravel(v5.3)のインストール~初期設定

2016-11-16 20:27

こんにちは。開発担当の萩原です。
先日、「laravel」というフレームワークを使ってAPIのようなものを実装いたしました。
今回はその際のインストール~初期設定についてまとめたいと思います。

なお、困った時のマニュアルはこちら
公式マニュアル
日本語翻訳(laravel)

インストール

サーバ必要要件

laravelを動作させるためには下記の要件を満たしている必要があります。
– PHP 5.6.4以上
– OpenSSL PHP拡張
– PDO PHP拡張
– Mbstring PHP拡張
– Tokenizer PHP拡張
– XML PHP拡張

依存パッケージの管理に「Composer」を使用しているので、
Composerが使えるようになっている必要があります。
上記の条件を満たしておりましたらインストールを開始します。

laravelをインストール

.composer/vendor/binのパスを通してから、
以下のコマンドでComposerでLaravelのインストーラを
ダウンロード・インストールします。

インストーラのインストールができましたら、
以下のコマンドでlaravelをインストールします。
“inter-edu”の部分は任意の名前で結構です。

これでlaravelのインストールは完了です。

設定

ファイル・ディレクトリについて

  • .env:環境設定ファイル
  • app:モデル置き場
  • app/Http/Controllers:コントローラ置き場
  • app/Http/Middleware:ミドルウェア置き場
  • config:設定ファイル置き場
  • public:ドキュメントルート
  • resources/lang:翻訳ファイル置き場
  • resources/views:ビュー置き場
  • resources/views/layouts:レイアウト置き場
  • routes:ルーティング置き場
  • storage:laravelのログ置き場

よく使うのはこのあたりになるかと思います。
storageには、キャッシュドライバやセッションドライバを
fileに設定した際に必要なファイルも作られます。

ディレクトリ権限の設定

以下の2つのディレクトリの権限をwebサーバが書き込める権限に変更します。
– storage
– bootstrap/cache

.envの設定

まず、.env.exampleをコピーしてして.envにリネームします。
その後、
– APP_KEYを設定。公式マニュアルによると32文字が推奨です。
– DBの接続先の設定
– キャッシュドライバの設定 例)CACHE_DRIVER=apc
– セッションドライバの設定 例)SESSION_DRIVER=apc

セッションドライバーについて
array以外のドライバーであれば何でも良いと思われますが、
セッションを有効にしないとフォームのトークンやデータの受け渡し、
フラッシュデータなどが使えないので注意が必要です。

キャッシュとセッションについての詳細はこちら
https://laravel.com/docs/5.3/cache
https://laravel.com/docs/5.3/session

各種設定

configディレクトリに各設定ファイルが入っていて、
database.phpやsession.php、cache.phpなどがあります。

ローカライズの設定

configディレクトリのapp.phpで設定できます。
“timezone”や”locale”を設定します。
翻訳ファイルは resources/lang ディレクトリ配下に設置します。

例)バリデーションメッセージを日本語化する場合
app.phpの”locale”に”ja”と設定し、resources/langに”ja”というディレクトリを作ります。
そのディレクトリにvalidation.phpという翻訳ファイルを設置します。

翻訳ファイルについての詳細はこちら
https://laravel.com/docs/5.3/localization

これで基本的な設定は完了です。

ルーティング

ルーティングの話になると、laravelの設定からは
少し外れてしまうのですが紹介させていただきます。
ルーティングのファイルはroutesディレクトリに入っています。
webインターファイスのルーティング設定はweb.phpに記述します。
記述の方法はたくさんあるのですが、基本の形は

となります。

例)ユーザの新規登録画面の場合

こんな感じなるかと思います。

ルーティングについての詳細はこちら
https://laravel.com/docs/5.3/routing

以上となります。ご参考となりましたら幸いです。

SASS(scss)とLESSの違い

2016-09-30 20:09

こんにちは。デザイン担当の田中です。
今回、SASS(scss)とLESSの違いついて簡単に紹介をしたいと思います。

SASS・LESSとは

SASSとLESSはcssを生成するための技術です。
コンパイルしてcssを用意するという意味では、差はそんなにありません。
前回紹介しました SASS(scss)の入門 を見ていただくと全体像がわかるかと思います。

SASS(scss)とLESSの記述の違い

■ネスト(入れ子)
SASS(scss)とLESSの差はありません。

SASS(scss)

LESS

css

■変数
変数の定義の仕方が微妙に違います。SASS(scss)なら「$」、LESSなら「@」です。

SASS(scss)

LESS

css

■mixin
これはSASS(scss)とLESSで差があります。引数の定義は変数と同じで「$」「@」の差があります。LESSの方が簡単ですが、私はLESSだとclassと見分けがしづらいのでSASS(scss)のほうが好みです。

SASS(scss)

LESS

css

■インポート
SASS(scss)とLESSの差はありません。

SASS(scss)

LESS

最後に

いかがでしたでしょうか。
SASSがRubyベース、LESSがJavaScriptベースと、裏側に差があり機能で「できること」「できないこと」がありますが、今回ご紹介した内容ではほとんど差がありませんね。
SASSの方が機能が多く、ウェブ上の情報・書籍の量でも一歩リードしているようですが、LESSもcssにより近いという意味で導入をしやすいメリットがあります。
LESSも SASS(scss)の入門 で紹介いたしました「Prepros」でコンパイルできます。
一歩踏み出せない方は、LESSからはじめてみるのも良いのではないでしょうか。

ページスピードのチューニングその1:CSSとJSによるレンダリングブロックの仕組み

Googleのページスピードインサイトのキャプチャ

page speed insightを見るとCSSのレンダリングブロックのアラートが出ることがあります。特にスマートフォンでページをチェックしたときにはこのメッセージがよく表示されると思います。

Googleのレファレンスを見ると、ファーストビューに必要なものはhead内でインラインで記述し、それ以外のものはあとから読み込むようにしてくださいとのことです。

今回、かなりこの問題の解決に苦労したので、いろいろ調べたことをまとめてみたいと思います。

基本的にはGoogleのベスト・プラクティス集である”Web Fundamentals“のうち、
「クリティカルレンダリングパス」という章を参考に見ていきたいと思います。

  1. そもそもレンダリングブロックとは
  2. javascriptとcssの依存関係
  3. ファーストビューのレンダリングブロック

こんな内容でお送り致します。

>>続きを読む

EC2のGCC最適化

2016-09-23 19:43

こんにちは。エンジニアの齋藤です。今回は、前回メモした、

メモ:gccの最適化オプション。今後コンパイルする時にテスト。

についてちょっと書いてみようかと思います。
まずGCCですが、これはGnu Compiler Collection(Gnu C Compiler)の略です。
GNUというプロジェクトが作った、色々な言語のソースコードを、CPUが実行できるようにコンパイルしてくれるものです。
ソースからインストールする時のmakeコマンドで動いてるヤツです。

そして、このGCCの最適化オプションを使うとどうなるかですが、CPUに合わせてコンパイルするので、できあがったバイナリの実行速度が速くなります。

実際には、configureの前に、

というコマンドを実行しています。

この2つのコマンドですが、それぞれ
CFLAGS → Cコンパイラの引数
CXXFLAGS → C++コンパイラの引数

さらにそのオプションで、
-O2 → 最適化レベル。7段階ありますが、2が推奨のレベルです。
-march=native → micro architecture。CPUに合わせたものを指定します。nativeだと自動的にそのCPUに合わせたものにしてくれます。
-pipe → コンパイル時間を短縮してくれます。作成されるバイナリには特に影響ありません。
という感じです。
ここらへんはGCCの最適化 – Gentoo Wikiが詳しく解説してくれています。

問題は、CPUに合わせて最適化させるので、他のCPUが違うサーバにバイナリを持って行った時に動かなくなったりします。
Amazon EC2では、インスタンスタイプが違えばCPUも違うので、インスタンスを変更したりした時に動かなくなりそうな懸念があります。
なので少し調べてみました。

t1.micro Xeon E5-2670 v2 march=core-avx-i
t2.nano Xeon E5-2676 v3 march=core2
t2.micro Xeon E5-2676 v3 march=core-avx2
t2.small Xeon E5-2676 v3 march=core-avx2
t2.small (昔に作ったもの) Xeon E5-2670 v2 march=core-avx-i
t2.medium Xeon E5-2676 v3 march=core-avx2
m1.small Xeon E5-2651 v2 march=core-avx-i
m1.small (昔に作ったもの) Xeon E5-2650 0 march=corei7-avx
m3.medium Xeon E5-2670 v2 march=core-avx-i
m3.large Xeon E5-2670 v2 march=core-avx-i
m4.large Xeon E5-2676 v3 march=core-avx2
c4.large Xeon E5-2666 v3 march=core2

と、どれもバラバラな結果ですが、とりあえず最新世代はHaswellになっていました。
ただ、それでもmarchはnativeでcore-avx2にはならないようです。
一応、最新世代ならGCCコマンドで-march=core-avx2と指定した時でもエラーにはならなかったので、おそらく大丈夫だとは思います…多分…
もし試す方がいたら自己責任でお願いします…