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

https://whowatch.tv/profile/w:kurowasi2525

AdminLTEってのを触ってみたよ

はじめに

今日はネイティブアプリを管理するためのWeb管理画面の機能追加がお仕事

まずは前回構築したLaradockを起動しよう!

$ docker-compose up -d apache2 postgres

エラーが出た

ERROR: Couldn't connect to Docker daemon. You might need to start Docker for Mac.


Docker for Macってインストールしたらパソコン起動時に勝手に起動するのかと思ってた
自動起動の設定があると思うけど、家に帰ってから調べることにしよう


Laradockの起動もできたし、URLにアクセスしたらちゃんと表示される
これで準備完了!
けど、今回のシステムの情報を全く知らないからドキュメントを読んでいこう


社員さん曰く、できるだけパーツ化してやって欲しいとのこと
見た目はAdminLTEを使っているらしい(初めて聞いた)
表が多いためうまくパーツ化できていないらしい
(現在はテーブルで実装)
テーブルはあまり好きじゃないからFlexかGrid Layoutを使いたいところ
(前勉強したけど、その後使ってないから使ってみたい笑)

kurowasi2525.hatenablog.com

続きを読む

MacでDocker構築・laradockを使ってみる

はじめに
3ヶ月ぶりにバイトに来た
(1ヶ月ぶりだと思ってたけど、社員さんに3ヶ月ぶりだねと言われて時の流れの早さに驚愕した)
(それだけ卒業研究に集中していた証拠だろう)
久しぶりすぎなので、まずは環境構築からしてほしいとのこと
今作っているものは、Dockerでやることになったみたいなので、Dockerの構築をまずはしてほしいみたいなので
ここに書いていこうと思う
(リモートの人が2日前にこのシステムを作り、社員さん1人が手順書を見て環境構築に成功させた。)
(成功した社員さんは今日出社しておらず、他の社員さんに情報共有はされておらず。)
(自分以外の数人も同時に環境構築に取り掛かる)

Docker構築手順

まずは下記のリンクにアクセスして、これの手順に 従っていくみたい
docs.docker.com


英語やんけー
英語は苦手なんですよね

Docker for MacMacで実行するために必要なものが全部入っているみたい
安定verと開発中のやつ(次期搭載機能)?があるみたい
Mac OS X El Capitan 10.11以上でMMU仮想のサポートが必要みたい(4GB以上のRAMが必要)

続きを読む

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の情報相談安心窓口等に相談