RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

オトナのフェス「Japan IT Week」に行ってきた

エンジニアライフ

id:radiocat です。楽楽精算の大阪開発チームのリーダーを担当しています。 11月8日、Japan IT Weekが開催された幕張メッセに行ってきました。

f:id:radiocat:20171108103300j:plain:w600

Japan IT Weekとは

Japan IT Weekは様々なIT技術を持った出展企業とソリューションを求めるビジネスマンが商談を交わす日本最大級のIT専門展です。BtoBサービスを展開する我々にとってはスーパー重要なイベントです。東京ビックサイト、幕張メッセ、インテックス大阪の3箇所で時期を分けて開催されています。今回は数々のバンドが伝説を作りサカナクションがアルクアラウンドした幕張メッセにスーツを身にまとったビジネスマンが集結し列を作りました。毎年多くの人が熱狂するこの場所をビジネスマンが埋め尽くす超ビックなオトナのフェスなのです。

Japan IT Week秋＠幕張メッセ

11/8〜10の3日間、幕張メッセで開催されました。今回私は各業界の動向をウォッチしたり弊社のサービスとの機能連携の可能性を考えてみたりなど、今後の製品開発の参考にすることを目的にそれぞれのブースを回ってきました。会場は10種類の展示区画に分かれています。

http://www.japan-it.jp/seminar/www.japan-it.jp

f:id:radiocat:20171108105305j:plain:w600

中でもビックデータ、IoT/M2M、AI・業務自動化は近年とても注目されている分野ということもあり、多くの人で溢れかえっていました。それぞれ独立した分野というよりも、センサーを活用してビックデータを集め、AIを活用して業務を分析、改善するような、それぞれの分野を融合させた製品が多数出展されていました。まだまだ発展途上の分野でもあり、今後も注目され続けそうな熱気を感じることができました。

f:id:radiocat:20171108171032j:plain:w600

通販ソリューション展は弊社製品のメールディーラー／チャットディーラー、配配メール、クルメルが出展していました。そしてクラウドコンピューティングEXPOには私も開発に携わっている楽楽精算と働くDBが出展していました。どちらも大変盛況で主に営業チームのメンバーが休む間もなく対応していました。一言ぐらい激励を…と思い近づこうとしたものの多忙そうで入る隙間もなく、社員なのにコンパニオンさんに勧誘されそうになってこれはまずいと思い立ち去りました。。

f:id:radiocat:20171108170928j:plain:w600

自分が開発に関わっている製品が多くの人達に支えられて、さらに多くのユーザーに届けられようとしているその瞬間を見られることはとても貴重なことであり良い体験になりました。

f:id:radiocat:20171108135342j:plain:w600

総務・人事・経理ワールド＠インテックス大阪

幕張メッセとの関連展示会として11/15〜17に大阪でも総務・人事・経理ワールドという展示会が開催されました。こちらは私も関係者の1人として楽楽精算の出展のお手伝いをしてきました。

f:id:radiocat:20171115114321j:plain:w600

来訪頂いた人にコンパニオンさんが簡単な説明を行い、興味をもって頂いた場合はスタッフがデモをしました。僭越ながら私もスタッフの1人としてデモしました。中小企業の経理部門が抱えている課題は会社によって様々なので、こうして少しだけデモのお手伝いをするだけでも様々なご意見が聞けてとても参考になります。

f:id:radiocat:20171115173952j:plain:w600

ちなみに、私が開発に関わった機能の1つに ICリーダーアプリ がありますが、コンパニオンさんが手に持っているタブレット端末ではこのアプリを使った説明をされていました。自分が開発に関わったアプリをお姉さまたちが手にとってコンパニオン活動をされているのを見るだけでも、慣れないスタッフ作業の疲れが吹き飛ぶほど価値ある経験でした。

まとめ

以上のように来訪者側とスタッフ側の両方を体験して私のこの秋のフェスシーズンは幕を閉じました。しかし年明けにはまたインテックス大阪で、そして春には東京ビックサイトで次の展示会が予定されているようです。ビジネスマンの活動は既に次に向けて動き出しているのです。

おわりに

なお、ラクスでは一緒に働く社員やパートナー企業の方を募集しています。このような経験を一緒に堪能してみたいと感じられたかたがいましたらぜひお声がけください。Web技術だけでなくiOSやAndroidといったモバイル技術やAIなどの先進的な技術を持ったエンジニアのかたも大歓迎です。

株式会社ラクス｜採用情報

要注意！新人エンジニアが発生させた2大脆弱性

セキュリティ

はじめに

記事をご覧のみなさん、はじめまして。新卒1年目エンジニアのkasuke18と申します。ブラウザは圧倒的にChrome派です。

今回の記事では私が作ってしまった2大脆弱性のXSSとSQLインジェクションについて、ソース例を踏まえて原因を追及します。なお、ソースの言語についてはPHPを利用しています。

この記事が初めてのブログ投稿ですので、「この書き方はヘンだな」と感じるときがあると思いますが、そこは温かい目で見守ってくださると幸いです。。

もくじ

この記事の想定する読者

新人エンジニアの方々

「2大脆弱性は知ってるけど、具体的にダメな実装例が実感できない」という方が読まれた際に、理解の手助けとなれば幸いです。

つきましては「XSSとは」「SQLインジェクションとは」ということは今回はさらっと流します。それらをお探しの方は他のサイトをご覧ください。IPAのサイトは国の機関なので信頼できると思われます。

「こんなパターンで脆弱性が発生するのか」や「ここの実装するときは気を付けないと！」などと感じていただくのが目的です。とはいっても実際のソースは大人の事情で載せられないので、実際のソースとは少しズレてしまいますが、そこはご容赦ください。。

XSS

XSSとは

いきなりですが、新人エンジニアの私から見てもわかりやすくまとまっていると感じた記事があるので引用します。「XSSとは何か」ということをお探しの方はこちらをご確認ください。

XSS(Cross Site Scripting)は、あるWebページにアクセスした標的のブラウザ上で、攻撃者が任意のコードを実行し得るバグ、あるいはそれを用いた攻撃手法のこと

XSSが発生したソース例

XSSが発生した原因などは次で説明するとして、まずはXSSが発生してしまったソース例を示します。

<!DOCTYPE>
<html>
  <head>
  </head>
  <body>
    <form action="" method="post">
      <!-- ↓ここでXSSが発生 -->
      <input name="hoge" type="hidden" value="<?php echo $_POST['hoge']; ?>">
    </form>
  </body>
</html>

この時実現したかったことは、フォームから入力値を受け取り、その入力値をパラメータにセットすることです。

なぜXSSが発生したのか

ソース例を見ていただければわかるかと思いますが、直接の原因は単純にエスケープが漏れていたことです。言い方は悪いですが半ば思考停止気味に「とりあえずエスケープしておこう」で防ぐことはできたミスです。

ではなぜエスケープが漏れてしまったのかと言い訳をしますと、単純に注意不足でエスケープをしなかったことに加えて、「入力値検証をしっかりと行っているから大丈夫」という無意識のうちに安心感を持っていたことです。

むしろ今回の件では見事にその意識の甘さが脆弱性を生み出しました。どういうことかと申しますと、具体的には以下の流れで発生していました。

  1. Chromeのdeveloperツールでパラメータを変更しスクリプトを仕込み、確定する
  2. サーバは入力値検証を行い、エラーと入力値を返す
  3. 戻った画面では受け取った入力値をセットする
  4. XSSが発生!!

今回XSSを発生させてしまったのは<input>のtype="hidden"パラメータでした。これは通常の画面操作からは直接変更できませんが、developerツールではできてしまいます。

それでは好き放題に変更された入力値を受け入れてしまうので、普通は入力値検証を行い、決められた値以外は許可しないようにします。

また、ユーザの使いやすさを考えると、エラー時に戻った画面ですでに入力されていた内容をセットしておくことも必要です。（入力内容を1か所間違えただけで全部やり直しというのはあまりに不親切ですので。）

今回の件でもそれに乗っ取り入力値検証を行い、数値以外は許可しないようにしていました。また、エラー時に入力値をセットするということもしていました。XSSを発生させる原因となった処理はこの「エラー時に入力値をセットする」という処理で、この入力値を出力する際にエスケープしなかったためにXSSが発生しました。

実施した対処

今回の件ではエスケープが漏れていたことが原因なので、エスケープを実施して対処しました。PHPではhtmlspecialchars()という関数を利用することでエスケープできます。

以下が修正後のソース例となります。

<!DOCTYPE>
<html>
  <head>
  </head>
  <body>
    <form action="" method="post">
      <!-- ↓ htmlspecialchars() を使用 -->
      <input name="hoge" type="hidden" value="<?php echo htmlspecialchars($_POST['hoge']); ?>">
    </form>
  </body>
</html>

この件を通して感じたこと

このXSS脆弱性は被害という意味ではほぼ問題ないと考えています。その理由は、

  1. 入力値検証ではじかれるため、サーバがスクリプトを許容していない

  2. 1を考慮すると、スクリプトが実行されるのはスクリプトを埋め込もうとした攻撃者のみである

以上の2点から被害はほぼないと考えました。

しかし、エスケープが漏れてしまっていたことは問題なので、今後は忘れないように十分に注意します。

SQLインジェクション

SQLインジェクションとは

XSS同様にSQLインジェクションも詳しい説明は省略させていただきます。詳しくはIPAの資料をご覧ください。

SQLインジェクションが発生したソース例

SQLインジェクションが発生した原因などは次で説明するとして、まずはSQLインジェクションが発生してしまったソース例を示します。

<?php
$id = $_POST['id'];
$status = $_POST['status'];
$conditions = '';
$isFirst = true;
if($id !== null){
  if($isFirst){ 
    $conditions .= ' WHERE ';
    $isFirst = false;
  } else { 
    $conditions .= ' AND ';
  }
  $conditions .= 'id = :id';
}
if($status !== null){
  if ($isFirst) { 
    $conditions .= ' WHERE ';
    $isFirst = false;
  } else { 
    $conditions .= ' AND ';
  }
  // ここでSQLインジェクションが発生
  $conditions .= 'status = ' . $status;
} 
$sql = 'SELECT is, name, status FROM table'. $conditions;
$sth = $dbh->prepare($sql);
$sth->bindValue(':id', $id);
$sth->execute();
?>

この時実現したかったことは、フォームから入力値を受け取り、その入力値によりDB検索を行うことです。また、フォームで入力されるパラメータは毎回すべて入力されるわけではないので、SQLのWHERE句は動的に組み立てる必要があります。

なぜSQLインジェクションが発生したのか

上記のソース例を見ていただければ一目でわかりますが、パラメータidは正しくプリペアードステートメントが使用されていますが、パラメータstatusは単なる文字列結合となってしまっています。このことがSQLインジェクションを発生させていました。

また間接的な原因として、パラメータstatusについての入力値検証が全く行われていなかったことがあります。ただの言い訳でしかありませんが、入力値検証を行わなかった理由はパラメータstatusの入力方法がプルダウンメニューであり、「プルダウンならプログラムが用意した値以外は送られてこない」という誤った認識をもってしまっていたからです。すでに上記XSSの項でも述べていますが、Chromeなどのdeveloperツールを利用すれば簡単に値を変更できることを失念していました。

実施した対処

理想論でいえば、本来は保険的な対策でしかない入力値検証だけで対処するのではなく、適切にプリペアードステートメントを利用することが必要です。しかし今回の件では諸事情により根本的な原因であるSQLの組み立て部分を変更することはできませんでした。よって入力値検証で数値以外は許容しないようにして対処しました。

XSSと同様、修正後のソース例を書こうと考えましたが、大人の事情で書くことができません。 代わりに、理想的な対処法であるプリペアードステートメントを適切に利用して対処したソース例を以下に示しますので、ご容赦ください。

<?php
$id = $_POST['id'];
$status = $_POST['status'];
$conditions = '';
$isFirst = true;
if($id !== null){
  if($isFirst){ 
    $conditions .= ' WHERE ';
    $isFirst = false;
  } else { 
    $conditions .= ' AND ';
  }
  $conditions .= 'id = :id';
}
if($status !== null){
  if ($isFirst) { 
    $conditions .= ' WHERE ';
    $isFirst = false;
  } else { 
    $conditions .= ' AND ';
  }
  // プレースホルダを使用
  $conditions .= 'status = :status';
} 
$sql = 'SELECT is, name, status FROM table'. $conditions;
$sth = $dbh->prepare($sql);
$sth->bindValue(':id', $id);
// 値をパラメータにバインドする
$sth->bindValue(':status', $status);
$sth->execute();
?>

この件を通して感じたこと

今回の件では「プルダウンなら入力値検証を行わくてもよい」という完全に誤った認識が露呈しました。プルダウンだけではなく、XSSの項でも挙げている<input>のtype="hidden"パラメータも同様で、「通常の画面操作から直接変更できないパラメータこそ入力値検証が必要」と感じました。

おわりに

以上が、私が実装してしまった2大脆弱性です。この記事の目的の通り、「こんなパターンで脆弱性が発生するのか」と把握していただけたでしょうか。実際のソースが載せられないため、正直よくあるソース例になってしまった感が否めません。。

ちなみにと言っては何ですが、今回ご紹介した脆弱性はどちらも単体テストで発見・修正しているので、大事には至っておりません。

最後までお読みいただきありがとうございました。

参考文献

◆TECH PLAY
techplay.jp

◆connpass
rakus.connpass.com

失敗しない Laravel 導入方法

PHP

はじめに

はじめまして、ラクス新卒1年目のMasaKuと申します。

PHPの勉強を開始した当初は「とにかく動かせること」「思い通りに動くこと」だけで満足していました。
しかし、勉強を進めていくうちに「もっと綺麗にできないものか」と思うようになり、フレームワークの勉強を開始しました。

フレームワークは、使い方を覚えるまでは時間がかかるものですが、要領が分かってくると、たった数行書くだけでいろんな機能を実現してくれるため、Webアプリ開発を強力にサポートしてくれます。

LaravelではComposerというシステムを利用することで簡単に導入することができるため、これからフレームワークを勉強しようとしている方にもおすすめのフレームワークであると考えます。

本記事は、生のPHPは書いたことがあるけれど、フレームワークは使ったことがない、という方に対して、導入の一歩をお手伝いできるよおうな記事になれれば幸いです。
なお、以下はWindowsで導入する際の手順となります。
macOSをお使いの方は、同じように進められない可能性がありますのでご了承ください。

PHPフレームワークとは

フレームワークとは、「開発で多様される様々な機能や仕組みを持ったソフトウェア」です。
Webアプリ制作で最低限必要となる機能（ログイン画面など）は大抵のアプリである程度共通化しています。
そのため、そういったお決まりの機能の開発はフレームワークに任せてしまおうといった思想のもと生まれました。
PHPフレームワークで有名なものは以下の通りです。

書店に行くと上記のいずれかの参考書を目にしたことがあるのではないでしょうか。
特にCakePHPの本はどの書店に行っても置いているという印象で、日本で最も人気のPHPフレームワークなのではないでしょうか。

Laravelとは

私が大人気のCakePHPを差し置いて、Laravelの勉強をしようと思った理由は以下の通りです。

  • 低い学習コスト
  • 楽に導入できる
  • GitHubで人気急上昇中

フレームワーク導入でつまづいてしまうと、一気にやる気を失ってしまうと感じたため、スムーズに開発できる段階に移行できるものがいいなと感じました。
また、現在GitHubで注目されているというのもポイントでした。
以下はGitHub上でのスターなどの比較です。

f:id:MasaKu:20171112005637p:plain
GitHubでの注目度比較 (2017/11/11 時点)

フレームワーク開発に携わる人が多いということは、これからも進化し続ける可能性があるということです。
また、そういった風潮を受けてか、書店では出版日が比較的若い本が販売されていたことも魅力の一つだと思いました。

Laravelのインストール

さて、前置きが長くなりましたが、さっそくLaravelの導入です。
今回は、Laravelの画面が表示できるところまでを解説させていただきます。

準備するもの

Laravelを導入に必要なものは以下の通りです。

  • XAMPP
  • Composer

「あれ、Laravelの導入なのにLaravelは用意しなくてもいいの？」と感じる方もいらっしゃるかもしれません。
Laravelでは、Composerというプログラムを利用することで、Laravelを利用するために必要なライブラリなどを自動で入手することができます。
コマンド入力が必要となりますが、そこさえ間違えなければ、導入で失敗することはありません。

XAMPPのインストール

まずはXAMPPのインストールです。
XAMPPとはPHPの実行環境を簡単に構築できるApacheディストリビューションのことです。
以下のページからXAMPPをダウンロードしてください。
Composerを利用するためにXAMPPのPHPを利用したいだけなので、php.iniなどの設定ファイルは触らずに、インストールだけ完了させておいてください。

www.apachefriends.org

Composerのインストール

次はComposerのインストールです。
Composerは上述の通り、PHPフレームワークを導入する上で必要となるライブラリなどを自動で入手してくれるプログラムです。
これを利用することで、簡単にLaravelを導入ることができます。

では、Composerのインストーラーを以下のページからダウンロードしてください。
getComposer.org

インストーラーをダウンロードするリンクがわかりにくいと感じたので、画像を掲載しておきます。
よければ参考にしてください。

ダウンロード手順

f:id:MasaKu:20171112121035p:plain
Download をクリック
f:id:MasaKu:20171112121040p:plain
Composer-Setup.exe をクリック

Composerのインストーラーがダウンロードできたら、次はインストールです。

インストール手順

f:id:MasaKu:20171112121958p:plain
Nextをクリック

f:id:MasaKu:20171112122002p:plain
XAMPPフォルダ内のPHPが選択されていることを確認しNextをクリック

f:id:MasaKu:20171112122006p:plain
プロキシサーバーを設定する画面ですが、今回は何も選択せずにNextをクリック

f:id:MasaKu:20171112122011p:plain
Installをクリック

f:id:MasaKu:20171112122011p:plain
Nextをクリック

f:id:MasaKu:20171112125423p:plain
Finishをクリック

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

Laravelのインストール

いよいよLaravelのインストールです。
Laravelのインストールでは、先ほどインストールしたComposerを利用します。
Composerを利用するには、コマンドプロンプトを利用します。

「Windodsキー」 + 「R」のショートカットで「ファイル名を指定して実行」を表示し、「cmd」と入力することでコマンドプロンプトを起動できます。

コマンドプロンプトが起動できたら、以下のコマンドを実行してLaravelのインストーラーをダウンロードします。

Composer global require "laravel/installer=~1.1"

ダウンロードには少々時間がかかりますがUpdating dependencies(including require-dev)までが表示されていれば、コマンドは成功していますので、気長に待っていてください。

しばらくすると、ダウンロードが開始してGenerating autoload filesが表示されればLaravelのダウンロードは成功です。

f:id:MasaKu:20171112153327p:plain
Laravelのダウンロードに成功した際の表示

これで一通りは完了なのですが、最後にLaravelを利用するため環境変数PATHを設定する作業があります。

コントロールパネル→システムとセキュリティ→システム→システムの詳細設定の順で開き、システムのプロパティを開きます。

f:id:MasaKu:20171112131158p:plain
システムのプロパティ画面

ウィンドウ下部に「環境変数」というボタンがありますので、クリックします。

環境変数ウィンドウ下部のシステム環境変数のリストの中に「Path」という項目があると思います。
この項目を選択して「編集」をクリックします。

f:id:MasaKu:20171112154054p:plain
システム環境変数のPathを選択して編集をクリック

環境変数名の編集が表示されたら「新規」をクリックして以下のパスを追加します。
C:\Users\ここには各ユーザの名前が入ります\AppData\Roaming\Composer\vendor\bin

f:id:MasaKu:20171112154601p:plain
新規をクリックしてパスを追加する

Pathの追加が完了したら各画面をOKで閉じていきます。
ここまでの作業が完了したらLaravelプロジェクトを作成する準備が完了です。

Laravelプロジェクトの作成

それでは、いよいよLaravelプロジェクトを作成して、画面を表示していきましょう。
Laravelプロジェクトを作成する場所はどこでも構いませんが、今回はわかりやすいようにデスクトップに作成しましょう。

それでは、コマンドプロンプト上でデスクトップに移動します。
デスクトップに移動するコマンドは以下の通りです。

cd Desktop

コマンドプロンプト上でデスクトップに移動できたら以下のコマンドを実行して、Laravelプロジェクトを作成してください。

laravel new hellolaravel

laravelコマンドにより、プロジェクトを構成する上で必要なパッケージをどんどん揃えてくれます。
ダウンロードには少々時間がかかりますので、気長に待ってください。

f:id:MasaKu:20171112140259p:plain
laravelコマンド実行後の画面

f:id:MasaKu:20171112140302p:plain
Application ready! Build something amazing.が表示されればインストール完了

もし、うまくいかない場合は、環境変数の設定が間違っている可能性がありますので、設定を見直していただくか、以下のコマンドでもLaravelプロジェクトの作成が可能です。

Composer create-project laravel/laravel hellolaravel --prefer-dist

プロジェクトの作成に成功すると、デスクトップに「hellolaravel」というディレクトリが作られているはずです。
では、プロジェクトがうまく作成できたか確認してみましょう。

以下のコマンドをコマンドプロンプトに入力してhellolaravelの場所に移動します。

cd hellolaravel

hellolaravelに移動できたら、以下のコマンドを実行してください。

php artisan serve

するとLaravel development server started: <http://127.0.0.1:8000>のような表示が現れます。
Laravel では 内部サーバを利用することができ、上記のコマンドで簡単に動作確認をすることができます。
内部サーバはPHP5.4以降に実装されたビルドインサーバー機能を利用しています。

さきほど実行した artisan というコマンドでは、ビルドインサーバを利用するだけでなく、Laravelで利用可能な様々な機能を実行することができます。
以下のコマンドで実行可能なコマンドを一覧で確認することができるので、ほかにどんなコマンドがあるか気になった方は是非調べてみてください。

php artisan list

さて、少し脱線しましたが、php artisan serveでビルドインサーバが起動できたら、ブラウザ上で動作確認をしてみましょう。
ブラウザを立ち上げてhttp://localhost:8000にアクセスしてみてください。

すると、Laravelのホーム画面が表示されているかと思います。
正しく表示されていたら、Laravelの導入が成功した証拠です。
おめでとうございます。

f:id:MasaKu:20171112155957p:plain
http://localhost:8000 にアクセスした際の表示

ちなみに、起動したビルドインサーバを停止させたい場合は、コマンドプロンプトで「Ctrl」 + 「C」を入力します。

おわりに

以上が、Laravelの導入方法です。いかがでしたでしょうか。
私も初めて自分でフレームワークを導入してみましたが、特に失敗することなく導入することができました。
この手軽さが、Laravelが低コストで学習することができる所以であるかしれません。

Laravelの使い方については、参考書などで勉強することが効率的かと思いますが、いくつか紹介したい機能もありますので、またいつかの機会に紹介できたらなと思います。

以上です。長文失礼しました！

参考資料

PHPフレームワーク Laravel入門
http://www.shuwasystem.co.jp/products/7980html/5258.html

ソフトウェアフレームワーク
https://ja.wikipedia.org/wiki/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF

XAMPP
https://www.apachefriends.org/jp/index.html

XAMPPのインストール方法
https://techacademy.jp/magazine/1722

Composer
https://getcomposer.org/

Composer Wiki
https://ja.wikipedia.org/wiki/Composer

Laravel 5.3 インストール
https://readouble.com/laravel/5.3/ja/installation.html

  • エンジニア中途採用サイト
    ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
    ご興味ありましたら是非ご確認をお願いします。
    20210916153018
    https://career-recruit.rakus.co.jp/career_engineer/

  • カジュアル面談お申込みフォーム
    どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
    以下フォームよりお申込みください。
    forms.gle

  • イベント情報
    会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

社内勉強会「もくもく勉強会」のご紹介

イベント

ラクスエンジニアのstrongWhiteです。
過去に「WIP制限の大切さ」の記事を書いているので、興味がある方はそちらも参考にしてくださいませ。
さて、今回はラクス大阪本店で開催しているもくもく勉強会のご紹介をさせていただきます。

もくもく勉強会とは

「勉強会」と付いていますが、共通のテーマをもとに議論したりはしていません。
何らかの課題や目的をもつ人々が集まって、それぞれの目的のもとにそれぞれが自由に取り組むことを目的として活動しています。
そのため勉強の内容も参加者によってさまざまで、必ずしもITや技術に関係するトピックを扱っていません。

↓↓↓勉強内容はこんな感じです↓↓↓

  • 業務と関係のない言語やフレームワークの勉強をする
  • プライベートサービスの開発をする
  • 今後業務にぶっこんでやろうと思っている何かの予習をする
  • 積ん読を消化する
  • 資格の勉強をする
  • IoT的ななにか
  • ペアプロをする etc...

月イチで発表会も開催しており、勉強会の成果や、勉強会の活動とは全く関係なく発表したいことがある人が発表を行っています。
ここまで読んでいただいて分かる通り、割とゆるやか～な雰囲気で活動しております。

10月の発表会の様子

では実際に10月の発表会の様子を一部紹介したいと思います。

f:id:strongWhite:20171107185825j:plain:w500

f:id:strongWhite:20171108191402p:plain:w200 f:id:strongWhite:20171108191722p:plain:w200

写真はオフィスのカフェスペースにぶら下がってる電球をPhilips Hue v2に差し替えて、AWS IoT ボタンを押した際に電球の色を変えてみよーという試みを行っている様子です。
カフェスペースをいつもの白色から色鮮やかで華やかでスタイリッシュに変えてみようという感じです(笑)
AWS IoT ボタンの入力をローカルサーバで受け取り、Philips Hue v2と同期することで電球の色が変わります。

f:id:strongWhite:20171108184120j:plain:w400
f:id:strongWhite:20171108192431p:plain:w150 f:id:strongWhite:20171108192620j:plain:w300

次の写真はカフェスペースでいまいろんな意味で流行りのドローンを飛ばしてみた様子です。
制御自体はRaspberry Piで行っており、離着陸、旋回以外に一回転するなどのトリッキーな動きも実現しています。
写真の真ん中で紫色の光を放っているのがドローンです。今まさに一回転してます(笑)

もくもく勉強会のよいところ

私が参加して良いなと思うところは技術的興味の窓口(キッカケ)ができるところかなと思います。
他のエンジニアの人が行っている勉強内容から興味を持ち、自分も学んでみようというキモチが生まれるイメージです。
勉強会では他のエンジニアの方と和気あいあいと話しながら楽しく学べるので、普段は話さない人ともコミュニケーションが盛んになり、 同時に技術的知識を蓄えられるので一石二鳥かなと思います。

おわりに

ラクスでのもくもく勉強会を紹介しました。

エンジニアならば自由に技術の話題を見聞きするのは楽しいと思うはずです。
弊社ではこういった技術的勉強会に対してオープンなので、エンジニアとしては嬉しい限りです。
これからも続いていけるようにしていきます。

以上strongWhiteからのもくもく勉強会の紹介でした。

参考

JavaからPHPに乗り換えて感じたこと

PHP Java

はじめに

はじめまして、新卒一年目のd_shrと申します。
現在、業務ではPHPを用いて開発を行っています。業務に入る前は大学在学中の研究開発や入社後の新人研修でJavaを使っていました。
在学中にPHPを学習した経験はありましたが、業務で扱うことになると入出力のチェックなど セキュリティの観点には特に注意しなければいけないため、プログラミング言語の細かい仕様まで把握する必要があると思います。
そこで変数の扱いなどにPHP独特のものを感じ、Javaとは違う仕様に戸惑うことがありました。

本記事では、JavaからPHPに転向した際に戸惑ったことを中心に、主にJava経験者から見たPHPの特徴、注意点などをまとめていこうと思います。 PHPの学習を考えている方やPHP初心者の方に少しでも参考になれば幸いです。

目次

PHPを使い始めて戸惑ったこと

業務で実装をしていて1番戸惑ったことは、変数の扱いです。
セキュリティの観点から正しい値が格納されていることをチェックする実装することがありますが、その際にPHPの変数の扱いに戸惑いました。

PHPの変数の扱い

まず、PHPは変数の型がありません。
Javaと比較すると、PHPの大きな特徴であると思います。
変数に型がないPHPでは、1つの変数に数値と文字列を格納することができます。

<?php
  $hoge = 123;
  $hoge = "hogehoge"
?>

他にも...
以下のような書き方ができることにも最初はすごく違和感を感じました。

<?php
  $hoge = 1;
  $hoge = $hoge == true ? "true" : 0;
?>

PHP側で解釈してくれるので型の宣言をする必要がなく、記述量が減るメリットはあると思います。
(可読性を考えると、このように書くことはあまりないと思いますが)
しかし、PHPが勝手に型を合わせてしまうため、Javaのような型に厳密な言語を触った後では、変数の扱いに戸惑うことがよくありました。

暗黙的な型変換

暗黙的な型変換とは、PHPが変数の型を勝手に変換してしまうことです。
例えば、以下のような変数の比較。

<?php
  $a = 0;
  $b = "hoge";
  if ($a == $b) {
    // true
  }
?>

PHPで数値と文字を比較すると、文字を数値に変換しようとします。
文字列の最初の部分により値が決まり、有効な数値がない場合は0になるため、 このような結果になります。
PHPの仕様通りに変換され意図しない結果が得られることがあるため、 PHPでの条件分岐を作る際には、変数の扱いには注意が必要です。

  • 扱いに注意が必要な例
<?php
  if ( 0 == 0 )     // true
  if ( 0 == "0" )   // true
  if ( 0 == false ) // true
  if ( 0 == null )  // ture
?>

これらは、型が正しいかどうか厳密な比較を行う演算子"＝＝＝"を使うことで解決できます。
しかし、厳密な比較を行わない、switch文も注意が必要です。

<?php
switch ($hoge) {
  case 0:
    // hogeが0, "0",false, null,""などで実行される
    break;
  case "0":
    // ここは実行されない
    break;
}

// 厳密な型変換を行う場合
switch (true) {
  case $hoge === 0:
    // hogeが数値の0のときだけ
    break;
  case $hoge === "0":
    // hogeが文字列の"0"のときだけ
    break;
}
?>

型に厳密なプログラミング言語の経験がある場合は、 変数の扱いで引っかかりやすいのではないかと思いました。
PHPで正しく変数の扱うためには、変数について仕様をしっかり把握し注意しないといけません。

変数のスコープ

PHPの変数の扱いで戸惑ったことは暗黙的な型変換だけでなく、 変数のスコープでも経験があります。
変数のスコープとは、変数の有効範囲のことです。
PHPでは、関数単位のスコープしかなく、 if文やループ中のみでしか使わないような変数を定義できません。

<?php
$flag = true;

if ($flag) {
  $value = "true";
} else {
  $value = "false";
}

Javaではif文の中で定義された変数は、if文のブロックの中だけで有効です。
PHPのスコープを把握していなかったときに、以下のようなソースコードを書いたことがあります。

<?php

$flag = true;
$value = "";
if ($flag) {
  $value = "true";
} else {
  $value = "false";
}

// $valueに空を入れたくなかったときはこっちで書いた
$flag = true;
$value = "true"
if (!$flag) {
  $value = "false";
}

スコープを正しく理解していないと可読性の低いソースコードになってしまうこともあります。
スコープもプログラミング言語で特徴があるので、 各言語ごとに把握しておかないといけないことだと思います。

その他、気になったこと

上記以外で、実装中に疑問に思って調べたことや違和感を感じたことです。

配列の値渡し

Javaのデフォルトは参照渡しですが、PHPのデフォルトは値渡しです。
PHPでも参照渡しはできます。

  • 値渡しの例
<?php
$array = [1,2,3];

$copy = $array;

$copy[1] = 5;

print_r($array);
print_r($copy);

$array: Array ( [0] => 1 [1] => 2 [2] => 3 )
$copy: Array ( [0] => 1 [1] => 5 [2] => 3 )

  • 参照渡しの例
<?php
$array = [1,2,3];

$copy = $array;
$copy2 = &$array;

$copy[1] = 5;
$copy2[1] = 5;

print_r($array);
print_r($copy);
?>

$array: Array ( [0] => 1 [1] => 5 [2] => 3 )
$copy: Array ( [0] => 1 [1] => 5 [2] => 3 )

まとめ

JavaからPHPを扱うようになって戸惑ったことや違和感についてまとめてみました。
当初はこの違和感に嫌気が差していましたが、今ではPHPに洗脳され慣れてしまいました。
PHPを学び始めた方や、次の新卒で入社される方に参考になればと思います。
また、同じような境遇の方に共感いただければ幸いです。

  • エンジニア中途採用サイト
    ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
    ご興味ありましたら是非ご確認をお願いします。
    20210916153018
    https://career-recruit.rakus.co.jp/career_engineer/

  • カジュアル面談お申込みフォーム
    どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
    以下フォームよりお申込みください。
    forms.gle

  • イベント情報
    会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

仕事を効率化！おすすめのエクセルショートカット集15選！！

Excel

はじめに

皆さんこんにちは，kuwa_38です．今年からラクスに入社した新卒です．社会人になって色々と気づいたことはありますが，その1つが「エクセルって意外と使うな」ということです．テキストファイルやwikiなどに書かれることもありますが，それらと同じかそれ以上にエクセルの資料は多いように感じます．そのため，エクセルを早く扱えて損はないと思っています．
この記事ではエクセルのショートカットや便利機能について記載します．エクセルに向かう時間を短くし，皆さんの貴重な時間を少しでも確保する手助けになれば幸いです．

誰もが使える便利機能

クイックアクセスツールバー：よく使う機能をお気に入り登録する

よく使うツールをお気に入り登録できる機能です．

f:id:kuwa_38:20171022010056p:plain:w300
クイックアクセスツールバー
登録方法：
登録したいツールの上で，右クリック＞クイックアクセスツールバーに追加で登録できます．
f:id:kuwa_38:20171101113840p:plain:w300
クイックアクセスツールバーへの登録

小技

  • クイックアクセスツールバーに追加した機能は，マウスを使わずとも，Alt(F10) + 数字(左から順に自動で割り振られます)で使うことができます．自分の登録した機能の数字を覚えておくとより早く作業できます．
    f:id:kuwa_38:20171029190327p:plain:w300
    ショートカットキーでアクセスする方法
  • リボン折りたたむとツールバーが非表示になり，より広く画面を使うことができます．多くの機能を使わない，かつ，画面を広く使いたい方は，使う機能をクイックアクセスツールバーに登録してピン留めをはずすと良いでしょう．
    f:id:kuwa_38:20171029191904p:plain:w300　f:id:kuwa_38:20171029190749p:plain:w300
    リボンを折りたたむ／結果：ツールバーが非表示になる

シートの選択：シートを効率的に探す

図のようにエクセルの左下の箇所(「◁ ▷」の所)で右クリックを押すとシート名の一覧が表示されます．

f:id:kuwa_38:20171022021203p:plain:w300
シートの選択

図形の編集を効率化する

オブジェクトの選択：図形を一気に選択する

複数の図形の移動や編集に便利な機能です．
手順：
1. ホーム＞「編集」のグループにある「検索と選択」＞「オブジェクトの選択」
2. 選択したい範囲をドラック

f:id:kuwa_38:20171022202843p:plain:w500
オブジェクトの選択メニュー
f:id:kuwa_38:20171022202845p:plain:w300　f:id:kuwa_38:20171022202849p:plain:w300
2.選択範囲をドラック／結果：ドラックした範囲内の図形が全てアクティブになる

図形の編集：途中で図形を変更する

  1. 変更したい図形を選択
  2. 「書式」＞「図形の編集」＞図形を選択
    f:id:kuwa_38:20171022204100p:plain:w400f:id:kuwa_38:20171022204102p:plain:w200
    図形の変更／結果

表やグラフの作成を効率化する

選択セルの■をダブルクリック：表の一番下までオートフィルを掛ける

手順：
1. オートフィルを掛けたい列の起点となるセルにおいて，■の上にマウスカーソルを置く(「＋」が表示されます．)
2. 1の状態でダブルクリック

f:id:kuwa_38:20171022185459p:plain:w300　f:id:kuwa_38:20171022185611p:plain:w300
■をダブルクリックでオートフィル／結果

フィル機能：数千行の数値を作成する

ID1~3000まで作りたいといった時，ドラックしてオートフィルを掛けると時間がかかります．しかし，前項の「表の一番下までオートフィルを掛ける」は他の列が入力済みでないと使えません．そんなときに使える機能です．
手順：
1. 起点となるセルに初期値を入力
2. ホーム＞「編集」のグループにある「フィル」＞連続データの作成
3. メニューに増分や停止値を設定しOK(図の場合，列(縦)方向に1から3000まで1ずつ値を入力します)

f:id:kuwa_38:20171022193542p:plain
1,2.初期値の入力と連続データの作成
f:id:kuwa_38:20171022193546p:plain　f:id:kuwa_38:20171022193548p:plain
3.増分等の設定／結果

右クリックのオートフィル：書式のみコピー

手順：
1. 図のようにオートフィルを掛けたい列の起点となるセルにおいて，■の上にマウスカーソルを置く(「＋」が表示されます.)
2. 右クリックを押したまま書式をコピーしたい分だけドラック
3. メニューの「書式のみのコピー(フィル)」を選択(書式がコピーされます．)

f:id:kuwa_38:20171022191520p:plain:w300　f:id:kuwa_38:20171022191524p:plain:w300
1.参考にする書式のセルを選択/2,3.ドッラック，書式のみコピー
f:id:kuwa_38:20171022191526p:plain:w300
結果

「Ctr + *」：表を選択する

Ctr + *で表を選択できます．

f:id:kuwa_38:20171029115459p:plain:w300f:id:kuwa_38:20171029115502p:plain:w300
表を選択する

「F11」：棒グラフのグラフシートを作成する

手順：
1. 表を選択
2. F11

f:id:kuwa_38:20171022200730p:plain　f:id:kuwa_38:20171022200755p:plain:w500
表の選択・F11／結果

セル移動と入力を効率化する

「tab」：表の入力を効率化する

tabを押すと1つ右のセルへ移動します．また，Tabを押した後にEnterを押すと，初めにtabを押したセルの1つ下へ移動します．

f:id:kuwa_38:20171029132214p:plain:w300
Tab使用時のセルの移動

「Ctr + 矢印キー」：セル移動を効率化する

表の一番下に移動する時などに重宝するショートカットです．
アクティブセルと移動方向の1つとなりのセルの内容で挙動が変わります．

f:id:kuwa_38:20171029200827p:plain:w500
Ctr + 矢印：移動方向に値が入力済み
f:id:kuwa_38:20171029200849p:plain:w500
Ctr + 矢印：移動方向のセルが空セル

アクティブセル 移動方向の1つとなりのセル 結果
値が入力済み 空セル 値が入力済みのセルまで移動
値が入力済み 値が入力済み 値が入力済みの終端のセルへ移動
空セル 空セル 値が入力済みのセルまで移動
空セル 値が入力済み となりのセルに移動

「F2」：編集と入力を切り替える

アクティブなセルでF2を押すと「編集モード」と「入力モード」を切り替えることができます．
編集モード：
矢印キーを押すと，アクティブなセルの中で文字カーソルが移動します．図のように打ち間違いを修正したい時などに便利です． 例えば，B3セルに「rakkkus」と入力後「←」を押すと，B3セルの中でカーソルが移動します．

f:id:kuwa_38:20171029122740p:plain:w300
編集モード：「←」を押すとセル内で文字カーソルが移動
入力モード：
矢印キーを押すと，他のセルに移動します． 例えば，B3セルに「rakus」と入力後「←」を押すと，A3セルに移動します．
f:id:kuwa_38:20171029122737p:plain:w300
入力モード：「←」を押すと左のセルに移動する

「F4」：参照先の「$」を付ける/はずす

F4を押すことで「=A1」といったセルの参照を「=$A$1」,「=A$1」，「=$A1」,「=A1」と切り替えることができます．
=sum($D$3:$G$8)のようにD3にもG8にも「$」を付けたい場合：
図のように，範囲を入力した後にF4を押すことで「$」の付ける/付けないを変更できます．

f:id:kuwa_38:20171029124016p:plain:w300　f:id:kuwa_38:20171029124019p:plain:w300
全体に「$」を付ける
=sum($D$3:G8)のようにD3のみに「$」を付けたい場合：
前項のF2を利用します．
1. 範囲を入力(「=sum(D3:G8」の状態)
2. F2キーで編集モードに変更
3. D3に文字カーソルを合わせる
4. F4を押す
f:id:kuwa_38:20171029124643p:plain:w300　f:id:kuwa_38:20171029124645p:plain:w300
一部に「$」を付ける

「Ctr + :」：現在時刻を入力する

「Ctr + :」で現在時刻を入力できます.

「Ctr + ;」：現在の日付を入力する

「Ctr + ;」で現在の日付を入力できます．
表示を変更したい場合：
(図は「2017/10/29」 ではなく 「10月29日」 にする場合)
1. 表示型を変更したい範囲を選択
2. 右クリック＞セルの書式設定
3. 分類＞日付＞「種類」を選択

f:id:kuwa_38:20171029130054p:plain:w300　f:id:kuwa_38:20171029130056p:plain:w200　f:id:kuwa_38:20171029130301p:plain:w300
表示の型を変更する

おわりに

この記事ではエクセルの便利機能やショートカットキーについて，私の主観で使いそうなものを15個紹介しました．この記事で紹介したことが，時短や作業の効率化につながれば幸いです．
また，エクセルは本当に様々なことができます． ここで紹介したこと以外にも便利な機能やショートカット(さらに言えば，関数やマクロ)が存在するので，興味を持った方は検索してみてください．

超便利！日本で使えないUberをベトナムで使ってみた！！

エンジニアライフ-ベトナム

初めまして、ラクスエンジニアのnerobluebrosです。

今回は配車サービスの「Uber」について書きます。

ラクスは日本以外にベトナムにもオフィスを構えており、ベトナムのエンジニアチームの育成と課題改善に年に数回ベトナムに出張します。 私も2度行ったのですが、2回目に初めてUber(ウーバー)を使ったところ、とても便利だったので、そのご紹介です！

Uberってなによ？

Uberはタクシーの配車サービスで、スマホのアプリでタクシーを呼び出して利用します。実際にタクシーを利用するまでの手順は以下の通りです。

  1. スマホで行き先を指定してタクシーを呼び出す

  2. よさそうなタクシーがいたら待ち合わせ場所を指定

  3. 行き先と金額を確かめて、確定する

これだけ。

待っているときはどれくらいで到着するかアプリからわかります↓ f:id:neroblubros:20171030183948j:plain

キターーーーー↓ f:id:neroblubros:20171030184016j:plain

支払いは現金かクレジットカード。クレジットカードは情報をあらかじめアプリに登録しておきます。

残念ながら日本では規制とタクシーの二種免許が必要なため、ごく一部の地域を除いてUberは使えません。

次からは実際に使ってよかった点3つ、紹介します！

車が超快適

ベトナムのタクシーも日本のタクシー同様「いかにも！」という業務用の車ですが、Uberでは普通の乗用車がやって来ます。車に関してはハズレ無し。めっちゃ良い。実際、フォードのSUVが来たときもありました！

実際に乗ったフォードのSUV↓ f:id:neroblubros:20171030182558j:plain

ベトナムのタクシーは匂いが嫌だったり、タクシーの床が泥や砂で汚れていたりするので、きれいな車を利用できるのはすごくいい。

クレジットカードの支払いが超便利

前述の通り、Uberは乗る前に支払い方法(現金 or クレジットカード)を選択して利用します。現金の場合は目的地に着いたら支払う。これは万国共通、普通のタクシーと一緒。

クレジットカードで支払う場合は、ここが便利なのですがUberが別処理でやってくれます。なので運転手にクレジットカードを渡す必要すらなし！目的地に着いたら「カム・オン！」(ベトナム語でありがとうの意味)と言って車から降りるだけ！！

ところで、ラクスはクラウドサービスを提供していますが、その中に経費精算のサービス「楽楽精算」があります。実はラクス社内でも楽楽精算を使っているのですが、楽楽精算の便利機能のひとつにクレカデータの連携があります。

なので、会社決済のカードを登録しておいてカードで支払えば精算の手間も省ける！クレジットカードは複数登録できるので、会社の経費で精算ができるときは会社のカード、プライベートは個人のカードで使い分けできます！

閑話休題

Uberでは乗る前にあらかじめ料金が決まるのでボッタクリに遭う心配は皆無ですし、さらにクレジットカードでの支払いにしていればキャッシュレスになるので、超便利です！ しかも・・・運賃も通常のタクシーと比較して20%から30%程度安い！これは利用しない手は無いですぜ、ダンナ。

話さなくても良いのが超便利

一般的にベトナム人はベトナム語以外は通じません。それはタクシーの運転手といえども同じ。なので、行き先を伝えるのにひと苦労。ホンマに伝わっているか、行きたいこところに連れて行ってくれるか？ホンマに不安になります。

でも、Uberなら乗る前に行き先を指定しているので、運転手に行き先を伝える必要はありません！しかも、今どこを走っているかが、アプリの画面を見ればわかるので不安になることはありませんでした。

行き先に向かっているときのアプリの画面↓ f:id:neroblubros:20171030183656p:plain

この「話さなくても良い」というのはほんとにストレスを減らしてくれる。っていうかなくしてくれました。

まとめ

良いことばかり言いましたが、悪いところもあります。それはたまにハズレの運転手に当たるということ。 私は前回の出張で合計5回Uberを利用しましたが、最後の5回目でハズレを引いてしまいました。

車の運転が初心者みたいで「慣れていない」というのががんがん伝わってきて「これは事故るな」と。 幸い事故に遭うことはありませんでしたが、このときはさすがに「まじかー」って思いました。

Uberは欧米ではいろいろ防犯上の問題が発生しているみたいですが、ベトナムではそんな印象は受けませんでしたし、実際にどこかに連れていかれそうになるとかはありませんでした。前述の通り、アプリでどこを走っているか、目的地に向かっているかわかるので、一定以上の「安心感」があります。

さていかがでしたでしょうか？Uberの便利なところが伝わりましたでしょうか？？日本では使えないUberですが、もし、海外で利用する機会があれば使ってみてください(あ、でも、利用される方は自己責任でお願いしますね)。

おまけ

ラクスでは中途採用を行っています。ベトナムのエンジニアと一緒に自社サービスの開発を行ったり、ベトナムに出張も場合によってはあります。 気になる方は下記をご覧になってください。

ラクス中途採用ページ

トップページ | 株式会社ラクス 中途採用

もちろん新卒採用も行っています。

ラクス新卒採用ページ

http://fresh-recruit.rakus.co.jp/

参考

以下記事に出てきた企業のサイトです。

・Uber

・楽楽精算

・ラクスベトナム

ラクスの技術 / デザイン情報サイト
Copyright © RAKUS Co., Ltd. All rights reserved.