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

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

Visual Studio Codeをかわいく変身させたい!

f:id:styleedge_tech:20191204163229j:plain
Photo by Bruno Nascimento on Unsplash
はじめまして!スタイル・エッジLABOでインターンをしてます、MJです。

LABOでインターンを始めてはや2か月、ずっと思ってることがありました。
それはVisual Studio Codeをもっとかわいくさせたい、、!」ということ。
みなさまの中にもこんな考えを持った人いらっしゃるのではないでしょうか。

  • 見た目がかわいくないとテンションが上がらない

  • 見た目から入るタイプだ

  • 「カワイイはつくれる」

今回はそんなかわいい信者のエンジニアのために、Visual Studio Codeかわいくカスタマイズさせる方法についてご紹介します!
Visual Studio Codeにはたくさんの配色テーマがあり、その中にもかわいいものはたくさんありますが、わたしは配色テーマをさらにカスタマイズして自分好みのものに変えていきます。

カスタマイズ前

f:id:styleedge_tech:20191212141756p:plain かっこいいけど、もっとかわいさもほしい・・!ということで、まずはかわいい配色テーマを探していきます。

配色テーマのインストール

まず左下の歯車マークから配色テーマを選択します。 f:id:styleedge_tech:20191204123007p:plain

f:id:styleedge_tech:20191204123502p:plain
その他の色のテーマをインストールを選択すると、Marketplaceが表示されるので、その中から自分好みの配色テーマをインストールします。(かなりたくさんあるので、選ぶのも楽しいです!)

わたしは今回"Electron Color Theme"にしました! f:id:styleedge_tech:20191212141642p:plain
カラフルでかわいくなりましたが、タブや文字、カーソルの色などをもう少し変えたいので、ユーザー設定(settings.jsonファイル)から配色テーマを直接編集していきます。

settings.jsonの編集

ファイル > 基本設定 >設定 と進みます。 f:id:styleedge_tech:20191204125056p:plain
ワークベンチの中に、settings.jsonで編集があります。 f:id:styleedge_tech:20191204125541p:plain
それを選択すると、編集画面が表示されるので、直接編集します!

{
      "workbench.colorCustomizations"{
            "設定項目":"値"
   }
}

このように、カラーの設定を変更したい場合は、"workbench.colorCustomizations"の中に書き込みます。(配色以外にも様々な設定を編集することができます)

カラーを設定できる要素の一覧は、リンク先から見ることができます。

Theme Color | Visual Studio Code Extension API

カスタマイズ後

{
  "workbench.colorCustomizations": {
   "editorCursor.foreground": "#eaf4fc" //エディタカーソルの前景色
        "tab.activeBackground": "#88b5d3" //アクティブなタブの背景色
        "tab.activeBorder": "#88b5d3" //アクティブなタブの下罫線
        "activityBar.background": "#8384f5" //アクティビティバーの背景色
        "statusBar.noFolderBackground": "#ffadff" //フォルダーが開かれていないときのステータスバーの背景色
        "statusBar.background": "#ffadff" //標準ステータスバーの背景色
        "statusBar.noFolderForeground": "#ffffff" //フォルダーが開かれていないときのステータスバーの前景色
        "statusBar.foreground": "#ffffff" //標準ステータスバーの前景色
     }
 "editor.tokenColorCustomizations": { //配色テーマの文字カラー設定
        "[Electron]": {
            "comments": "#626063" //コメント
            "strings": "#fdeff2" //文字列
            "functions": "#99ccff" //関数
            "variables": "#ffadd6" //変数
     }
}

設定を変更した後は以下のような見た目になりました。パステルカラーがかわいいです!! f:id:styleedge_tech:20191212141924p:plain
エディタがかわいいとコーディングも捗りそうです!ぜひお試しください。

最後に

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

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

VSCodeを育てよう

こんにちは!スタイル・エッジLABOのぱるです。

私はスタイル・エッジLABOでインターンをしております大学4年生です!

初めての記事作成で緊張していますが、どうか最後までお付き合いくださいorz

私はスタイル・エッジLABOでのインターンが開始して一カ月、
Udemyというオンライン講座を受講しながらHTML5CSS3の勉強をしていました!

全くのプログラミング初心者の私は、
「プログラミングってなんか黒い画面にカラフルな英語が表示されるカッコいいやつ」
というイメージしかもっていなかったため、黒くてカッコいいやつを操作できるのを楽しみにしていました!

f:id:styleedge_tech:20191121174629p:plain
Photo by Florian Olivo on Unsplash
↑黒くてカッコいいやつ


しかし...

動画で講師の方がプログラミングのツールとして紹介されたのは「メモ帳」ではないですか!

動揺を隠しきれない私...

ただ、続いて講師の方がおっしゃったのは、「メモ帳でもコードをかけますが、無料のエディタも豊富ですからどうせならエディタを使って書いてみるといいでしょう」とのこと....

エディタとは何!?というレベルだったのですが、先輩社員におススメのエディタを聞いて取り敢えず「エディタ」なるものをダウンロードしました。

エディタのダウンロードが完了し、さっそくエディタを開いた私が思ったことは、「あの黒くてカッコいいやつだ!」です。

勉強に取り掛かるのにはモチベーションが大事ですが、なんかカッコいいやつで勉強できるというだけで開始早々私のテンションは急上昇!

f:id:styleedge_tech:20191121174245p:plain
Photo by Peter Conlan on Unsplash

そんな感じで私のプログラミングの勉強が始まりました!

※私がダウンロードしたエディタは” Visual Studio Code ”です。
※私はMicrosoftの回し者ではございません。

拡張機能万歳!

ブログを書くのが初めてなもので、前置きが長くなりすみません....

それでは本題に入っていこうと思います!

私が勉強する中で感じたことは、エディタに拡張機能を追加していくとコードを書くのが非常に楽になるということです。 実際に勉強する際に使用したのは3種類の拡張機能ですが、せっかく拡張機能の尊さに味を占めたので、ブログを書くにあたっていくつか拡張機能を試してみました!

ということで今回は [VSCode拡張機能をまとめちゃおう!] というテーマで書いていこうと思います!


拡張機能紹介

まずは、私が勉強中に使用していたエディタのご紹介です!

1、Japanese Language Pack for Visual Studio Code f:id:styleedge_tech:20191119120940p:plain

  →VSCodeを日本語で使用するのにマストの拡張機能です!

   よほど英語に自信があるぜ!という方以外は入れたほうが無難でしょう。

   今回ご紹介する拡張機能の中でも、最もダウンロード数が多かったです。

2、htmltagwrap f:id:styleedge_tech:20191119121152p:plain

  →該当のコードをドラッグして" Alt+W "を入力するだけで自動でPタグで囲まれる拡張機能です!

   Pタグが表示されたのちにそのまま任意のタグを入力すると即書き換え可能ですのでタグを入力する

   手間を省くのにはぜひとも入れておきたいですね!

3、テキスト校正くん f:id:styleedge_tech:20191119121237p:plain

  →なんともかわいらしいネーミングの拡張機能ですね。

   読んで字のごとく、入力した文章を構成してくれる拡張機能です!

   htmlでは文章をたくさん書くと思いますが、長文を入力していると文章の見直しも大変ですよね....

   テキスト校正くんを入れておけば、波線の個所を治すだけでよいので非常に見直しが楽になります!!


他の拡張機能も試してみた!

HTMLとCSSの勉強をする中で拡張機能のすばらしさを知った私は、勉強が一通り落ち着いてから追加でいくつかの拡張機能を試してみました!

1、indent-rainbow

f:id:styleedge_tech:20191119161338p:plain

  →この拡張機能を入れるとエディタを見ていて楽しくなりますね!

   タグが多くなってくると、どのタグとどのタグがセットなのかわかりづらい...なんてこともあるかと

   思います。ただ、indent-rainbowがあれば視覚的に色でセットの括りがわかるのでそんなストレスとも

   おさらばできますね!

2、Bracket Pair Colorizer 2

f:id:styleedge_tech:20191119165212p:plain

  →{ } , ( ) , [ ] ,< > などあらゆる種類の括弧のペアを色ごとに分けて表示してくれます!

   初心者のミスとしてペアが組めていないということが多かったので非常に重宝します!

最後に

前置きと本題のバランスが悪くなってしまいましたが、最後までお付き合いくださり有難うございました!

超駆け出しシステムエンジニアの呟きとして読んでいただけたなら嬉しいです!

次にブログを書く際には成長を感じられるように、駆け出しシステムエンジニアとして頑張っていこうと思います!

f:id:styleedge_tech:20191121175224p:plain
Photo by Stage 7 Photography on Unsplash


スタイル・エッジLABOでは、一緒に働く仲間を募集しています

  もし興味を持っていただけましたら、ぜひ採用サイト↓も覗いてみてください!

recruit.styleedge-labo.co.jp

Laravelのカスタムバリデーションでもパラメータを渡したい!

f:id:styleedge_tech:20191007101412j:plain
フリー写真素材ぱくたそ

こんにちは!スタイル・エッジLABOのやっすんです。

Laravelでバリデーションを実装するとき、 「max:256」のように、呼び出したバリデーションの後ろにコロンでパラメータを渡すことがありますよね。
今日はLaravelのカスタムバリデーションでもこのようなパラメータを渡せるようにする方法をご紹介します。
なお、Laravelのバージョンは5.5、PHPのバージョンは7.1で実装しています。

続きを読む

【ISUCON9】に参加してみた!

こんにちは!
スタイル・エッジLABOのしんちゃんです。

今回、我々スタイル・エッジLABOメンバーは、2019/09/08に開催された
「いい感じにスピードアップコンテスト」、通称ISUCONに参加しました!

ISUCONって何??っていう人のために、、、

「ISUCON」...お題となるWebサービスを、決められたルールの中で
限界まで高速化を図る、LINE株式会社主催のチューニングバトル

そうです!
ISUCONとは、過去の実績など一切関係ない己の知識と経験だけ
勝負を行うガチンコバトルです。

スタイル・エッジLABOメンバーも自身の意地プライドにかけ、
休日にも関わらず参加してきました。

今回の記事では、大会参加の様子を伝えたいと思います。


* いきなり足切り!?序盤で半分以上脱落...?

10時開始ともに全チーム一斉にスタートしました。

が....

webサービスが渡されてこない...?

事前に運営より準備するよう言われていたインスタンスwebサービスが降りてきません。

なんとか我がチームインフラ担当のK氏による機転で、
別のインスタンスを作ることで、運営から、webサービスを受け取り、
スタートラインに立つことができました。

他のチームの反応を見ると、まだほとんどのチームがスタートできておらず、
おそらくこの「魔の足切りで多くのチームが脱落したのでは、、と感じています。

その時に本日の最高順位17位」を叩き出しました(^ ^)

f:id:styleedge_tech:20190909160736j:plain


* そう簡単には行きません... 

なんとかスタートラインに立てたので、皆それぞれの役割に分かれ、取り掛かりました。

序盤の役割としては大きく分けて、「環境構築隊」「コード隊」の二つです。

想定外だったのは、ローカル環境が上手く作れず、
ローカルでwebサービスを動かせなかったことです。

これにより、変更点を加えた場合、いきなりベンチマークを行わければいけません。
これのおかげで結構な手間と時間を食われました...


↓ レンジに行く時間を惜しみ、冷たい弁当を食べるメンバー

f:id:styleedge_tech:20190910085857j:plain


* 当日意識したところ

当日、意識したところは大きく分けて以下の三つです。

SQL文で削れるところはないか
② DBにindexを貼る
③ 画像に圧縮をかけて下ろせないか

③は業務で同じようなところがあったので、奮闘の結果なんとかできました。
①②に関しては、目に付くところは大方出来たのではないかと思います。


* 最終結果は...

何度か落ちてしまい、今年も失格かな、、という場面もありましたが、
なんとか最後まで奮闘でき、失格にはならず終えることができました。

また、台風が来ていたこともあり、16時解散だったため
早めの退散にはなりましたが、できることはやったと思います。

お待ちかねの結果はというと、、、

f:id:styleedge_tech:20190910093257p:plain

277組中132位です✨

後日、スコアが0ではない人の中で順位を見てみると、
下から数えた方が早かった です。。

しかし何にせよ、前回は「失格」だったので、大きな進歩です!w


* まとめ

今回我々は、PHPを選んでやりましたが、
結果を見ると、ほとんどの組みがGoを使っていました。

本戦出場チームにはPHPを使っていたチームも2組いましたので、
我々も努力次第では予選突破できるかもしれない、という夢はあったので、
来年は本戦出場を目指して頑張りたいです🔥


最後に

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

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

Laravel使ってみた!

f:id:styleedge_tech:20191129153549j:plain
Photo by Vincent Yee on Unsplash

初めに

こんにちはスタイルエッジ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では、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

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

Seleniumでフォームのテスト

f:id:styleedge_tech:20191129154106j:plain
Photo by Aaron Burden on Unsplash

こんにちは、スタイル・エッジ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インジェクションやメールヘッダインジェクションなど、 フォームに関連するセキュリティ対策だけでも様々ありますので、 気になった方はぜひ調べてみてください!

最後に

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

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