エンジニアの卵の成長日記

http://com.nicovideo.jp/community/co3560405

HEIFという画像フォーマットが今後主流になるらしい!?

今回もTwitterを見ていたら、HEIFがすごいぞ!ってつぶやきがあったので、調べてみた



HEIFとは?
High Efficiency Image File Formatの略
(エイチ・イー・アイ・エフ、ヒーフって呼ぶらしい)


MPEGによって開発された画像フォーマットの標準規格

MPEG
Moving Picture Experts Groupの略
ビデオとオーディオに対して符号を付与する基準の開発責任を負ったISO/IECのワーキンググループ

JPEGに変わるかもしれないものらしい


JPEGと比較しての利点

  • PEGのおよそ半分のサイズ
  • 解像度が高い
  • 画像の色は最大16ビットカラー(JPEGは8ビットカラー)
  • 一連の画像にすることができる(GIFの代わりになる可能性も)
  • 透明度サポート
  • いつでも編集を元に戻すことができる(画像を変更したり再保存することはない)

なぜ話題になった?
WWDC2017(Worldwide Developers Conference)のiOS11から画像の保存をJPEGからHEIFにする!
って言ったことで話題になったみたい

Appleの最新のiDevicesにはHVEC、つまりHEIFのためのハードウェアサポートが組み込まれている
だからシステムやバッテリーに負荷をかけずに画像を超高速でエンコードしてデコードできる




参考資料

www.cultofmac.com


「HEIF」ってなに?高画質で軽量化!iOS11から変わるiPhone写真の保存形式を調べてみた | さくっとふぉとらいふphotolog.aiko15.com


Moving Picture Experts Group - Wikipedia

floatもflexも古い?Grid Layout Moduleの時代が来るらしい

はじめに
大学3年生の時に、小学校の同窓会に行ったらWeb系の会社をやっている人間がいて、
数件の案件を手伝わせていただいたときがあった

その時にレイアウトの指導をしてもらった際、
自分はfloatを使っていた

『やっぱりfloat使うよね。時代はflexなんだよ。float使っているのはださいよ』
と言われ、flexを教えていただき自分はflexの魅力にやられ信者になった


それからサイトを見てflexで書かれたコードを笑い、flexを崇める日々が続いた
(おしゃれなサイトは大体flexを使ってる)


そんな僕がTwitterを見ていると、flexは古い。時代はGrid Layoutだ』みたいな記事を見たので
1時間ほど調べた情報を書いていこうと思う


利点
・聖杯レイアウト問題というのを解決できるらしい
(Web業界にいたことはないので、初めて聞いた)


聖杯レイアウト問題とは
List ApartにMatthew Levine氏がIn Search of the Holy Grailというコラムを発表したらしい
彼が発表したのは
ヘッダ、フッタ、メインコンテンツ、両側のサイドバーの4つのセクションで構成された3カラムレイアウト

  • 中央のコンテンツは可変、両側のサイドバーは固定の幅
  • マークアップではコンテンツは、2つのサイドバーより上に記述される
  • コンテンツとサイドバーはそれぞれの内容にかかわらず、同じ高さ
  • 最小限のマークアップしか必要にならないこと
  • コンテンツの量が少なかったとしても、フッターはページの下部に固定されること

下記の画像がわかりやすい?
http://coliss.com/wp-content/uploads-201602/2016040912-02.gif



・アイテム間の余白調整が手軽
・簡潔に書ける


対応ブラウザ

f:id:kurowasi2525:20170614014028p:plain


2011年頃?に生まれ技術らしい
だが、最近にモダンなブラウザが一気に採用し、
使っても大丈夫な感じになった
(これから流行っていくのかな?)

続きを読む

laravelで「次回から自動でログイン」ってどうやるん?CookieとSessionの違いって?

序章

今日のバイトは
「次回から自動でログイン」を実装してくれ
という内容だった


laravelにはAuth::attempt()というものがあるらしい
第一引数に連想配列でメールアドレスやパスワードを渡すことで認証をしてくれるらしい
そして、第二引数はtrue, falseの論理値を取る
trueを与えることでログイン維持(Remember me)機能を有効にすることができ、ユーザが自分でログアウトしない限り認証が持続するらしい


らしい...らしい...らしい...


そうです。
今回のシステムではこのメソッドは使われていませんでした。
僕はlaravelを勉強したわけでもなければ、プログラマー歴が長いわけではないので、
意図はわかりませんでした。
多分、環境の問題(laravelのバージョン・PHPなどが古い)とかセキュリティ上の問題などがあったんだと思います。




今回のシステム
PostgreSQLにはハッシュ化されたパスワードが入っている

ログイン画面からメールアドレスとパスワードが送られてくる

メールアドレスの情報からユーザの情報を引っ張ってくる

引っ張ってきた情報のハッシュ化されたパスワードとログイン画面から送られてきた文字列のパスワードを
Hash::check()で比較する

DBから引っ張ってきた情報からパスワード情報を破棄してSessionにいれる


考えたこと
Sessionの長さを変えられんか?
 →session.php内のlifetimeの値で変わる
 →VerifyCsrfToken@addCookieToResponseで登録してるみたい
 →でも僕がやりたことはこいつじゃ無理そう

 ※Sessionの有効期限はphp.ini gc_maxlifetimeで管理されているみたい


どうにかしてRemember me機能を使う
 →無理でした

cookieに情報を残す
 →先輩エンジニアさんもこれでいいのではとおっしゃってた


今回はcookieにid情報だけ残すことにしました

別の先輩エンジニアさんが、cookieにid情報以外に、
他の偽情報を入れることでどの情報が正しい情報かわからなくする方法がある
とおっしゃっていたので、適当に他の情報も作っておいた



CookieとSessionの違い
先輩エンジニアさんがいろいろ話しているときに、
CookieとSessionって何が違うんだっけと思ったので調べた
(大学1年の時に調べたのに忘れてた...)

Cookie
keyとvalueをブラウザに保存
Session
keyをブラウザ、valueをサーバに保存

参考資料の一部
www.1x1.jp
ハッシュ 5.1 Laravel
www.kaasan.info
tnamao.hatenablog.com
ohs30359.hatenablog.com

【アスペクト指向JavaScriptフレームワーク】Cerny.jsの英語ドキュメント翻訳

Cerny.jsを翻訳した
Qiitaにあげたのだが、最近ガイドライン系で問題になっていて、消されてもおかしくない内容なのでこちらでもあげることにした



qiita.com





概要
導入
Cerny.jsは大規模な開発チームのJavaScriptプロジェクトの開発を容易にすることを目的としてJavaScriptライブラリ
以下の解決を提供する目標を達成しようとする

  • メソッド呼び出しをインターセプションする
  • 関数呼び出しの引数と戻り値の型チェック
  • 依存関係の管理
  • ロギング
  • スキーマに対するオブジェクトの検証
  • プログラミングの規約
  • 辞書
  • JSONをテキストやHTML形式で表示
  • 簡単な設定
  • 良いドキュメント
続きを読む

WannaCryとかいうランサムウェアが話題らしい

このランサムウェアはIT速報の記事で知った
研究室のメンバーがランサムウェアの研究をしているので、少し読んだが調べることはしなかった
だが、今日TwitterではWannaCryのツイートが多く、研究室の先生のブログでも取り上げられていたので、調べてみることにした
その結果を書いていこうと思う

ランサムウェアってなんだ?
特徴として、身代金を要求してくる
『お前の大事な画像やファイルを暗号化した!直してほしければ金払え!』みたいな感じ

WannaCry
画面をロックし制御不能にし、今までの作業はすべて中断する(あるサイトに書いてあったが本当?)
基本的にOfficeやプログラム、データベース等マイクロソフト系のありとあらゆるファイルが暗号化され使用不能になる
暗号化されるファイル一覧については以下のサイトで記載されていました
d.hatena.ne.jp

5月12日から全世界的に被害が拡大しているみたいで、フィッシングメールを通じてPCに感染するらしい
Windows SMBの脆弱性を利用

  • CVE-CVE-2017-0144

Windows SMBのリモートでコードを実行される脆弱性


問題の経路を通じて、ご自身のイントラのサーバ上にファイルがダウンロードされ、それを実行することによりそれぞれの端末が暗号化
その際に脅迫文となるファイルが作成され金を要求してくる

  1. 脆弱性を利用して侵入
  2. サービスプロセスとして不正なファイル実行
  3. 実際のランサムウェアとして振る舞う不正なファイルを作成
  4. 脅迫状の表示
  5. ファイルの暗号化(WNCRYファイル)

誰がこれを仕掛けた?
Shadow Brokersと呼ばれるハッカー集団が今年4月に米国の国家安全保障局(NSA:National Security Agency)からハッキングツールや攻撃コードを盗んだらしい

IPAの会見
注意喚起をするために会見を開いた。3月15日に修正プログラムが配布され、WannaCryの亜種だと考えているらしい。
日本での被害事例はなし(トレンドマイクロの記事だと被害が出てると言ってた)

IPAによる対策方法

  • 不審なメールを開かない
  • 添付ファイルは開かない
  • 不審なアドレスにアクセスしない
  • 何かあれば即急にシステム管理者に相談
  • 事前にバックアップ
  • サポート終了後の古いWindowsについても修正プログラムがが配布されているから更新をしよう
  • ウイルス対策ソフトの更新
  • 感染したらIPAの情報相談安心窓口等に相談

【第二話】先生のありがたいお言葉

書こうと思った理由
先日ゼミで発表があり、1チームがあまり良いとは言えない発表だった
先週までの成果、今週の成果、来週までの目標のみで5分ほどだった
しかも、発表の一週間前に先生から『やったことのモチベーションをちゃんと書け』と言われたのだが、
それもなかった

初めて先生に怒っている姿を見た
そこで話してくださった内容が印象的だったので、残しておこうと思う


先生のお言葉
ルールを変えることは強制力を働かせるということ
これは最後の手段ということだ
世の中は効率が高いことが大好きである
効率が高いということはうまくいく方法を最初に取るということ
仕事が辛いと言っている人の半分くらいは自業自得
怒られないとやらない人だから、上司は面倒だけど怒っている
最初から全力を出す。そしてもっと頑張れと言われた時に、これ以上は出来ませんと言えばいい。
それを繰り返せば、上司はこの人は最初から全力を出す人だとわかってもらえて、怒らなくなる。
普通の人なら、怒るのが無駄だとわかるから
もう少し頑張れると人に思われることはよくない
だからまずい。一回目でできないのは



最後に
自分で取った議事録の内容をブログにしているので、少しニュアンスが違うかも
自分は結構好きな言葉でした

VMwareを使ってCentOS7でインターネット接続までの環境構築

今回の記事は、ちょっと前に大学の大きなサーバに仮想環境を構築したよって話


なぜ構築することになった?
背景として、僕が所属している研究室だけ大学のサーバに仮想環境を構築することが許されている
(先生がサーバ担当者だから僕たちのために許可をもらってくれたらしい)
だが、僕は一年生の時に研究室でCentOS6.5のしょぼいWebサーバを構築したので、勉強するだけならそれで十分だった

最近Googleカレンダーの内容をSlackにつぶやくシステムを作った
qiita.com


自分で作っといてなんだが、以外と便利
このシステムとwena wristの組み合わせはとても最高


話を戻すと、常時動かしている自作PC1号機には余計な仕事をさせたくなかったので、
このシステムは自作PC2号機(メイン)で動かしていた

このシステムのためだけにメイン機を常時起動は嫌だったので、
大学のサーバで動かしてもらうことを決意した



環境構築

まずはContOS7のインストール

f:id:kurowasi2525:20170428014028p:plain
f:id:kurowasi2525:20170428014043p:plain
f:id:kurowasi2525:20170428014052p:plain
f:id:kurowasi2525:20170428014059p:plain
f:id:kurowasi2525:20170428014103p:plain

今回はこんな感じ

一番驚いたのは2階にある大学のサーバが4階の研究室のPCに入っているISOファイルを使ってインストールできること
ほとんどの人が普通だろ!って思うんでしょうが、僕は不思議な気持ちになりました

f:id:kurowasi2525:20170428014108p:plain
f:id:kurowasi2525:20170428014112p:plain


インストール完了!

Proxy設定
/etc/yum.conf を修正

#Distroverpkegの1行下に追加
proxy=http://000.11.222.33:80

CentOS7からネットワークの設定方法が変わったみたい
CentOS7からの推奨ネットワークマネージャー TUIを使用

$ nmtui
Edit a connection 
 ↳ens192

IPv4CONFIGURATIONに変更
Addressを『000.111.222/24』に設定
 ※末尾のビット数は初期で32に設定されているため24へ変更
Gatewayを『000.111.22.333』に設定
DNS serversを『000.111.22.33』を追加
Require IPv4~~~~を有効にする
IPv6に変更
Automatically connectを有効化する

Automatically connectを有効にすることでNICが自動で有効になってくれる
NIC(Network Interface Card):ざっくり言うとLAN(俗に言うインターネット)に接続する際に
必要なカード(基盤のようなもの)


これで終了!
以下はシステムを動かすときに入れたものや、他の時にいれたやつを記載

MySQL関係

$ yum install -y http://dev.mysql.com/get/mysql-community-release-17-5.noarh.rpm
$ yum install -y mysql-community-server

PHP関係

$ yum install -y php

Apache関係

$ yum instal -y httpd
$ firewall-cmd --permanent --add-service=http
$ systemctl enable httpd

Git関係

$ yum install git
$ git config --global http.proxy http://000.11.222.33:80
$ git config --global https.proxy http://000.11.222.33:80
$ git config --global http.sslVerify false

NVM関係

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash
$ source ~/.bashrc


以上!
作成してから2週間くらいたったが、今のところ何の問題もなく動いてくれています