スタイル・エッジLABO技術ブログ

士業集客支援/コンサルティングのスタイル・エッジグループ スタイル・エッジLABOのエンジニアによるブログです。

Laravel使ってみた!

f:id:styleedge_tech:20190730083447j:plain

初めに

こんにちはスタイルエッジLABOのSです。
初めて元Sler(Laravel初心者)がLaravelを使ってみた感想などまとめます。
この記事はこれまでPHPでのシステム開発に触れる機会が少ないエンジニアでも
理解が深まったということでこれからPHPに触れていく方に少しでも役に立てば幸いです。

Laravelのディレクトリ構成
app・・・アプリケーション本体
config・・・諸々の設定(設定というより系統別の定数群など諸々)
database・・・migration,seederなどデータベースに関連するファイルを格納
public・・・ユーザーに公開するディレクトリ(css, javascriptなどを格納)
resources・・・主にビュー(画面のテンプレート)など格納する
routes・・・大雑把に言うと入力や選択されたURLを設定に基づいて該当のコントロールファイルなどに
      導くファイルが格納される

※その他、ディレクトリは多数は存在しますが割愛します。

サクッと認証フォームが作成できる!

Laravelでは

php artisan make:auth
php artisan migrate

を実行するだけでサクッと認証フォームが作成できます。
作成したフォームを表示した結果がこちら。
※実際にはphp artisan migrateを実行しなくてもフォームの表示だけならできます。 f:id:styleedge_tech:20190801090112p:plain

テンプレートエンジンがBlade

ちょっと調べてみるとtwig, volt, smarty, mustacheなど テンプレートエンジンは多々あって
比較したり使ったりしてみると面白いかと思います!
特筆すべきではないかもしれませんがディレクティブに対して@を付けるため
他のテンプレートエンジンと異なりディレクティブがわかりやすくお気に入りです!
例)

@if ($cnt > 0) ※ディレクティブ部分
    {{ $cnt }}件のデータがあります。
@else
    データがありません。
@endif

※ディレクティブ・・・コンパイラーに与える指示文。

クエリビルダーで大体のSQLが作成できる

クエリビルダーとはデータ取得のために発行するSQLを作成する必要がありますが、
それを簡単に組み立てる仕組みです。
慣れさえすれば比較的容易にSQLを作成できると思います。
例えば

$a = DB::table('A')
             ->whereIn('id', [1, 2, 3])
             ->get();


のように「A」テーブルよりカラム「id」が「1,2,3」と一致するデータの結果を取得することができます。
※getメソッドは、PHPのstdClassオブジェクトのインスタンスを結果として含む、
Illuminate\Support\Collectionで返却されます。

但しクエリビルダーで作成されるSQLについては 必ず実際に発行されるSQLを確認しましょう。
例えば

SELECT * FROM A WHERE id IN (1, 2, ・・・)

のようなデータが増えると実行エラーが発生するようなSQL
意図せず出来てしまう恐れもあります。
動いたからといって結果を確認せずに使用するのは控えましょう。
SQLの良し悪しはレスポンスに直結します。
つまりSQLが遅い⇒時間がかかる⇒使用者のストレスが溜まる⇒矛先が管理者へ
という悪い循環が出来てしまい誰も幸せになりません。
なので設計・製造時から必ず考慮しましょう!
※遅いSQLを組む必要があるというのはDBの構造がそもそも・・・
という可能性もあるので設計の時点で意識しておくことが大事です。

まとめ

今回はLaravelについて触れてみました。
覚えることは色々ありますが逆に覚えてしまえば非常にわかりやすい印象を持ちました。

世の中には色々とフレームワークが存在します。
それぞれ一長一短があり常にベストなフレームワークは存在しないと思います。
開発が始まった時の状況やニーズで選択できるものも変わってくると思います。
その時に取捨選択するための情報を持っていることが大切です。
なので情報に対する感度を高めておくことが改めて大切かなと思いました。
今後更にコア部分にも触れられることを期待・・・したいと思います!
※初心者でも先輩方に教わりながら今回学ぶことができよかったです。

最後に

スタイル・エッジ LABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジ 採用サイト

Seleniumでフォームのテスト

f:id:styleedge_tech:20190717202458j:plain こんにちは、スタイル・エッジLABOのTMです。
普段はPHPでのシステムの開発・保守やサイトの運用保守をしています。

ところで、お問い合わせフォームなどのフォームのテストって大変ですよね。
気が付いたらメールが届かなくなってるとか怖いですよね。 フォームのテストを今回は Selenium でやってみたいと思います。

続きを読む

フォーム作成時に気をつけること(セキュリティ編)

f:id:styleedge_tech:20190708200332p:plain

初めまして!スタイル・エッジ システム事業部のMです。 業務ではPHPでの実装をはじめ、システム設計やチームマネジメントなど色々と経験を積んできています。 また、セキュリティ顧問になるべくセキュアコーディング面での技術向上と後輩エンジニアへの指導も行なっています。

今回はみなさん一度は作成したことのあるフォーム画面について、 少し似ている二つの攻撃とその対策についてお話しできればと思います。

今回扱うテーマ

XSS
  • 概要 XSSはwebページ内で不正なスクリプト(処理)を実行される攻撃です。

例えば、この攻撃に対する脆弱性があるサイトの <script>alert('あなたの個人情報を取得しました。')</script> をURLに含むリンクをクリックすると上記メッセージがポップアップで表示されます。
この場合は利用者に実害はないですが、それでも利用者を不安がらせ、サイト運営者への信頼を損なうことになります。 接続情報を取得するようなスクリプトであれば、第三者による不正アクセスも可能になってしまうため特に注意が必要です。

  • 対策
    対策としては以下が挙げられます。
    • フォームの値を画面に出力する際はhtmlspecialchars()などで特殊文字をエンティティに変換する
      →画面上にはただの文字列として表示されるので、不正なスクリプトが実行されなくなります。
    • CookieにHttpOnly属性を付与する
      JavaScript経由でCookieの値を取得できないようにします。
CSRF
  • 概要 CSRFはwebページ内の特定の機能を意図せず実行させられる攻撃です。
    SNS掲示板に犯行予告の書き込みを行なってしまうなど、かつて大きな話題になりました。
    この攻撃に対する脆弱性があるサイトにログインした状態のまま「『〇〇で△△する』と投稿する」URLのリンクをクリックした場合、
    ログインしているユーザとしてその内容を投稿してしまいます。
    つまり、攻撃者は他人の正規アカウントを利用して投稿を行うことができるのです。
    身に覚えのないうちに犯罪予告をしてしまうなど、この攻撃により利用者が大きな被害を被る可能性があるので 運営者としては防いでおくべき攻撃の一つです。

  • 対策
    対策としては以下が挙げられます。

    • フォーム画面にトークンをセットし、正しい流れで送信が行われていることを確認する。
      →現在よく使われている手法です。弊社の開発標準になっているLaravelでもこの機能が実装されています。
    • CookieにSameSite属性の'Strict'または'Lax'を設定する
      →Strictでは他のドメインからのリクエストからCookieが自動で付与されないことで、ログインが必要なサイトであればログイン画面が必要になります。
      また、LaxでもPOSTメソッドの場合はCookieを送らないようにします。
まとめ

今回挙げた内容は数多くある攻撃・対策のほんの一部です。 この他にもSQLインジェクションやメールヘッダインジェクションなど、 フォームに関連するセキュリティ対策だけでも様々ありますので、 気になった方はぜひ調べてみてください!

最後に

スタイル・エッジ システム事業部では、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジ 採用サイト

新卒未経験でITエンジニアを目指す前に、知っておいたほうがいいこと

こんにちは〜

スタイル・エッジ システム事業部のしんちゃんです。
今年(2019年)の4月から新卒未経験でシステム事業部に入社しました。


今回は、もしあなたが、新卒未経験でエンジニアを目指そうと思っているなら、
これだけは知っておいたほうがいいよーということを2つほど、
私がこの2ヶ月半で感じたことを踏まえてお伝えしようと思います。

f:id:styleedge_tech:20190614154210j:plain


1. ITエンジニアと言っても色々種類がある

これは結構重要なんじゃないかなと思います。

私の友達にも何人かエンジニアになった人たちがいますが、このことを知らずに入り、
「全然コード書かないじゃんっ」 「思ってたことと全然違うっ」
などと言っている人が結構います。

実際私もこのことを知らず、ITエンジニア = "コードを書いてシステムやアプリを作る人"と思ってました。

★主なITエンジニアの種類★

  • フロントエンドエンジニア
    あなたが今見ているような、サイトの画面側を作るエンジニアです。
    言語としては主にJavaScriptHTML5/CSS3等が使用されます。


  • サーバーサイドエンジニア
    フロントエンドエンジニアとは違い、表には見えない部分を開発します。
    説明が難しいですが、画面を動かすだけではできない処理、裏側(サーバ側)の開発を行います。 言語としては、PHPPerlRubyPythonJava、C、C++など色々と使用されます。


  • インフラエンジニア
    縁の下の力持ちとして、上記のエンジニア達が開発したシステムが動くように、
    サーバーやネットワークなどの環境構築を行います。
    ちなみに場所によって違うとは思いますが、コードはほとんど書きません。


わかりずらく申し訳ないですが、こんなに種類があるんだーとわかって頂ければ本望です。

また、ITエンジニアの種類は、これでも一部でしかないし、人によって捉え方が様々なので、
興味のある方は調べてみて、自分がどんなエンジニアを目指したいのか考えてみてください。




2. プログラミング言語と言っても色々種類がある


IT業界を目指す人なら知ってる方が多いかと思いますが、 私はこの業界に入るまであまりわからなかったので、 簡単に解説しておきます。

先ほどの説明で、色々と言語がでできたと思いますが、
まず、プログラミング言語とは...から説明しときます。


プログラミング言語とは

  • 人が使う言葉のように「人 vs コンピューター」間の言葉です。
    そのため、日本人が外国人と話すときに英語を使うように
    伝えたいコンピュータによって言語も異なります。

以下に簡単な具体例を示します。

プログラミング言語の例

  • 人工知能機械学習などを作りたいなら、「Python」という言語

  • webアプリが作りたいなら、「PHP」という言語

  • iPhpneのアプリが作りたいなら、「Swift」という言語


というような感じです。
話したい(作りたい)ものによって使う言語が違うということだけわかって頂ければ大丈夫です。
(全部一緒の言語にしてくれればいいのに...)


自分がこの先どんなものを実現したいかが明確にある人は
調べてみた方がいいと思います。




今回はこんな所で終わろうと思います。


最後に スタイル・エッジ システム事業部では、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジ 採用サイト

技術書輪読会、はじめました

f:id:styleedge_tech:20190603132534j:plain
congerdesignによるPixabayからの画像

はじめまして!スタイル・エッジ システム事業部のやっすんです。
現在は主にLaravelでのアプリケーション開発に携わっています。

スタイル・エッジのシステム事業部には20代以下の若手が多いため、
週1で若手だけの技術書輪読会を行い、スキルアップと技術的なコミュニケーションの促進をめざしています。
今回は、上記を目的とした技術書輪読会の進め方について紹介します。

続きを読む

YAMAHAのRTXにL2TP/IPsecを実装する1

はじめに

こんにちは! スタイル・エッジ システム事業部のKYTです。

このブログを書いているメンバは開発担当がほとんどなのですが、 私はそのなかでは数少ないインフラ担当です。

これまでネットワークエンジニアとして働いていたこともあり、 弊社システムと社内LANの ネットワーク・サーバ周りを主戦場としております。

ただ小さな会社ですので、 ネットワーク機器やサーバを触るにとどまらず、 phpstormを使ったコード改修など、 一般的なインフラエンジニアの領域からはみ出た仕事もしております。

自分的にはそこがおもしろいので、楽しくやらせて頂いている今日この頃です。

f:id:styleedge_tech:20190512090235j:plain

今回のテーマについて

さて、インフラ担当として何をテーマに書こうかと思ったのですが、 ネットワークの領域には他の皆さんは手を出さないとみて、 YAMAHAのRTXにおけるL2TP/IPsecの設定、 について書くことにしました。

弊社は士業のコンサルティング業をやっておりまして、 各事務所さんのIT環境のお世話もさせて頂いております。

今回は社内と各事務所さんで設定した、 VPN接続の知見から記事を書きたいと思います。

実装config

まず実装したconfigからVPNに関連する部分をご覧ください。

pp select 1
    ip pp nat descriptor 1

pp select anonymous
    pp bind tunnel1
    pp auth request mschap-v2
    pp auth username ID パスワード
    ip pp remote address pool 192.168.10.200
    ip pp mtu 1258
    pp enable anonymous

tunnel select 1
    tunnel encapsulation l2tp
    ipsec tunnel 1
     ipsec sa policy 1 1 esp aes-cbc sha-hmac
     ipsec ike keepalive use 1 off
     ipsec ike local address 1 192.168.10.1
     ipsec ike nat-traversal 1 on
     ipsec ike pre-shared-key 1 text 事前共有鍵
     ipsec ike remote address 1 any
    l2tp tunnel disconnect time off
    l2tp keepalive use on 10 3
    l2tp keepalive log on
    l2tp syslog on
    ip tunnel tcp mss limit auto
    tunnel enable 1

nat descriptor type 1 masquerade
nat descriptor masquerade static 1 1 192.168.10.1 esp
nat descriptor masquerade static 1 2 192.168.10.1 udp 500
nat descriptor masquerade static 1 3 192.168.10.1 udp 4500
ipsec sa policy 1 1 esp 3des-cbc sha-hmac
ipsec transport 1 1 udp 1701

解説

さて、これを解説するにあたり、今回だけで全部を解説するとなると ボリュームが大きくなってしまうので 今回はpp select anonymousの設定箇所に絞ってお話しします。

申し訳ありませんが、全部の解説はこのブログを追いかけてください(苦笑)。

※なお、nat descriptorについては下部の設定値の解説でまとめて扱います。

それでは設定に即して解説します。

pp select anonymous

特定の端末ではなく、 どこからでもユーザ名とパスワードでアクセスできる形で VPNを設定するときに使うものになります。

pp bind tunnel1

この設定に紐づくトンネルインタフェースを設定するものです。 これによりanonymousで認証を受けたユーザは 後に出てくるtunnel1の箇所で設定された設定に基づいて VPN通信を行うことになります。

pp auth request mschap-v2

ユーザとパスワードを認証するときに使用するやり方を指定するもので、 ここではmschap-v2を指定しています。

pp auth username

ここでユーザ名とパスワードを設定しています。

ip pp remote address pool 192.168.10.200

VPNで接続した際にリモート先で通信を するときのipアドレスを記述しています。

つまりこの設定のRTXに接続すると 192.168.10.200の端末として社内ネットワークにつながるということになります。

ip pp mtu 1258

L2TP/IPsecVPNを使用する際に付与されるヘッダを考慮して あらかじめ送るときのデータ大きさを1258byteより大きくならないように しましょうという設定です。

pp enable anonymous

そのまま意味で、上記の機能を有効にする設定です。

おわりに

pp select anonymousの解説だけにとどめましたが、 やはり、それなりのボリュームにやっぱりなってしまいました。 ブログは継続していきますので、最後まで読んでいただけると幸いです。

最後に

スタイル・エッジ システム事業部では、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジ 採用サイト