こんにちは、株式会社 ラク スで先行技術検証を行っている技術推進課のt_okkanです。 技術推進課では、新サービス立ち上げ時の開発速度アップを目的に、現在 ラク スでは採用されていない新しい技術の検証を行う、技術推進プロジェクトがあります。 今回はその技術推進プロジェクトで、モバイル クロスプラットフォーム について検証を行いましたので、その結果の報告を行います。 なお、別テーマの取り組みや、過去の取り組みに関しては、こちらからご覧ください。 tech-blog.rakus.co.jp モバイルクロスプラットフォーム 検証の目的 検証で使用したツール 省力化の定義 検証方法 検証結果 実装できなかった機能 NFC WebView クロスプラットフォームは開発を省力化できるか ライブラリについて 各フレームワークの所感 Ionic Framework 長所 短所 React Native 長所 短所 Flutter 長所 短所 フレームワークの選定基準 機能数 WebView スキル まとめ 参考 書籍 ブログ記事 公式ドキュメント モバイル クロスプラットフォーム 従来のモバイル アプリ開発 では、 iOS はSwiftやObjectiveCで、 Android は Java やKotlinで、各OSごとに別々の プログラミング言語 を用いて開発する必要がありました。 しかし、各OSごとに開発・テストするコストや、学習コストが高いことから、1つの ソースコード で異なるOS上でも同じ仕様、機能のアプリケーションを開発できるモバイル クロスプラットフォーム が開発されるようになりました。 現在、さまざまなモバイル クロスプラットフォーム の フレームワーク が存在しますが、大きく分けて3つに分類できます。 ハイブリット型 WebView上で動作し、HTML、 CSS 、 JavaScript で実装できる。Cordova、Ionic Framework、 Monaca など。 ネイティブ型 OSの描画エンジンを利用してUIを表示する。Xamarin、React Nativeなど。 独自レンダラー型 各OS上で動作する独自の レンダリング エンジンを利用してアプリを実行する。Flutter、Unityなど。 検証の目的 現在 ラクスのサービス の主軸は、ブラウザ上で動作する Webサービス です。 今後、既存のサービスのモバイルアプリへの移行や、新規サービスでのモバイル アプリ開発 があった場合、モバイル アプリ開発 にかかる 工数 を削減し開発の省力化を実現していきたいと思っています。 そのため、低コストでモバイル開発できる手法として、モバイル クロスプラットフォーム での開発を検討する必要があります。 そこで、本検証では クロスプラットフォーム でのモバイル開発がネイティブでのモバイル開発に比べ開発を省力化できるか、また省力化できる場合はどのツールを検討すべきかを示します。 Webサービス を主軸に置く企業の開発者の方にとって、 クロスプラットフォーム での開発を導入する上でのヒントになればと思います。 検証で使用したツール 本検証では、モバイル クロスプラットフォーム の各分類から フレームワーク を1つずつ選択し検証を行います。選択した フレームワーク はIonic Framework、React Native、Flutterになります。 Ionic Framework WebView上でWebアプリ（Angular、React、Vue）を実行する フレームワーク 。UI コンポーネント を提供し、ネイティブへのアクセスはCordovaやIonic社が開発しているCapacitorを利用して JavaScript とブリッジしている。 React Native JavaScriptEngine上でReactが実行される、ネイティブ型の フレームワーク 。Brideという機能を利用して、 JavaScript のコードから各OSに対応したUIやネイティブ API の実行を行っている。 Flutter Google が2018年にリリースした、独自レンダラ型の フレームワーク 。 Dart という プログラミング言語 で実装でき、各OS上で動作する Dart VM が画面の描画を行う。豊富なUIウィジェットが提供されており、ネイティブ機能へのアクセスは Dart のコードをネイティブコードに コンパイル して実行する。 省力化の定義 「 Webサービス 開発企業がモバイル開発を行う場合」という前提で、「省力化」の定義を立てました。 ※ネイティブ： iOS と Android のこと。開発言語はSwiftとKotlin ネイティブと同じ開発環境が整っていること ネイティブより学習コストが低い ネイティブより実装時間、コード量を削減できる ネイティブと同じ機能を実装できる クロスプラットフォーム での開発が上記の省力化の定義を満たせるのかを検証していきます。 検証方法 ネイティブ言語（Swift + Kotlin）と クロスプラットフォーム の各 フレームワーク （Ionic Framework + React Native + Flutter）で、同一の機能のサンプルアプリを実装し、その実装結果を比較しました。 以下のような実装した機能と比較した観点で比較し、省力化の定義を満たせているかを考察しました。 実装した機能 ローカルデータベース セキュアストレージ NFC カメラ Push通知 WebView 比較観点 比較観点 詳細 評価指標 比較対象 開発環境 エディター ◯：ネイティブと同等 △：ネイティブより劣っている ✖️：環境が提供されていない iOS ： Xcode Android ： Android Studio デバッグ ツール デザインツール ライブラリ評価機構 学習コスト プログラミング言語 ◯：ネイティブ1言語より低い △：ネイティブ1言語と同等 ✖️：ネイティブ1言語より高い iOS ：Swift Android ：Kotlin ライフサイクル 機能実装 実装時間 ◯：ネイティブより低い △：ネイティブと同等 ✖️：ネイティブより高い ネイティブの実装時間・コード量 コード量 機能実現 ◯：同じ機能を実装できる △：一部実装できない ✖️：全く実装できない iOS ：Swift Android ：Kotlin 検証結果 サンプルサプリを実装し、比較した結果は以下の通りです。 ※FE経験：Angular、React、Vueの経験があるフロントエンド経験者 ※BE経験： Java などの オブジェクト指向 プログラミングの経験のあるバックエンド経験者 ※実装時間・コード量に関しては本検証での数字です ※コード量は実装した行数と単語数から算出しました 比較観点 Ionic Framework React Native Flutter エディター ◯ Visual Studio Code ◯ Visual Studio Code ◯ Visual Studio Code Android Studio デバッグ ツール △ ブラウザDev Tools ◯ React Native DevTools ◯ Flutter Dev Tools デザインツール △ ブラウザDev Tools Hot reload △ ブラウザDev Tools Hot reload ライブラリ評価機構 ✖️ △ React Native Directory ◯ pub.dev プログラミング言語 学習コスト FE経験：◯ BE経験：△ TypeScript、 JavaScript 、Angular、React、Vue FE経験：◯ BE経験：△ TypeScript、 JavaScript 、React FE経験：△ BE経験：◯ Dart ライフサイクル学習コスト FE経験：◯ BE経験：△ Angular、React、Vue FE経験：◯ BE経験：△ React FE経験：△ BE経験：△ Flutter 実装時間 ◯ -46% ◯ -46% ◯ -67% コード量 ◯ -30% ◯ -25% ◯ -45% 機能実現 △ NFC 、WebView △ NFC ◯ 実装できなかった機能 NFC Ionic FrameworkとReact Nativeで、 iOS でType-Fの ICカード を読み込むことができなかった。 今回 Icoca を ICカード で使用し読み込みを実装したが、使用したライブラリがNDEFフォーマット以外のフォーマットに対応していなかったため、実装することができなかった。 Suica や Icoca などの Felica Standardのフォーマットに対応したライブラリを調査したが、見つけることができませんでした。 WebView Ionic Frameworkで、WebViewを実装することができなかった。Ionic Frameworkはアプリ起動時に作成されるWebView上で実行されているため、Ionic Frameworkから起動されているWebView以外のWebViewを作成することができません。 Ionic Framework上にOS内蔵ブラウザを表示してWebページを描画できますが、WebViewと比べると機能が限られます。 クロスプラットフォーム は開発を省力化できるか 本検証では、 クロスプラットフォーム はモバイル開発を省力化できる 、と結論しました。 理由としては以下の点が挙げられます。 実装時間、コード量を削減できる 学習コストは1つのネイティブ言語を学習するコストより低い 開発環境は同等、または劣っているものの代替手段がある 一部実装できない機能があるものの、ネイティブと同じ機能を実装できる また検証の結果から、 クロスプラットフォーム を導入する際はまずFlutterを検討すること 、としました。 Flutterが最も欠点が少なく汎用的であることから、まずはFlutterの検討を進めることをオススメします。 Dart の学習コストが、Ionic FramewrokやReact Nativeが Web標準 技術を使用できることと比較するとやや高いものの、元々は JavaScript の代替言語として開発された経緯もあり、実装しやすく高機能な プログラミング言語 です。また、以下で説明するようにライブラリの充実度でも、他の フレームワーク よりも優位であることがわかります。 ライブラリについて クロスプラットフォーム でネイティブの機能を利用する場合は、基本的には各 フレームワーク で提供されているライブラリを利用します。 そのため、ライブラリの質が実装や運用のコストに直結すると考えました。 そこで各プラットフォームでライブラリがどのように管理されているのか、調査・比較しました。 Ionic Framework React Native Flutter ライブラリ評価機構 なし React Native Directory pud.dev 評価方法 なし Directory Score pub points 実装で使用したライブラリ数 25 29 11 Ionic Framework ライブラリの評価機構が提供されていない。ライブラリの評価基準としては、公式・コミュニティ・ サードパーティ であるか、ドキュメントが充実しているか、を自身で調査する必要がある。 React Native React Native Directoryで管理されており、Directory Scoreで評価されている。評価方法は GitHub のfork、star、download数 React Native Directoryからの推奨 最終更新日が30日以内 180日以内に更新されているか open状態のissueが75個以内 である。 リポジトリ の評価が主な評価指標となっている。 Flutter pub.devで管理されており、pub pointsで評価されている。評価方法は、 Dart の規約にしたがっていること 依存関係を明記しており、全てのURLが HTTPS を利用していること OSI 認証ライセンスを使用していて、LICENSEファイルを提供している CHANGELOG ファイルを提供している ドキュメントを提供していること サンプルコードを提供している Publicな API のうち、20%以上のドキュメントを公開している Dart の静的解析に合格している 最新の実行環境で動作すること 最新のStableの Dart とFlutterのバージョンで動作すること である。ドキュメントの充実度、コードの動作保証などで評価を行っている。 上記の結果の通り、Flutterではpub pointsの値が高いほどライブラリが充実しており実装コストが低かったです。また、コード解析や最新版の実行環境での動作確認など、アプリの運用面でも助けになる情報が多い印象です。 React Nativeでは評価機構の仕組みはあるものの、Flutterと比べるとライブラリの人気度で評価されていると感じました。また、Ionic Frameworkは評価機構が存在しません。両方の フレームワーク に共通していることですが、実装してみてもライブラリによってはドキュメントが不足しており、ライブラリのコードを自身で解析して実装する必要もありました。また、実現したい機能をそのライブラリで実装できるかが判断できず、実際にコードを動かしてみて確認する必要があるものもありました。 また、今回の検証で使用したライブラリ数はFlutterが最も少なく、少ないライブラリ数で実装できることも挙げられます。Flutterが高機能であるため、React NativeやIonic Frameworkではライブラリが必要な機能（ ルーター など）をライブラリなしで使用できます。 上記の面でもFlutterが クロスプラットフォーム の中では最も優位であるという結論に至りました。これ以外でも、UIウィジェット数なども影響しています。 各 フレームワーク の所感 Ionic Framework 長所 まずは、 開発速度が速い ことが挙げられます。検証結果でも最も早くサンプルアプリを実装することができました。Webの技術を流用できることがその理由であると考えられます。またHTML、 CSS 、 JavaScript で画面を構築できるため、 クロスプラットフォーム の中では最も UIの自由度が高い と思いです。またIonic FrameworkはPWAにも対応しており、同じコードをモバイルと PWAにビルドしデプロイ できます。 短所 まずは、ライブラリの評価機構がないことが挙げられます。ライブラリのドキュメントが不足していて、実際に実装しないと実現できる機能を把握できないケースが多々ありました。他の フレームワーク にはライブラリの評価機構があることから、ここは明確な短所であると言えます。 機能面ではWebViewを実装することができないことが挙げられます。仕組み上すでにWebView上で実行されているため、新たにWebViewを実装することができません。 クロスプラットフォーム でWebViewを利用する場合は、React NativeかFlutterを利用してください。 React Native 長所 まずは、各OSに準拠した ネイティブのUIを描画できる ことが挙げれらます。 iOS ではHuman Interface Guidelines仕組み上WebViewをで、 Android では Material Design で表示されます。OSのUIでアプリを表示したい場合はReactNativeが有効になります。 また Reactの知識やエコシステムを利用できる ことも挙げられます。ライブラリに関してはDOM操作を必要とするもの以外は基本的に、Reactのライブラリを流用できます。そのため、すでにWebアプリがReactで実装されている場合はコードを移植することもできます。 短所 まずはBridge機能によるパフォーマンスの低下が挙げられます。頻繁にネイティブ機能を利用する場合や、大量データを表示する場合、Bridge機能に負荷がかかりパフォーマンスが低下する可能性があります。開発元のReact Native Communityもこの問題を認識しており、今後Bridge機能を廃止する アーキテクチャ 変更を予定しています。 また、いまだメジャーリリースがないことも不安要素として挙げられます。 Flutter 長所 まずはネイティブ同等に 開発環境が整っている ことが挙げられます。Dev Toolsがかなり優秀でさらにHot reload機能もあることから、他の フレームワーク と比べて開発環境が圧倒的に整っています。また ライブラリ評価機構が整っている ことが挙げられます。pub pointsが高いライブラリを利用すると、 API リファレンスが整っており実装がしやすいです。また不具合時の調査も他の フレームワーク と比べて、行いやすいと思います。 Dart VM がUIの描画行っており、Bridge機能を利用しないため パフォーマンスが良好 であることも挙げられます。開発元が Google で開発に力を入れていることから、将来性にも期待できます。 短所 欠点はあまりないのですが、 Dart の学習コストがかかることが挙げられます。他の フレームワーク がWeb技術を使用できること比べると、学習コストが高くなります。ただ Dart は オブジェクト指向 の プログラミング言語 であり、 JavaScript の機能も多数取り入れているため、そこまで学習コストは高くないかと思います。 また、OSの標準UIで画面を描画する場合に実装コストが高くなることが挙げられます。FlutterはデフォルトでMaterial Desginで画面が描画されます。 iOS はHumanInterfaceGuidelinesで表示したい場合は、実行されているプラットフォームによって表示する ウィジェット を切り替える必要があるため実装コストが高くなります。この場合はReact Nativeを利用した方が有効かと思います。 フレームワーク の選定基準 機能数 機能数が多いもしくは不確定の場合はFlutterを利用してください。Flutter自体の機能とUIウィジェット数が他の フレームワーク よりも多く、パフォーマンスも安定しています。React NativeやIonic Frameworkは機能数が多い場合、 JavaScript のBridgeに負荷がかかりパフォーマンスが悪くなる可能性があります。 機能数が少なく、特定の機能しか実装しない場合は、Ionic FrameworkかReact Nativeを選択して下さい。 Web標準 機能を利用できるため開発コストを低く抑えることができます。 WebView Webサービス 企業では、既にリリースされているWebアプリをWebViewを利用してモバイルアプリで表示したい、という要件が出てくると思います。WebViewを利用する場合は、FlutterかReact Nativeを利用してください。Ionic Frameworkは仕組み上、WebViewを実装することができません。FlutterかReact Nativeかを選択する場合は、基本Flutterを選択してください。 スキル Angular、React、Vueなどの JavaScript フレームワーク の経験がある場合は、Ionic FrameworkかReact Nativeを選択してください。SPAの知識を流用でき、開発速度は一番速いです。しかし、Ionic FrameworkやReact Nativeには実装できない機能やライブラリが提供されていない機能がありますので、導入する前に調査をする必要があります。 Java などのバックエンドでの開発の経験がある場合は、Flutterを選択してください。 オブジェクト指向 で実装できるので学習コストは低いかと思います。 まとめ 本検証でのまとめです。 モバイル クロスプラットフォーム はモバイル開発を省力化できるかを検証しました。 検証方法としては、ネイティブとモバイル クロスプラットフォーム のツールで、同じ機能のサンプルアプリを実装し、その実装結果を比較し考察しました。 結論は以下のようになりました。 モバイル クロスプラットフォーム は ラク スにおいてモバイル開発を省力化できる 実装時間・コード量を削減でき、開発環境が整っており、機能を実装できる ツールによっては実装できない機能があるので把握すること フレームワーク の選定は、まずはFlutterを検討する 実装する機能数やスキルセットから、 フレームワーク の選定を行う 「開発環境」「UI」「ライブラリ」などでFlutterが最も欠点が少なく汎用的であることがわかりました。そのため、モバイル クロスプラットフォーム を検討する際は、まずFlutterの導入を考えてください。 参考 書籍 基礎から学ぶFlutter (C&R研究所, 2020) React Native ~JavaScriptによるiOS/Androidアプリ開発の実践 ( 技術評論社 , 2020) Ionicで作るモバイルアプリ制作入門 (C&R研究所, 2019) ブログ記事 React Nativeの Re-architecture について。 (投稿日：2020/02/27) Flutter vs Native vs React-Native: Examinig performance (投稿日：2020/05/11) 公式ドキュメント Flutter React Native Ionic Framework React Native Directory Score pub.dev Package scores & pub points エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

こんにちは。開発エンジニアの amdaba_sk（ ペンネ ーム未定）です。 前回は「 機械学習をコモディティ化する AutoML ツールの評価 」、だいぶ間が空きましたが前々回は「 機械学習のライブラリ・プラットフォームをいくつか試した所感まとめ 」と、続けて 機械学習 をテーマとした記事を書きました。 これらの記事では 機械学習 モデルを作るまでのことしか言及していませんが、 機械学習 モデルは作ってそれで終わりのものでもありません。使ってなんぼのものなんです。かみせんプロジェクトとしての調査範囲からは外れますが、せっかくモデルを作ったならそれを使ったアプリも簡単なものでいいので作ってみたい。そう思うのは開発者として自然な感情ではないでしょうか。 というわけで今回は、「 機械学習 モデルを組み込んだ Web アプリを Python 初心者が作ってみた」という個人的な興味からやってみた系記事でございます。 なお後に述べるようにアプリの実装言語は Python を採用しますが、私はかみせんプロジェクトで初めて Python を触ったばかりの初心者です。 Python らしくないコードを書いている可能性もありますので、その点ご了承ください。 また「かみせんってなんやねん」と思われた方は ↓ のリンクからかみせんカテゴリの記事をご覧ください。 tech-blog.rakus.co.jp もくじ もくじ どんなアプリを作る？ どんな分類をするのか？ どうやってアプリを作る？ 機械学習フレームワークは何にする？ 実装言語と Web アプリのフレームワークは何にする？ プロジェクト構成はどんな感じにする？ 機械学習モデルはどう作る？ Web アプリ本体はどう作る？ 動かしてみる① 仕様をちょっと変えてみる 動かしてみる② まとめ 参考 どんなアプリを作る？ なるべくシンプルなものがよいですね。あまり時間はかけたくないので。 過去 2 記事で主に取り扱った 機械学習 のタスクは、分類でした。ということは、ユーザーが送信したデータを 機械学習 モデルで分類し、その結果を提示するだけというのが簡単で良さそうです。また画面を作るのは面倒なので JSON API ということにしましょう。 分類するデータの形式は、またもや過去 2 記事を見ると、ひとつはテキスト、ひとつはテーブルを使っています。テー ブルデー タだと複数のフィールドを埋めてやらないといけないので、作った後お試しで使ってみる時にめんどくさそうですね。テキストにしましょう。 結局「 機械学習のライブラリ・プラットフォームをいくつか試した所感まとめ 」の冒頭で構想したものと似たようなアプリになりました。 分類したいテキストを含む JSON を受け付ける 送られてきたテキストが既存のカテゴリのどれに相当するかを推測する 分類の結果を JSON に入れて返す どんな分類をするのか？ テキストを何のカテゴリに分類してくれるのかもここで考えておきましょう。要するにどんな学習データを使うのかという話ですが、今回は livedoor ニュース コーパス を使わせていただくことにします。 livedoor ニュース コーパス は「 livedoor ニュース」のうち、 クリエイティブ・コモンズ ライセンスが適用されるニュース記事を集めたもので、株式会社ロンウイットさんによって配布されています。 ここ からダウンロードすることができます。 ニュース コーパス には以下の 9 カテゴリのニュース記事が格納されています。 トピックニュース Sports Watch IT ライフハック 家電チャンネル MOVIE ENTER 独女通信 エス マックス livedoor HOMME Peachy これを学習することで、与えられたテキストが 9 カテゴリのうちどれに当てはまりそうかを推測することが出来るでしょう。 どうやってアプリを作る？ 機械学習 フレームワーク は何にする？ 機械学習 モデルを作る際の フレームワーク はなんだかんだ言って scikit-learn が使いやすいです。今回の主目的は 機械学習 モデルを作る部分ではないので、ここにあまり力を入れません。凝ったことは考えず、scikit-learn を使うことにします。 実装言語と Web アプリの フレームワーク は何にする？ 機械学習 モデルが Python の フレームワーク で作られるとなると、それを使うアプリの方も実装言語は Python を使うのがやりやすいです。本記事の冒頭でも述べたように Python で Web アプリなんて作ったことはありませんが、まあ、簡単なものを試作するくらいなら何とかなるでしょう。 Python で Web アプリの フレームワーク といえば、少し調べると以下の二つが代表的なようです。 Django : フルスタ ックな Web アプリ フレームワーク Flask : マイクロな Web アプリ フレームワーク 今回の用途では Flask の方が手軽で良さそうです。が、ここではそのどちらでもなく、 FastAPI を選択します。 Web アプリの フレームワーク を調べていた際に「 Python 製 Web フレームワークを Flask から FastAPI に変えた話 」という記事を見つけました。それによれば、 しかし、どちらの フレームワーク を使う場合でも下記のような機能を使おうとすると プラグイン や サードパーティ の助けを借りる必要があります。 OpenAPI JSON Schema GraphQL WebSocket タイプヒントを使ったバリデーション 非同期処理 CORS の設定 リバースプロキシとの連携サポート Django も Flask も近年登場したサーバサイドの技術や Python 3 の新機能に対するネイティブサポートがちょっと弱いです。 とのことなのです。 Django も Flask についても私自身はあまり詳しく調査していませんが、この記事を信ずるのであればどちらを選んでも プラグイン の選定作業が加わることになってあまり楽できそうにないです。特に JSON API を作ろうとしているため、やっぱり OpenAPI や JSON Schema は入れたいです。 また FastAPI のドキュメントを見ていると、なんだかこれで作れそうな気がしてきました。それに タイプヒントを使ったバリデーション も、とっても好みです。 というわけで Web アプリの フレームワーク は FastAPI を使うことにします。 プロジェクト構成はどんな感じにする？ 今回の Web アプリのプロジェクト構成は下のようなものにしました。これは初めに完全に決めたというよりも、作りながら試して結果こうなったという感じです。 my_ml_app ├── Pipfile ├── Pipfile.lock ├── text ... 学習データ置き場 ├── models ... 機械学習モデル置き場 ├── tokenizer.py ... 学習・アプリ共通依存モジュール ├── training.py ... 学習スクリプト └── my_ml_app.py ... Web アプリ本体スクリプト 「 ゼロから学ぶ Python 」というオンライン学習サイトによれば、「 The Hitchhiker’s Guide to Python 」というサイトで解説されている推奨構成に従うのがよいらしいです。今回の構成はあまり推奨構成に則っていないかもしれませんが、参考にはさせていただきました。 「 Cookiecutter 」等を使うことでテンプレートから ディレクト リ構成などひな型は作れるのですが、どのテンプレートがいいのかよくわからず結局上の構成は手で作っています。 機械学習 モデルはどう作る？ 機械学習 モデルの作成 スクリプト は training.py です。 詳細な内容は今回の主眼ではないので省略しますが、Web アプリで使うために出来上がったモデルを シリアライズ してファイルに保存しておく必要があります 1 。 モデル作成の概略は以下の通りです。 形態素解析 器： Janome ベクトル化方式： Tf-Idf 分類 アルゴリズム ： 単純 ベイズ 分類器 学習の際デー タセット を分割し、一部を性能測定に使っています。結果は以下の通りでした。モデルの性能は今回重要ではないのですが、まあ、そこそこなモデルになっているのではないでしょうか。 precision recall f1-score support dokujo-tsushin 0.68 0.91 0.78 218 it-life-hack 0.92 0.89 0.90 218 kaden-channel 0.89 0.93 0.91 216 livedoor-homme 1.00 0.25 0.40 128 movie-enter 0.84 0.97 0.90 218 peachy 0.80 0.71 0.75 210 smax 0.86 1.00 0.93 217 sports-watch 0.89 1.00 0.94 225 topic-news 0.98 0.74 0.84 192 accuracy 0.85 1842 macro avg 0.87 0.82 0.82 1842 weighted avg 0.87 0.85 0.84 1842 Web アプリ本体はどう作る？ Web アプリ本体の スクリプト は my_ml_app.py です。とりあえず全文を見てみましょう。 from enum import Enum from fastapi import FastAPI from pydantic import BaseModel, Field import joblib from sklearn.feature_extraction.text import TfidfVectorizer from sklearn.naive_bayes import MultinomialNB class CategoryName ( str , Enum): topic_news = 'topic-news' # トピックニュース sports_watch = 'sports-watch' # Sports Watch it_life_hack = 'it-life-hack' # ITライフハック kaden_channel = 'kaden-channel' # 家電チャンネル movie_enter = 'movie-enter' # MOVIE ENTER dokujo_tsushin = 'dokujo-tsushin' # 独女通信 smax = 'smax' # エスマックス livedoor_homme = 'livedoor-homme' # livedoor HOMME peachy = 'peachy' # Peachy class MyClassifier (): clf: MultinomialNB vec: TfidfVectorizer def __init__ ( self, classifier: MultinomialNB, vectrizer: TfidfVectorizer ): self.clf = classifier self.vec = vectrizer def classify (self, targetText: str ): v = self.vec.transform([targetText]) return self.clf.predict(v)[ 0 ] class ClassifyRequest (BaseModel): text: str = Field(..., max_length= 10000 ) app = FastAPI() my_classifier = MyClassifier( joblib.load( 'models/livedoor_tfidf_mnb.model' ), joblib.load( 'models/livedoor_tfidf.model' ) ) @ app.post ( '/classify' , response_model=CategoryName) async def classify (req: ClassifyRequest): return my_classifier.classify(req.text) 実にシンプルですね。シンプル過ぎて if も for も使う余地がありませんでした。 動かしてみる① Python 3 が使える環境にプロジェクトをデプロイ 2 し、プロジェクトの ディレクト リに移動。その後起動コマンドを実行します。 # pipenv run uvicorn my_ml_app:app --port 80 --host 0.0.0.0 --reload INFO: Uvicorn running on http://0.0.0.0:80 (Press CTRL+C to quit) INFO: Started reloader process [521] using statreload INFO: Started server process [528] INFO: Waiting for application startup. INFO: Application startup complete. サーバーが起動しました！ FastAPI は SwaggerUI をホストしていますので、そこから API を動かしてみましょう。 SwaggerUI にアクセスしたところ 「Try it out」で本記事の冒頭部分を分類してみます。 { " text ": " 機械学習モデルを組み込んだ Web アプリを Python 初心者が作ってみた \n こんにちは。開発エンジニアの amdaba_sk（ペンネーム未定）です。 \n 前回は「機械学習をコモディティ化する AutoML ツールの評価」、だいぶ間が空きましたが前々回は「機械学習のライブラリ・プラットフォームをいくつか試した所感まとめ」と、続けて機械学習をテーマとした記事を書きました。 \n これらの記事では機械学習モデルを作るまでのことしか言及していませんが、機械学習モデルは作ってそれで終わりのものでもありません。使ってなんぼのものなんです。かみせんプロジェクトとしての調査範囲からは外れますが、せっかくモデルを作ったならそれを使ったアプリも簡単なものでいいので作ってみたい。そう思うのは開発者として自然な感情ではないでしょうか。 \n というわけで今回は、「機械学習モデルを組み込んだ Web アプリを Python 初心者が作ってみた」という個人的な興味からやってみた系記事でございます。 " } これを送信すると、結果が以下のように返ってきます。 " it - life - hack " どうやら本記事は「IT ライフハック 」に入ってそうな記事だそうです。 仕様をちょっと変えてみる ところで、送信したテキストがどのカテゴリに相当するのかをひとつだけ返してくるだけでは、そっけなく感じますね。 実際出来上がったものを見ると、欲ができてます。以下のようにちょっと仕様を変えてみましょうか。 どのカテゴリにどの程度の確率で分類されるのかのリストを返す その際、分類される確率の高い順にカテゴリを並べる この仕様変更は幸い Web アプリ側だけで対応できます。 my_ml_app.py を以下のように修正しましょう。 @@ -1,4 +1,5 @@ from enum import Enum +from typing import List from fastapi import FastAPI from pydantic import BaseModel, Field @@ -30,17 +31,30 @@ def classify(self, targetText: str): v = self.vec.transform([targetText]) - return self.clf.predict(v)[0] + result_proba = self.clf.predict_proba(v)[0] # <1> + order = (-result_proba).argsort() # <2>, <3> + ordered_cats = self.clf.classes_[order] # <4> + ordered_probas = result_proba[order] # <4> + return [ + { + 'category': cat, + 'probability': proba + } for cat, proba in zip(ordered_cats, ordered_probas) # <5> + ] # <6> class ClassifyRequest(BaseModel): text: str = Field(..., max_length=10000) +class ClassifyResponse(BaseModel): + category: CategoryName + probability: float + app = FastAPI() my_classifier = MyClassifier( joblib.load('models/livedoor_tfidf_mnb.model'), joblib.load('models/livedoor_tfidf.model') ) -@app.post('/classify', response_model=CategoryName) +@app.post('/classify', response_model=List[ClassifyResponse]) async def classify(req: ClassifyRequest): return my_classifier.classify(req.text) やることが増えたので少しコードも複雑になりました。ポイントを説明します。 推論実行のメソッドを predict から predict_proba に変更したことで、カテゴリ毎の確率を得ることが出来ます。並び順は分類器の classes_ 属性と一致しています。 predict_proba から返された配列に対して負符号を付けることで、要素の正負をすべて反転しています。これは次のステップで降順ソートにするためです。 要素の正負を反転した結果に対して numpy.argsort を行えば、値の大小に従ってソートした時の配列インデックスの変化を返してくれます。 Python ではリストや配列に対して [] にインデックスのリストを入れると、各インデックスに対応する値を指定した順序で返してくれます。ここでは 3 で得たインデックスのリストを使って、カテゴリのリスト（ self.clf.classes_ ）とカテゴリ毎の確率（ result_proba ）を並べ替えています。 zip 関数を使ってカテゴリと対応する確率をペアにしています。これで別々のリストになっていたものが一つにまとまって扱いやすくなりました。 return 以降はリスト内包表記と言われる構文です。5 で作成したリストのそれぞれの要素を、dict に詰め替えて新しいリストを作っています。この部分は for 文を使って下のように書くこともできます。 ret = [] for cat, proba in zip (ordered_cats, ordered_probas): ret.append({ 'category' : cat, 'probability' : proba }) return ret リスト内包表記と for 文、どっちが読みやすいかは人によるでしょう。私自身は、リスト内包表記は文ではなく式であるという点でリスト内包表記の方が好みです。また実行速度はリスト内包表記の方が若干速いらしいですね（ Pythonのリスト内包の速度 ）。 動かしてみる② サーバーを再起動して、SwaggerUI の画面を再度開きます。先ほどと同様にして「Try it out」で本記事の冒頭部分を分類してみましょう。結果は以下のようになりました。 [ { " category ": " it-life-hack ", " probability ": 0.3086756411902118 } , { " category ": " smax ", " probability ": 0.15842430053076112 } , { " category ": " dokujo-tsushin ", " probability ": 0.13005882520629944 } , { " category ": " kaden-channel ", " probability ": 0.1221002790185913 } , { " category ": " peachy ", " probability ": 0.11371989611168741 } , { " category ": " movie-enter ", " probability ": 0.04808770370861974 } , { " category ": " sports-watch ", " probability ": 0.04605206014172084 } , { " category ": " topic-news ", " probability ": 0.03650002186757273 } , { " category ": " livedoor-homme ", " probability ": 0.036381272224538394 } ] どうやら本記事は、9 カテゴリ内では「IT ライフハック 」に入ってそうではあるけれども、確率は 3 割程度でそんなに高くないようです。仕様変更によってより詳しい結果を知ることができるようになりました。 まとめ 以上、 機械学習 モデルを組み込んだ Web アプリを Python 初心者が作ってみました。意図してシンプルな仕様にしたこともあり、また フレームワーク の助けもありとっても簡単に動くものが作れました。 今回は 機械学習 モデルを組み込んだ Web アプリ を作りましたが、 機械学習 モデルを使わない場合も基本的な作り方はあまり変わらないのではないかと思います。これを読んでくださった方が Python で Web アプリを作る時、何かの参考になれば幸いです。 参考 livedoor ニュース コーパス - https://www.rondhuit.com/download.html scikit-learn - https://scikit-learn.org/stable/index.html Django - https://djangoproject.jp Flask - https://flask.palletsprojects.com/en/1.1.x/ FastAPI - https://fastapi.tiangolo.com/ja/ Python 製 Web フレームワーク を Flask から FastAPI に変えた話 - https://note.com/navitime_tech/n/nc0381517d067 ゼロから学ぶ Python - https://rinatz.github.io/python-book/ The Hitchhiker’s Guide to Python - https://docs.python-guide.org/ Cookiecutter - https://cookiecutter.readthedocs.io/en/1.7.2/ Python のリスト内包の速度 - https://qiita.com/intermezzo-fr/items/43f90e07e4cebe63aeb6 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com 実は今回大ハマりして一番苦労したのはこの部分だったりするのですが、話が逸れるので割愛します。 ↩ 今回はWSL2+Dockerでやっています。 ↩

はじめに みなさんこんにちはa_renrenです。 今年は、 新型コロナウイルス によって以前より家にいる時間が増え、何か家でできる趣味を探している方が増えているのではないしょうか。 今回は、そのような方におすすめのラズパイについてご紹介していきたいと思います。また、これからラズパイの購入を考えいる方やラズパイは聞いたことがあるけどどんなことができるかあまり知らない方も是非読んでみてください。最後に簡単にラズパイとLINEを連携する方法を載せています。少しでもラズパイに興味を持っていただけたら幸いです。 はじめに ラズパイとは ラズパイの種類 Raspberry Pi4 model B Raspberry Pi Zero ラズパイでできること カメラとして活用 プログラミング学習 センサーと連携 実際に触ってみた ラズパイ購入 セットアップ LINE Notify設定 メッセージの送信 終わりに 参考 ラズパイとは ラズパイとは正式名称を Raspberry PI ( ラズベリー パイ)といい、イギリスの ラズベリー 財団によって開発された シングルボードコンピュータ です。 シングルボードコンピュータ とはむき出しの一枚のプリント基板の上に、電子部品と最低限の入出力装置を付けただけのとてもシンプルなコンピュータです。 もともとは子供向けの安価な教育コンピュータとして開発されましたが、今では、コンピュータやプログラミングの学習のみならず電子工作やロボット、産業向けに利用されるようになってきました。 ラズパイの種類 初めてのラズパイが発売されてから10年近くの年月が経ち、ラズパイの種類もどんどんと増えてきました。 今では大きく分けて5種類のラズパイが発売されています。 ここでは、一番性能が高い最新のモデルと一番安いモデルを紹介します。 Raspberry Pi4 model B 国内で2019年11月末に発売された最新モデルです。 従来のモデルとの大きな違いは メモリの選択が可能(2GB、4GB、8GB) CPUのクロック数が1.2GHzから1.5GHzとなり、より高速化 microHDMIを2つ搭載 などがあげられ、全体的にコンピュータとしての性能が高まりました。 メモリの選択が可能になり、本格的なサーバの運用などに対応することが可能となったことでラズパイでできる選択肢の幅が広がりました。 従来のモデルとの互換性が低かったり、消費電力が増えたりなどのデメリットがいくつかあるようですが、 これからラズパイを購入しようとしている人はこのモデルを買えば問題はないと思います。 メモリに関しては、値が高ければ性能も高くなりますが値段も高くなるため、お財布と相談しながら決めましょう。 ちなみに私は4GBのメモリを搭載しているものを購入しました。 www.raspberrypi.org Raspberry Pi Zero 全モデルの中で一番安価なモデルで600円程度で買うことができます。 より多くの人にラズパイを体験してもらうことを目的として作られたモデルです。 ほかのモデルと比べると性能は劣りますが、あまりお金をかけずに楽しみたいという人におすすめです。 www.raspberrypi.org 最近だと、ラズパイとキーボードが一体化した Raspberry Pi 400というものが登場しました。 日本では2021年以降に発売予定のため、気になる方はぜひ買ってみてください。 www.raspberrypi.org ラズパイでできること ラズパイでは、デスクトップPCで行うインターネットの閲覧、ゲームのプレイから電子工作など多くのことを行うことができます。 皆さんの発想次第で様々な使い方ができます。 今回はラズパイでできる様々なことの中からいくつかおすすめを紹介いたします。 カメラとして活用 ラズパイにはカメラが搭載されていませんが、別途カメラモジュールを購入することでカメラとして機能させることができます。 一口にカメラと言っても、設定を行えば監視カメラやセンサーカメラ、チャットに決まった時間に自動で撮れた写真が送られてくるような定点カメラなど様々な使い方ができます。 追加で費用がかかりますが、汎用性が高く、設定が難しくないため初心者にもおすすめです。 nn-hokuson.hatenablog.com プログラミング学習 もともと学習目的で作られているため、 Python やScratchが標準でインストールされおり、初心者が躓きやすい導入部分がなく手軽に始めることが可能です。 また、 Linux の学習をこれから始めようとしている方にもおすすめです。 Linux のコマンドなど Linux を学習しようとお手元のパソコンに Linux をインストールする必要がありますが、何かしらトラブルがあった場合に一人で解決することが難しいことが多く途中で断念してしまう人は少なくないと思います。 ラズパイではOSを選択することができ、その中に Debian という Linuxディストリビューション が元となったRaspbianというOSがあります。 RaspbianをOSとして選択してラズパイを使用することで、簡単に Linux の学習を始めることができます。 センサーと連携 ラズパイには様々なセンサーモジュールが用意されています。 いくつかセンサーをご紹介します。 水温センサー 湿度センサー 人感(モーション)センサー ガスセンサー 光センサー 赤外線センサー タッチセンサー サウンド センサー 他にも様々なセンサーが用意されています。 水温センサーとラズパイを掛け合わせることで自宅の水槽の水温の管理、人感センサーと掛け合わせると、人感センサーが働いた時だけライトの点灯や防犯カメラの起動、ディスプレイの起動などを行うことができます。 また、これらのセンサーがまとまっているキットも発売されているため、色々試してみたい方にはおすすめです。 https://www.amazon.co.jp/gp/product/B0716B778T/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B0716B778T&linkCode=as2&tag=osusume8net01-22&linkId=93e83ae8d992e07a1ec4d0db9283a2ff www.amazon.co.jp 実際に触ってみた 今回は、ラズパイとLINEを連携してメッセージを送れるようにしてみます。 ラズパイ購入 私は、付属品がセットになっているこちらのスターターキットを Amazon で購入しました。 www.amazon.co.jp これから始める際に必要な HDMI ケーブルや microSD カードなどの部品がそろっているため、簡単に始めることができます。 また、本来であれば microSD カードにラズパイ用のOSを書き込んでおく必要がありますが、このスターターキットには、すでにRaspbianなどのOSが書き込まれた microSD カードが付属しているため、面倒な手間が省けます。 しかし、このスターターセットだけでは、ラズパイを操作することはできません。スターターセットに加え以下のものが必要となります。 キーボード マウス ディスプレイ 一応ディスプレイがなくともテレビなどで代用することができます。 今回購入したスターターキットの中身はこのような感じでした。 ラズパイ本体(4GB RAM) microSD カード(32GB) スイッチ付き電源アダプタ HDMI ケーブル×2 冷却ファン×2 ケース ヒートシンク ×3(取付済み) MicroSD カードリーダー 取り扱い説明書 ケースに取り付けるとこんな感じです。 ケースの上部に冷却ファンを取り付けることができ、本体に電源を入れるとファンが回り始めます。 ケースの取り付け方は説明書がありましたが、あまり詳しく書かれていないのとケースが堅かったため、取り付けに少し苦労しました。 このケースは、3つに分解することができるので、全部分解してから取り付けることをおすすめします。 セットアップ ラズパイの組み立てが終われば次は、モニターなどを接続してOSのインストールを開始します。 付属の microSD カードを差し込めば簡単にOSのインストールを行うことができます。 今回はRaspbianを選択しました。 こちらの画面で言語の設定と wifi の設定が可能となっています。 左上のインストールをクリックするとインストールが開始します。 インストールが完了するとパスワードなどの各種初期設定が開始されます。 こちらの設定は後でも行うことができますのでスキップしていただいても大丈夫です。 初期設定が終わるとこちらの画面が出てくるかと思います。 ひとまずセットアップはこれで終了です。 LINE Notify設定 一通り設定が終われば実際にLINEと連携してみましょう。 まずは、LINE Notifyにログインして トーク ンを発行します。 LINE Notifyは、 Webサービス やアプリなどに来た通知を簡単にLINEに送信することができるサービスです。 以下からログインすることができます。 LINE Notify ログインできたら、右上に名前が表示されるので、そちらをクリックし、マイページを選択してください。 下にスクロールするとアクセス トーク ンの発行があるので「 トーク ンを発行する」から トーク ンを発行します。 トーク ン名と通知を送る相手を選択します。 通知はグループにも送ることができます。 今回は、 トーク ン名を「ラズパイ」にして、送信相手は自分のアカウントを選択します。 選択後、「発行する」をクリックしてください。 すると トーク ンが発行されるのでそれをどこかにメモしておいてください。 以上で トーク ンの発行は終わりです。 メッセージの送信 次は、ラズパイの操作に入ります。 以下のコマンドをホーム画面の左上にあるLXTerminalで実行することでLINEにメッセージが送れます。 送るメッセージはmessage=の右側で指定することができます。 今回は、Helloというメッセージを送信してみます。 $ curl https://notify-api.line.me/api/notify -X POST -H "Authorization: Bearer XXXXXXXX" -F "message=Hello" XXXXXXXXの箇所を先ほど発行した トーク ンに書き換えてください。 実行後以下のステータスが返ってくると成功です。 {"status":200,"message":"ok"} 実際にLINEで確認してみましょう。 先ほどのmessageで指定したHelloというメッセージが送られてきているのが確認できます。 以上でLINEとの連携の設定は終わりになります。 終わりに 今回は、ラズパイの基本的な情報からできることまで簡単に紹介しました。 後半では簡単にラズパイとLINEを連携させてメッセージを送れるようにしましたが、ただコマンドを打ってメッセージを送るだけだとあまり実用性がありません。ここからさらに発展させると、カメラモジュールを組み合わせて、お留守番しているペットの写真を定期的にLINEに送信したり、赤外線センサーを組み合わせて郵便物の受け取りを通知させたりと様々な使い方ができるかと思います。 ここから先は皆さんの発想力でラズパイを自分色に変えてみてください！ 参考 Raspberry Pi Documentation Raspberry Pi センサーでいろいろ作れる！おすすめ10選 - オススメPCドットコム ラズパイのモデルを比較 | M5Stack沼人の日記 Raspberry Pi（ラズパイ）からLINEにメッセージを通知する（コマンド編） | STONE-BOOKs エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

はじめに 初めまして。配配メール開発課 Jazumaです。 今回は PHP の フレームワーク Laravelの環境構築～基本機能の動作確認を行います。 Linux 環境での作業を前提としていますので Windows や Mac ではこの記事の手順でLaravelの環境構築をすることができません。予めご了承ください。 はじめに Laravelとは Laravelのメリット 動作環境 Laravelの環境構築 PHPのインストール Laravelのインストールや動作に必要なモジュールのインストール Composerをインストールする Laravelのインストール・プロジェクトの作成 Laravelの基本機能確認 ビルトインサーバの起動 ルーティングの設定 コントローラの作成 Viewファイルの作成 終わりに Laravelとは Laravelは2011年にリリースされた オープンソース の PHP フレームワーク であり、認証・データベースへのアクセス・入力値のチェックなどWeb開発に必要な機能が一通り備わっています。 Laravelの特徴として、 MVC モデルが採用されているということが挙げられます。 MVC モデルとはアプリケーション開発によくある処理をModel、View、Cotrollerの3つに分類して実装する手法です。 Model、View、Controllerはそれぞれ次のような機能を持ちます。 M: Model... データ処理をする。 取得したデータをControllerに渡す機能も持つ。 V: View... ユーザに表示する画面。Controllerにリク エス トを送ったり、Controllerが送ったレスポンスを画面に表示する。 C: Controller... Viewからリク エス トを受け取る。また、Modelから受け取った処理の結果をViewに対してレスポンスとして渡す機能を持つ。 MVC モデルは機能ごとにクラスが明確に分かれているため保守性の高いプログラムを簡単に書くことができるというメリットがあり、Laravelも例外ではありません。 Laravelのメリット Web開発をするにあたって、Laravelには以下のようなメリットがあります。 学習コストが比較的低い 前述の通りLaravelは MVC モデルに準拠しているため、どのファイルにどのような処理を書けばよいのか非常にわかりやすく、文法も単純なものが多いです。 そのため初心者でもWebアプリを効率的に開発することができます。 Webアプリに必要な機能を簡単に実装できる Laravelでは認証・エラー処理などのWebアプリケーションに不可欠な機能を簡単に実装することができます。例えば、「ユーザがリク エス トしたページが存在しない場合に404エラーページを返す」という処理は404.blade. php というViewファイルを作成するだけで実装できてしまいます。 フレームワーク が裏側でよしなにやってくれるというわけですね。この他にもコマンドを実行するだけで認証機能の実装に必要なControllerやViewファイルが作成されるなど、Web開発をスムーズに進めることができます。 コマンドが豊富 LaravelにはArtisanという コマンドライン ツールがデフォルトで備わっており コマンドライン からControllerやModelを作成したり、データベースを操作したりすることができます。 artisanコマンドの一例を以下に示します。(これらはほんの一部分にすぎません。 artisanコマンドの一覧が見たい時は php artisan listを実行します。) php artisan serve # ビルトインサーバを起動する php artisan make:model[controller] [ModelやController名] # Model[Controller]を作成する php artisan tinker #コマンドライン上でLaravelのプログラムを実行するモードを起動 動作環境 私は以下の環境で作業を行っています。 ホストOS: Windows10 Home ゲストOS: WSL2 Ubuntu20.04 PHP 7.4 Laravel 8.16 VSCode ver1.51 Laravelの環境構築 まずは以下の手順でLaravelの環境構築を行います。 PHP のインストール Laravelは PHP の フレームワーク ですので使う前に PHP をインストールする必要があります。 既に PHP がインストール済みの場合はこの手順は省略しても問題ありません。 以下のコマンドで PHP をインストールします。 #add-apt-repository コマンドをインストール $ sudo apt-get install software-properties-common \ # PHPをインストールするするためのppa:ondrej/phpリポジトリを追加 add-apt-repository ppa:ondrej/php \ # パッケージを最新化 sudo apt update \ # PHPをインストール apt-get install php7.4 php -vコマンドを実行してバージョンが表示されていれば正確にインストールされています。 PHP 7.4.7 (cli) (built: Jun 12 2020 07:44:38) ( NTS ) Copyright (c) The PHP Group Zend Engine v3.4.0, Copyright (c) Zend Technologies with Zend OPcache v7.4.7, Copyright (c), by Zend Technologies Laravelのインストールや動作に必要なモジュールのインストール Laravelの 公式Webサイト では、Laravelを使うために以下のような PHP のモジュールが必要になると書かれています。 BCMath PHP Extension Ctype PHP Extension Fileinfo PHP extension JSON PHP Extension Mbstring PHP Extension OpenSSL PHP Extension PDO PHP Extension Tokenizer PHP Extension XML PHP Extension ZIP PHP Extension 初期状態ではBCMath, Mbstring, XML がインストールされていません。また、後述するComposerでLaravelの インストーラ コマンドを実行するにあたってzip 拡張機能 が必要になるので合わせてインストールします。 $ sudo apt-get php7.4-bcmath php7.4-mbstring php7.4-xml php7.4-zip このとき、各種モジュールのバージョンは必ず php 本体のバージョンと揃えるようにしてください。(モジュールのバージョンを指定しないことが原因でエラーがよく発生します) モジュールがインストールできたら php -mコマンドで正しくパッケージがインストールできているか確認します。 $ php -m [PHP Modules] bcmath ctype fileinfo json mbstring openssl PDO tokenizer xml zip (見やすくするために必要なモジュールのみを記載しています。) Composerをインストールする Composerとは PHP で開発するのに必要なパッケージやライブラリの依存関係を解決してくれるツールです。例えばLaravelでの開発にパッケージAが必要でパッケージAの導入にはパッケージBが必要でパッケージBを使うにはパッケージCが...というようなことになった場合、Composerがないとそれらを1つ1つインストールしなければなりません。このようなやり方ではインストール漏れやパッケージ毎のバージョン違いでエラーが発生しやすいです。 それに対して、Composerを導入していればパッケージAをインストールするとそれを使うのに必要なパッケージBやCを自動でインストールしてくれる上、バージョン管理も勝手にやってくれます。このような利点からComposerは PHP の各種 フレームワーク で開発する場合ほぼ必ず導入されており、LaravelでもComposerが活用されています。 以下のコマンドでComposerをインストールします。 php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" php -r "if (hash_file('sha384', 'composer-setup.php') === 'e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" php composer-setup.php php -r "unlink('composer-setup.php');" カレント ディレクト リにComposerがインストールされますが、のちの手順を簡略化するためにパスの通っている ディレクト リに移動させます。 sudo mv composer.phar /usr/local/bin/composer Laravelのインストール・プロジェクトの作成 Composerの配置が完了したら以下のコマンドでLaravelの インストーラ をダウンロードします。 $ composer global require "laravel/installer" Laravel インストーラ のダウンロードが終わり次第、.bashrcを編集してComposerのvendor/bin ディレクト リにパスを通します。 $ vim ~/.bashrc export PATH="$PATH:$HOME/.config/composer/vendor/bin" パスを通せたら、Laravelのプロジェクトを作成するための ディレクト リを作り、その ディレクト リに移動してLaravel new コマンドを実行します。 $ mkdir Laravel_app $ cd Laravel_app $ Laravel new sample_app . . - Installing ralouphie/getallheaders (3.0.3): Downloading (100%) - Installing guzzlehttp/psr7 (1.7.0): Downloading (100%) - Installing guzzlehttp/promises (1.4.0): Downloading (100%) - Installing guzzlehttp/guzzle (7.2.0): Downloading (100%) - Installing dnoegel/php-xdg-base-dir (v0.1.1): Downloading (100%) - Installing nikic/php-parser (v4.10.2): Downloading (100%) - Installing psy/psysh (v0.10.4): Downloading (100%) - Installing laravel/tinker (v2.5.0): Downloading (100%) . . . Package manifest generated successfully. 72 packages you are using are looking for funding. Use the `composer fund` command to find out more! > @php artisan key:generate --ansi Application key set successfully. Application ready! Build something amazing. Laravel newコマンドでアプリケーションの開発に必要なパッケージが自動でインストールされていきます。 これでLaravelの開発をする準備ができました。 「Application ready! Build something amazing.」というメッセージが表示されたらLaravel_app ディレクト リで以下のコマンドを実行してLaravelのバージョンを確認してみましょう。 $ php artisan -v Laravel Framework 8.16.1 Laravelの環境構築が無事完了しました。ここから先ではいよいよLaravelの機能を使っていきます。 Laravelの基本機能確認 ビルトインサーバの起動 LaravelではWebサーバを構築しなくても備え付けのサーバ(ビルトインサーバ)によってWebアプリケーションの動作確認をすることができます。(ビルトインサーバはセキュリティや機能面で実用には堪えません。あくまでも開発中の動作確認に使うくらいの使用感です) 以下のコマンドを実行してLaravelのビルトインサーバを起動します。 $ php artisan serve Starting Laravel development server: http://127.0.0.1:8000 [Mon Nov 30 20:47:59 2020] PHP 7.4.12 Development Server (http://127.0.0.1:8000) started ブラウザの検索窓に localhost:8000 と入力してアクセスします。 上の画像のようにLaravelの起動画面が表示されれば成功です。 ルーティングの設定 ルーティングとは「このURLを呼び出したらこのコントローラを呼び出す」というようにURLとコントローラの対応付けをすることです。Laravelでは routes/web.php でルーティングを設定します。 web.php はデフォルトでは以下のようになっています。(コメント部分は省略) <?php use Illuminate\Support\Facades\Route; Route :: get ( '/' , function () { return view ( 'welcome' ) ; }) ; 上記のルーティングの内容を簡単にまとめると、「第一引数のURLがgetメソッドで呼ばれたときに第二引数内の関数を実行する」というものです。ここでは '/'、つまりホーム画面( localhost :8000)にアクセスしたときに welcome.blade.php という名前のViewファイルを返す処理になっています。 先ほどビルトインサーバを起動した際にこのルーティングが呼び出されたというわけですね。 続いて実際にルーティングを定義してみましょう。 web.php を以下のように編集します。 <?php use Illuminate\Support\Facades\Route; Route :: get ( '/' , function () { return view ( 'welcome' ) ; }) ; //追記部分 Route :: get ( '/hello' , function () { return 'hello' ; }) ; 新しく追加したルーティングは、'/hello'というURLをgetメソッドで呼び出すと'hello'という文字列を画面に表示するという内容です。Viewファイルではなく単に文字列を返すのは実用的ではありませんが今回は動作確認のためにこのような処理になっています。 それでは実際に localhost:8000/hello にアクセスしてみます。 上の画像のようにhelloと表示されていれば成功です。 コントローラの作成 続いてコントローラを作成します。 コマンドライン から以下のコマンドを実行します。 $ php artisan make:controller HelloController Controller created successfully. コマンドライン に上のようなメッセージが表示されていれば成功です。Laravelが自動でコントロー ラク ラスのファイルを作成してくれます。 Laravelではコントロー ラク ラスは app/Http 直下にControllerクラスのファイルが作成されます。 app/Http ディレクト リ直下に HelloController.php というファイルが作成されていることを確認しましょう。 無事作成されていますね。 続いて HelloController.php を以下のように変更します。 <?php namespace App\Http\Controllers; use Illuminate\Http\Request; class HelloController extends Controller { //新規追加のメソッド public function index () { return "hello, world" ; } } 詳細は後述します。 さらに、 web.php の内容を変更します。 <?php use Illuminate\Support\Facades\Route; Route :: get ( '/' , function () { return view ( 'welcome' ) ; }) ; //変更箇所 Route :: get ( '/hello' , 'App\Http\Controllers\HelloController@index' ) ; ルーティングの内容を「'/hello'がgetメソッドで呼び出されたら HelloControllerのindexメソッドを呼び出す 」というように変えています。 HelloController.php のindexメソッドはhello, worldという文字列を返すという処理を行うので、先ほどと同じように localhost:8000/hello にアクセスしてhello, worldと表示されていればokです。 Viewファイルの作成 Controllerの次はViewを触っていきます。 resources/views ディレクト リの下に hello.blade.php というファイルを作成し、次のような内容にします。 <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document </ title > </ head > < body > {{$message}} </ body > </ html > 次にコントロー ラク ラスに手を加えます。冒頭で書いたようにLaravelはControllerからViewファイルを呼び出すという処理の流れになっていますので、コントローラ側でViewファイルを呼び出す処理を実装しなければなりません。indexメソッドを次のように書き変えてください。 <?php namespace App\Http\Controllers; use Illuminate\Http\Request; class HelloController extends Controller { public function index () { //変更箇所 $ message = "Hello Laravel!!" ; return view ( 'hello' , [ 'message' => $ message ]) ; } } 変数 $message にHello, Laravel!!という文字列を代入しています。これはLaravel固有の記法というわけではなく、 PHP そのものの文法です。 return文ではviewメソッドを返しており、第一引数で hello.blade.php を返すようにしています。 少し複雑なのが第二引数の ['message' => $message] という部分です。 これはViewファイルに配列でパラメータを渡すための引数で、ここではmessageというパラメータに上で宣言した変数 $message の値をセットしています。 つまり先ほどお見せした hello.blade.php 内の$messageというパラメータにはHello, Laravel!!という文字列がセットされているというわけですね。(Viewファイルの$messageはあくまでもパラメータであり、 HelloController.php で宣言した変数 $message そのものではありません。) それでは localhost:8000/hello にアクセスしてみましょう。 上の画像のようにHello, Laravel!!と表示されているでしょうか? 最後にViewファイルの文法について簡単に解説したいと思います。 < body > {{$message}} </ body > $message を囲んでいる二重括弧 {{ }} にはどのような意味があるのでしょうか。大きく分けて2つの機能があります。1つはパラメータにセットされている値を展開するという機能です。この二重括弧をつけていないとHello, Laravel!!という文字列ではなく、$messageという文字列がそのまま出力されてしまいます。 もう1つはセキュリティ対策の機能です。{{ }} で囲まれたパラメータは単にその値が展開されるだけではなく、内部的には htmlentities() 関数に渡されて値が表示されます。これにより、「<」や 「&」 などの特殊な意味を持つ文字が エス ケープされて単なる文字として出力されます。 特殊文字 が自動で エス ケープされるため、 XSS 攻撃(悪意を持ったユーザが javascript やhtmlタグを入力して他のユーザのブラウザで実行させる攻撃)を大きな手間をかけることなく防ぐことができます。( XSS の詳細は こちら ) 基本的な文法に沿って実装すれば意識せずともセキュリティ対策ができているというのもLaravelの大きな魅力です。 終わりに Laravelを使うと簡単かつ安全にWebアプリケーションを開発することができるということを体感していただけたのではないでしょうか。 今回は紹介することができませんでしたがこの他にも認証機能の実装や、データベースの操作も非常にスムーズに行うことができます。 まだまだLaravelには便利な機能がありますので、また機会がありましたらご紹介したいと思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

こんにちは ラク スの iketomo です。 ここ最近はとても寒くなってきました。洋服や家住まいを冬仕様に変更しようとしている今日この頃です。 今回は ガントチャート やエクセル( Excel )や他の ガントチャート のおすすめツールについて紹介させていただきます。 皆様もプロジェクトの スケジュール や タスク管理 には頭を悩ませることも多いかと思います。 是非この記事からガントーチャートの使い方を知っていただきプロジェクトで活用いただければと思います！ ガントチャートとは ガントチャートとWBSとの違い ガントチャートのメリット 進捗の可視化 タスクの洗い出し 無理のない担当者アサイン ガントチャートを作成・使用する際の注意点 作業順序に誤りがないか タスクやリソースの重複がないか 情報が最新化されているか ツール紹介 エクセル（Excel） ・セルを塗潰し方式 ・関数編 Redmine Brabio おわりに ガントチャート とは ガントチャート はヘンリー・ガントさん工場の進捗を確認するためにおよそ100年前に生み出した工程管理の手法になります。 ガントチャート は主に スケジュール や タスク を管理するための表になります。 横棒グラフなどで可視化し プロジェクト全体の計画を 見える化 することでプロジェクトの進捗遅れや重要なタスクなどを視覚的に把握することができ、チームでスケジュールの進捗を共有をしながら進める際にエクセルなどで ガントチャート が使われることは一般的になっています。 ガントチャート と WBS との違い WBS はWork Breakdown Structureの略でタスクをある一定の基準で細分化したタスク一覧表になります。 開始日、終了日、 工数 や進捗を記入することで 全体の 工数 の見積もり や 全体進捗状況（何パーセント完了しているか） を把握することができます。 WBS でもスケジュール進捗を確認することができますが時間軸の概念がないので スケジュールの進捗の把握しやすさという点では ガントチャート の方が優れています。 WBS はタスクの洗い出し、 ガントチャート がスケジュールを可視化したものという関係になります。 ガントチャート の元となるタスクを洗い出す際に WBS を作成する必要があるので、 WBS の延長線上に ガントチャート があると考えてよいでしょう。 WBS と ガントチャート の違い ガントチャート のメリット 進捗の可視化 なんといっても ガントチャート を使う一番のメリット・おすすめ所はスケジュール・進捗の 見える化 になります。 「誰が」「いつ」「何をするのか」を視覚的に把握することができます。 スケジュールの遅れているのか？前倒しで進んでいるのかを自分や他のメンバーも含めメンバー全員に情報共有ができるので スケジュール遅れのトラブルにも即座に対応することができます。 タスクの洗い出し 上記でも述べましたがタスクを洗い出す段階で、 ガントチャート を作成する段階で WBS またはそれに近いものを作成することになります。 タスク漏れが発生してプロジェクトの終盤に追加が作業が発生したというような事態を招かないために 階層構造によりタスクを落とし込み、タスク漏れが発生しないようにすることが重要です。 この作業もエクセル( Excel )で行うことが多いでしょうか。 無理のない担当者 アサイ ン タスクに担当者を アサイ ンしていく段階で否が応でもリソース管理が意識できます。 個人に焦点を充てれば、タスクの重なりもすぐに気付くことができるので ガントチャート ではある期間にリソースが集中してしまうことを防ぐことができます。 ガントチャート を作成・使用する際の注意点 作業順序に誤りがないか あるタスクは前工程の作業が完了していないと進めれられない事があります。 ただ単に担当者と日程を割り振るだけではなく、タスクの依存関係を考慮して担当者と日程を アサイ ンしましょう。 タスクやリソースの重複がないか このタスクは誰誰さんしかできない。などとどうしてもプロジェクトの中心メンバーに大事なタスクが集中しがちです。 ですが、1人は同時に複数のタスクをするにも限界があり、進捗遅れの原因になります。 なるべく同時期に1人に複数のタスクが アサイ ンされないようスケジュールを組んでいきましょう。 情報が最新化されているか プロジェクトでは予期せぬトラブルはつきものです。 タスクの抜けがあった、進捗が遅れた等、様々な要因によってスケジュールは変更が必要とされます。 そういった変更を ガントチャート に反映しないと、 ガントチャート 自体が形骸化してしまい、全体進捗を把握するという ガントチャート の旨味が消えてしまいます。 ツール紹介 ガントチャート を実際に使うときの代表的な3ツールを紹介させていただきます。 エクセル（ Excel ） まずは皆さんの使いなれているエクセル（ Excel ）です。 ガントチャート を作るうえでエクセル（ Excel ）の良いところはすべてにおいて万能なところです。 ・任意で管理項目を増やしたい ・タスクが増えてきたので別途切り出したい ・担当者別に見たい ・完了したタスクは非表示にする ・一度作ったタスクをコピペして新しいタスクを作成する 等といったことが エクセル（ Excel ）では容易できます。 初めて ガントチャート を使い始める人にはまずエクセル（ Excel ）をお勧めします。 逆にエクセル（ Excel ）の悪いところは ・タスク アサイ ン時に通知することができない。 ・スケジュール全体を変更する際にの手間が多い。 等と言ったことが挙げられます。 ここでエクセル（ Excel ）での ガントチャート の作り方を2つ紹介させていただきます。 ・セルを塗潰し方式 担当者のスケジュール アサイ ン部分の日程をエクセル（ Excel ）のセルに塗りつぶしていく形式です。 エクセル（ Excel ）を利用した原始的な方法ではありますが簡易に作ることができ、このフォーマットを流用されるケースが多いです。 担当者ごとに色を変えることで、見た目で担当者を判断することができます。 またエクセル（ Excel ）のフィルターを利用すれば、各担当者にフォーカスして個人スケジュールを把握することもできます。 デメリットはスケジュールの変更にともないエクセル（ Excel ）のセルをペタペタと切り貼りする 工数 が多いことになります。 エクセル（ Excel ）セルを塗潰し方式 ・関数編 エクセル（ Excel ）関数で ガントチャート に対応する方法を紹介させていただきます。 ベースの表は先ほど紹介させていただいたエクセル（ Excel ）のセルを塗潰し方式と変わりありません。 セルを塗りつぶしていた部分をエクセル（ Excel ）のIF関数を利用して自動的に表示する方法になります。 「日付」開始日」「終了日」の3つのセルを利用して、該当のタスクのスケジュールに該当する日かを判定して「■」を表示しています。 エクセルの式は右記の通りです =IF(AND($E5<=K$2,K$2<=$F5),"■","") 「日付」K2のセルのと、「開始日」E5のセルと「終了日」F5のセルをIF関数で比較して ・開始日と終了日の間にあれば「日付」K5のセルに「■」を表示 ・開始日と終了日の間になければ「日付」K5のセルは空白 と判断しています。 簡単なエクセル（ Excel ）関数なので皆様も使ってみたり、アレンジしてみてください。 見た目をもっと良くしようと思うなら、条件付き書式を利用することでセルの色を変えることもできます。 エクセル( Excel ) IF関数 Redmine Redmine で簡易に ガントチャート を使用することができます。 ・チケットがそのまま ガントチャート になり、改めて ガントチャート を作る手間が必要がない。 ・チケットと完全連携できる ・担当者 アサイ ンやチケットの変更があった時にメール通知することができる といった事が最大のメリットになるでしょう。 Redmine をプロジェクト管理・タスク管理に使用している方も多いと思います。 その時にあまり手間をかけずに ガントチャート を使ってみたいという方にお勧めです。 あくまで簡易なので、いろいろな不都合はあります。 ・担当者ごとのスケジュールを見るのが手間 ・タスク登録が手間 ・完了したタスクを非表示にできないので縦に長くなる ・見た目が質素 などなど redmine.jp Brabio Brabioは ガントチャート の作成・更新の手間をなるべく効率化するための クラウド のツールになります。 5人まではフリーで使用できるのでぜひお試しで使ってみてください。 「 ガントチャート 作るならエクセルの10倍速い」の謳い文句の通りドラッグでタスク登録や コピー機 能など、タスク登録や変更をアシストしてくれるUIがとても充実しています。 工数 管理ができないことが玉に瑕ですが、Web上での登録の煩わしさはかなり軽減されています。 といっても、エクセルのUIの簡易さ、拡張性の高さに比べれば見劣りするところもあります。 ただBrabioはエクセル出力する事もできるので、 ガントチャート の大枠をBrabioで作成し エクセルでダウンロードしてあとはエクセル管理に切り替えるということも可能です。 Brabio brabio.jp おわりに 最後に ガントチャート の書き方で参考になる書籍をご紹介。 www.amazon.co.jp www.amazon.co.jp この記事は ラクス Advent Calendar 2020 - Qiita の2日目に参加しています。 よければ是非 ラクス Advent Calendar 2020 - Qiita も覗いてみてください。 今回は ガントチャート について説明させていただきました。 プロジェクト管理とは切っても切り離せないスケジュール管理をガントーチャートを使って プロジェクトメンバーと一緒に、抜け漏れなく、効率良く対応していきましょう。 本記事の内容が多くのプロジェクトのお役に立てますと嬉しいです。 それでは！ エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

id:radiocat です。11/17～18に開催された Agile Japan 2020で登壇の機会を頂きましたのでレポートします。 Agile Japanとは スポンサーとしても参加 イベントの風景 変わる勇気・変えない勇気 登壇の現場 セッション紹介：「中小企業のエンジニアチームを”楽”にする」を目指す組織マネジメントの変わる勇気と変えない勇気 なぜアジャイル？なぜビジョン？ チームにアジャイルを取り入れてカイゼン文化を生み出す ビジョンを生み出してヤクの毛刈りから脱出 ビジョンづくりを継続して自己目的化から脱出 私たちの「変わる勇気と変えない勇気」 Agile Japanとは 今年で12年目となる日本最大規模の アジャイル のイベントです。今年は5月に東京で開催される予定でしたが、コロナの影響でいったん中止となったあと、改めてオンライン方式でこの11月に開催されることになりました。 2020.agilejapan.jp スポンサーとしても参加 弊社はスポンサーとしても参加させて頂いており、公式サイトのセッションスケジュールのページにはしっかりと弊社のバナーが表示されていました。ありがとうございます。 セッションスケジュールのページに表示されている弊社のバナー 実は昨年もスポンサーとして参加させて頂き、ブログ記事を投稿しています。 tech-blog.rakus.co.jp イベントの風景 今回のイベントは eventhub というプラットフォーム上で配信されました。セッション動画が2トラック並行で ライブ配信 され、画面右ではslidoで質疑応答が行えるようになっていました。 Agile Japan 2020 オンライン会場 同じ画面上でセッションスケジュールや運営からのお知らせを確認したり、参加者同士の情報交換のためのメッセージ機能もありました。他にもスポンサーの出店ブースで資料をダウンロードしたり、参加者のスケジュールを押さえて個別ミーティングを行う機能もあり、リアルイベントの会場で行っていたことがそのままオンライン会場で再現されていました。オンラインイベントの進化を感じます。 変わる勇気・変えない勇気 今年のイベントテーマは「変わる勇気・変えない勇気」でした。公式サイトのメッセージには、 アジャイル の広まりや日本経済の状況などを踏まえ、今までの仕組みや習慣を見つめ直して未来へ向けてチャレンジする時が来たと言えますが、すぐに変えられない部分も多くあり、変わる部分と変えない部分を勇気を持って見極めていきましょうと書かれています。 このテーマを踏まえて弊社からもセッション公募に応募させて頂き、登壇の機会を頂きました。 登壇の現場 イベントは平日の昼間に開催ということで、オフィスの会議室からオンライン登壇させて頂きました。大阪のオフィスからでも手軽に参加できる点はオンラインイベントならではです。 オフィスの会議室からオンライン登壇 セッション紹介：「中小企業のエンジニアチームを”楽”にする」を目指す組織マネジメントの変わる勇気と変えない勇気 ここからは登壇させて頂いたセッション内容をご紹介します。 なぜ アジャイル ？なぜビジョン？ 今回は「ビジョン」という言葉に焦点を当てて、 アジャイル とビジョンについてお話ししました。 Agile Japan 2018のテーマは「Why Agile 」でした。「なぜ アジャイル に取り組むのか？」ということが語られる背景として、 アジャイル を取り入れること自体を目的にすることの危険性がよく叫ばれています。また、ヤクの毛を刈るように アジャイル に取り組むことだけを続けてしまい、組織が本来目指すべき大きな目標を見失ってしまうこともあります。 この発表では、私たちのチームがWhyと向き合って アジャイル を取り入れ、ビジョンを生み出すことで、ヤクの毛刈りや自己目的化から脱出してきた事例をお伝えしました。 チームに アジャイル を取り入れて カイゼン 文化を生み出す 2019年に現在のチーム体制がスタートし、チームの立ち上げを図る中で最初に目指したのが アジャイル を取り入れながら カイゼン 文化を生み出すことでした。 まずは PDCAサイクル を習慣化するために、1週間単位の計画をしっかり立てて、その後ふりかえりを導入しました。そして、スケジュールマネジメントを強化するためにスプリント制度を導入し、チームのパフォーマンスを最大化するためにサブチーム体制へ移行しました。 アジャイル の要素を少しずつ取り入れて カイゼン 文化を定着させ、チームの成長を実感することができました。しかし一方で、 カイゼン に終わりがなく、 スクラム も未定着でした。 スクラム の要素であるスプリント制度を導入してはいますが、この時点ではまだ反復開発と呼んでおり、 スクラム の要素をすべて取り入れることはできていませんでした。 カイゼン には終わりがなく、いつ スクラム になるのかも見えていない、まさにヤクの毛刈り状態です。「みんなで アジャイル 」には「 アジャイル の旅を成功させる第一歩は、そもそもなぜ仕事のやり方を変えたいのかを理解することだ。」と書かれています。私たちはなぜ アジャイル を取り入れて カイゼン 文化を生み出した先で何を実現したいのか？と考えることにしました。つまり、チームのビジョンを生み出すということです。 ビジョンを生み出してヤクの毛刈りから脱出 書籍「ザ・ビジョン」によると、以下のようにビジョンを生み出す3つの基本要素が紹介されています。 有意義な目的 明確な価値観 未来のイメージ 弊社は「中小企業を楽にする」という理念を掲げています。限られたリソース、規制やルールのしがらみに縛られることも多いのが中小企業です。私たち自身もその環境に身を置いています。まず、中小企業のエンジニアチームである私たちがこれまでに取り組んできた「 アジャイル を土台にした カイゼン 文化」を継続して、チームの一人ひとりが成長することが、有意義な目的であり、明確な価値観であると考えました。 そして、私たちの有意義な目的と明確な価値観を具体化していく取り組みをそのままモデルにすることを未来のイメージと捉えました。これらを踏まえて定義したのが「中小企業のエンジニアチームを”楽”にするモデルをつくる」というビジョンです。 そして、ビジョンに向けて段階的に アジャイル を取り入れていくロードマップを作成しました。まずはチームビルディングを行って、アウトプットを安定化します。次に、パフォーマンスアップを目指して、リリース速度を上げ、プロダクトアウトカムを強化します。そして、変革・再ビルディングのためにチームをスケールアップさせ、最後にこれらの取り組みをモデル化するというロードマップです。 アジャイル を土台にしてビジョンを生み出したことで、この先にどうありたいのか？を明確にすることができ、チームの実態をふまえて今後どのように成長していくかのイメージが持てるようになりました。一方で、具体的なアクションは決まっていないので、チームの全員が完全に腹落ちしているわけでもない課題がありました。 実際にその課題がすぐ表面化しました。ロードマップの2つめのステージである「リリース速度アップ」は実態にあっていないことがわかりました。 アジャイル を取り入れることが目的となってしまい、実態と合わない目標になっていたのです。つまり、自己目的化に陥っていました。 前出の書籍「ザ・ビジョン」には「ビジョンづくりは現在進行系のプロセスであり、たえずそれについて話し合っていく必要がある。」と書かれています。ビジョンを実現するためには、何がいちばん大切なのかを思い出させて、みんながビジョンを見失わないように助け、可能な限り障害を取り除いて、ビジョンづくりを継続する必要があるのです。 ビジョンづくりを継続して自己目的化から脱出 ビジョンはつくっただけではなく、継続的につくり続ける必要があることに気づいた私たちは早速ロードマップを見直しました。実態に沿っていない「リリース速度アップ」への取り組みをいったん保留し、まずプロダクトアウトカム強化に取り組むことにしました。事業部門との連携を強化し、「 プロダクトマネジメント 体制」を構築しました。これまで取り入れてきた アジャイル を継続しながら、プロダクトにフォーカスしていく体制を目指しています。 サブチーム体制も実態に合わせて見直しました。開発力が安定してきたので、オフショアチームの支援を開発リード側のサブチームに移し、よりプロダクト開発に注力する体制にしました。また、オペレーションリード側はチームの成長を目指してDevOpsなどの新たなテーマに取り組む体制にしています。 チームがビジョンを見失わないように様々な取り組みを行っています。半期ごとのチーム目標設定の際には、必ずビジョンとそれに向けた現状をおさらいしています。1on1ではフラットな相談だけでなく、チームのビジョンと個人の成長目標のすり合わせを行っています。ビジョンに向けて ドラッカー 風エクサイズを行ってチーム内の価値観のすり合わせも行いました。中堅メンバー中心にロードマップの次の戦略を考えるチーム戦略会議も行っています。 また、ビジョンを浸透させるためにビジョンに向けたアウトプットも行っています。自社で開催しているイベントやエンジニアブログで、ビジョンへ向けた取り組み事例を紹介しています。今回の アジャイル ジャパンのようなイベントでの発信もビジョンを浸透させるアウトプットのひとつです。 アウトプットすることで、自分たち自身のビジョンに対する認識を定着することにつながります。ただ、イベントへの参加やブログの発信などは、採用や ブランディング など会社としての別の目的もあります。それらとチームのビジョンをすり合わせながら、積極的に関わりを持つことが、チームのビションづくりを継続させます。1つひとつは小さいアウトプットでも、モデルをつくるという自分たちのビジョンに向けた意思表示を継続することで、小さく試して育てていくことにつながると考えています。 私たちの「変わる勇気と変えない勇気」 最後に、私たちの「変わる勇気と変えない勇気」についてまとめます。変わる勇気とは、 アジャイル を土台にしたチームのスタイルです。変えない勇気とは、ビジョンに向かう姿勢です。 アジャイル を土台にしたチームのスタイルは、 カイゼン を続けたり、アクションを見直し続けるために、常に変わる勇気が必要です。ビジョンに向かっていく姿勢は、 スクラム への適応をチームの目標にせずにビジョンづくりを継続し、ビジョンに向けたチームの取り組みをアウトプットし続けるという、姿勢を変えない勇気が必要です。2つの勇気を継続することで、チームの現状は少しずつ スクラム にも近づいています。 ビジョンに向かっていく姿勢を変えない勇気をもつことで、 アジャイル を土台にして常に変わっていく勇気を生み出すのです。 以上のように、 アジャイル とビジョンはチームの継続的な成長につながると考えています。そのために私たちが取り組んでいるのが、 カイゼン 文化を生み出して、ビジョンを生み出し、継続していくという、3つのステップです。この内容が中小企業のエンジニアチームの皆さんの継続的な成長のお役に立てれば幸いです。 継続的な成長のために仲間を募集しています 私たちのチームでは スクラム マスターを募集しています。スライドでもご紹介した「ビジョンづくりを実現するリーダーシップ」を発揮して、私たちのチームで一緒に働いてみませんか？ もちろん、 スクラム マスター以外の様々な職種も募集中です。よろしければぜひご連絡ください。 career-recruit.rakus.co.jp

はじめに itoken1013です、こんにちは。今年も寒い冬がやってきましたね！ 今回はプロジェクトマネジメントに携わる方であれば一度は聞いたことがある PMBOK について、 知識エリアとプロセス群 を中心に紹介していきたいと思います。 知識エリアとプロセス群への理解はプロジェクトマネージャー以外にも、プロジェクトに関わる全てのポジションの方に得られる知見があります。 ぜひこの記事からご担当のプロジェクトで活かせる PMBOK 知識をゲットいただければと思います！ はじめに PMBOKとは？ まず、プロジェクトとは？ 次に、プロジェクトマネジメントとは？ それでは、PMBOKとは？ PMBOKの重要性 PMPとは？ PMBOKの知識エリアとプロセス 知識エリアとプロセスの関係性 プロセス群、プロセス プロセス群 プロセス 10の知識エリア プロジェクト統合マネジメント プロジェクト・スコープ・マネジメント プロジェクト・タイム・マネジメント プロジェクト・コスト・マネジメント プロジェクト・品質・マネジメント プロジェクト・資源・マネジメント プロジェクト・コミュニケーション・マネジメント プロジェクト・リスク・マネジメント プロジェクト・調達・マネジメント プロジェクト・ステークホルダー・マネジメント PMBOKを活用していく際の注意点 おわりに PMBOK とは？ まず、プロジェクトとは？ PMBOK の知識エリアとプロセスを説明する前に、まず私たちが普段当たり前のように発している「プロジェクト」とは何でしょうか？ PMBOK においてプロジェクトとは、以下の特徴を持つ活動を示しています。 開始・終了時期が決まっており、明確な実施期間がある。（ 有期性 ） 過去に行った取り組みと比べて手順、作業の内容、担当者などが異なる 独自性 を持つ。 PMBOK が指すプロジェクトの対義語として「定常業務」が挙げられますが、定常業務は期間の定めがなく、また既存のやり方に従うことで目的を達成できる活動となります。 一方でプロジェクトと定常業務の共通点としては QCD（Quality：品質、Cost：コスト、Delivery：納期）の制約が存在する点 、そして 人が業務に取り組む点 、という2つの側面があります。 次に、プロジェクトマネジメントとは？ 上記で述べた 有機 性、独自性、限られたQCDの制約がある状況下で、 プロジェクト目標の達成に向けた一連のコン トロール がプロジェクトマネジメントです。 これらの複数の制約を抱えながら目標を達成する過程では通常、何らかの課題が生まれます。 プロジェクト立ち上げ時には分からない不確定要素や想定外のトラブルが発生することも珍しくなく、一筋縄では達成できないプロジェクトをうまくコン トロール する必要があります。 これらのコン トロール を担うポジションがプロジェクトマネージャーです。 プロジェクトマネージャーがコン トロール すべき要素はプロジェクトメンバーだけでなく、スコープやリスクや品質など多岐に渡ります。 また一言でコン トロール といっても作業には計画や実行など、フェーズによって求められる内容は変わります。 それでは、 PMBOK とは？ ここまでお伝えした プロジェクトマネジメントで必要とされる知識や手法を体系的に整理し、標準化した フレームワーク が PMBOK （Project Management Body of Knowledge、ピンボック）です。 米国のPMI（Project Management Institute、プロジェクトマネジメント協会）という 非営利団体 によって制定された世界共通のプロジェクトマネジメントの標準 フレームワーク になります。 1987年に初版が制定され、2020年現在では第6版が発行されています。 PMBOK の重要性 プロジェクトには独自性があるため、 PMBOK さえ理解しておけば万事OK！という状態になることはありません。 ただ過去のプロジェクトで蓄積されたナレッジが体系化されていることにより、 PMBOK は困ったときのガイド役として大いに役立つでしょう。 特にこれからお伝えする10の知識エリアとプロセスを知っていると知らないでは、プロジェクトの課題に直面した時の対応力に違いが出てきます。 また個人的な経験から PMBOK の知識エリアとプロセスの考え方は、プロジェクトマネージャー以外の方にも自身の状況を俯瞰し、担当業務をセルフマネジメントする際の参考となると感じています。 このようにプロジェクトマネジメントの ナレッジを世界標準で体系化している点、また細やかに10のプロセスをコン トロール 対象としている点 が PMBOK の重要な存在意義といえるでしょう。 PMP とは？ PMBOK を理解することの重要性をお伝えしてきましたが、ここで PMBOK に関連する資格である PMP （Project Management Professional）について紹介したいと思います。 PMP は PMBOK と同様、PMIによって運営されており、知識エリアとプロセスをはじめとした プロジェクトマネジメントの知識とスキル 保有 を認定する資格 となります。 正確な合格率が公開されているわけではありませんが、受験から資格更新までの内容を読んでいただくと、簡単に取得・維持できるものではないことが分かっていただけるはずです。 資格試験の出題内容としてはPMIが発行している PMBOK ガイドがベースとなっており、後述する立ち上げ・計画・実行・ 終結 ・監視、コン トロール の5プロセス群に関する問題が出題されます。 出題割合は以下となります。 出題範囲 割合 立ち上げ 13% 計画 24% 実行 31% 終結 25% 監視・コン トロール 7% ※ただし PMI公式ページ では21年以降、出題範囲がプロセスをベースとしたものではなく、人・プロセス・ビジネス環境に基づく内容へ変更されることが 掲示 されています。 出題範囲 割合 人 42% プロセス 50% ビジネス環境 8% PMP の受験には前提条件があり、一定期間のプロジェクトマネジメント経験とPMIの認定研修の受講を求められます。 要件 大卒 高卒 36カ月のプロジェクトマネジメント経験を含む 4500時間（2年弱）のプロジェクトを指揮・監督する立場での実務経験 〇 60か月のプロジェクトマネジメント経験を含む 7500時間（3年強）のプロジェクトを指揮・監督する立場での実務経験 〇 35時間のプロジェクトマネジメント研修 〇 〇 また資格を取得後も、3年以内の更新が求められます。 上記の通り、高難易度の資格ではありますが、対外的に高いプロジェクトマネジ メントス キルを証明することができるでしょう。 そしてより PMBOK の知識エリアとプロセスへの理解が深まることと思います。 受験資格のある方は、ぜひトライしてみていただければと思います。 PMBOK の知識エリアとプロセス 知識エリアとプロセスの関係性 さて、ここから本題である PMBOK の知識エリアとプロセスの説明に入っていきます。 詳細は後述していきますが、まず PMBOK の知識エリア、プロセス群、プロセスの関係性を以下に示します。 縦軸が知識エリア、横軸がプロセス群、各セルの要素がプロセスです。 以降の説明の位置づけが分からなくなった際には、こちらのマトリクスに立ち返ってみてください。 立ち上げ 計画 実行 監視・コン トロール 終結 プロジェクト 統合 マネジメント プロジェクト憲章作成 プロジェクトマネジメント計画書作成 ・プロジェクト作業の指揮・マネジメント ・プロジェクト知識のマネジメント ・プロジェクト作業の監視・コン トロール ・統合変更管理 プロジェクト・フェーズの 終結 プロジェクト スコープ マネジメント ・スコープ・マネジメント計画 ・要求事項収集 ・スコープ定義 ・ WBS 作成 ・スコープ妥当性確認 ・スコープ・コン トロール プロジェクト タイム マネジメント ・スケジュール・マネジメント計画 ・アクティビティ定義 ・アクティビティ順序設定 ・アクティビティ資源見積り ・アクティビティ所要期間見積り ・スケジュール作成 スケジュール・コン トロール プロジェクト コスト マネジメント ・コスト・マネジメント計画 ・コスト見積り ・予算設定 コスト・コン トロール プロジェクト 品質 マネジメント 品質マネジメント計画 品質保証 品質コン トロール プロジェクト 資源 マネジメント ・資源マネジメント計画 ・アクティビティ資源の見積り ・資源の獲得 ・プロジェクト・チーム育成 ・プロジェクト・チーム・マネジメント 資源のコン トロール プロジェクト コミュニケーション マネジメント コミュニケーション・マネジメント計画 コミュニケーション・マネジメント コミュニケーション・コン トロール プロジェクト リスク マネジメント ・リスク・マネジメント計画 ・リスク特定 ・定性的リスク分析 ・ 定量 的リスク分析 ・リスク対応計画 リスク対応策の実行 リスクコン トロール プロジェクト 調達 マネジメント 調達マネジメント計画 調達実行 調達コン トロール プロジェクト ステークホルダー マネジメント ステークホルダー 特定 ステークホルダー ・マネジメント計画 ステークホルダー ・エンゲージメント・マネジメント ステークホルダー ・エンゲージメント・コン トロール プロセス群、プロセス プロセス群 まずはプロセス群（上記マトリクスの横軸）です。 ※正式にはプロジェクトマネジメント・プロセス群と呼びます。 PMBOK にはプロジェクトのライフサイクルと作業の位置づけによって、以下の5つのプロセス群を定義しています。 後述する知識エリアとのかけ合わせによって、どのプロセス群でどんな知識や作業が要求されるのかを考えることができます。 立ち上げ プロジェクトを定義した上で、 ステークホルダー から認可を得ます。 計画 プロジェクト目標を達成するための計画を作成します。 実行 計画に従ってリソースを調達し、プロジェクト作業を実行します。 監視・コン トロール 計画と実態の差異を継続的にチェックし、差異がある場合には解消を図ります。 終結 プロジェクトの成果物を受け入れ、プロジェクトを公式に終了します。 プロジェクトを通して得られたノウハウを、次回のプロジェクトに向けて蓄積します。 プロセス 上記のプロセス群には、円滑なプロジェクトマネジメントのために実行すべきアクティビティとして「プロジェクトマネジメント・プロセス」が定義されています。 20年時点の最新である PMBOK 第6版においては、プロセスは全49種類です。 例えばプロジェクト・スコープ・マネジメント知識エリアに属する「スコープ定義」プロセスであれば、プロジェクトで作成する成果物や品質基準を取り纏め、スコープ記述書に定義します。 全てのプロセスの詳細は今回は説明外とさせていただきますが、上記マトリクスの通り、上記の知識エリアとプロセス群のどこかに属する形となります。 ただし全てのプロセスを必ず実行しなければいけないわけではなく、マネジメント対象となるプロジェクトの特性に応じて必要なプロセスを取捨選択する視点が必要です。 10の知識エリア 次は知識エリア（上記マトリクスの縦軸）に関する説明です。 PMBOK ではプロジェクトマネジメントを行う上で必要となる要素を、10種類の知識エリアにまとめています。 10種類の内訳はQCD（Quality：品質、Cost：コスト、Delivery：納期）の3点に加え、目標達成に至るまでの6種類のコン トロール 対象、そしてプロジェクト全体を統合的に管理する「統合管理」となります。 ここから10種類の知識エリアと合わせ、それぞれに対応するプロセスを紹介していきます。 プロジェクト統合マネジメント 以降9種類の知識エリアで定義された各プロセスを統合する知識エリアです。 プロセスはプロジェクトマネジメント全体の枠組みに関わるものであり、全てのプロセス群で定義されています。 プロセス群 プロセス 立ち上げ プロジェクト憲章作成 計画 プロジェクトマネジメント計画書作成 実行 ・プロジェクト作業の指揮・マネジメント ・プロジェクト知識のマネジメント 監視・コン トロール ・プロジェクト作業の監視・コン トロール ・統合変更管理 終結 プロジェクト・フェーズの 終結 プロジェクト・スコープ・マネジメント プロジェクトで必要な作業内容、作業範囲を明確にするための知識エリアです。 プロダクト・スコープ（成果物の性質、機能）とプロジェクト・スコープ（必要な作業）の2観点におけるプロセスが定義されています。 プロセス群 プロセス 計画 ・スコープ・マネジメント計画 ・要求事項収集 ・スコープ定義 ・ WBS 作成 監視・コン トロール ・スコープ妥当性確認 ・スコープ・コン トロール プロジェクト・タイム・マネジメント プロジェクトをスケジュール内に完了させるための計画やコン トロール などのプロセスを定義した知識エリアです。 プロセス群 プロセス 計画 ・スケジュール・マネジメント計画 ・アクティビティ定義 ・アクティビティ順序設定 ・アクティビティ資源見積り ・アクティビティ所要期間見積り ・スケジュール作成 監視・コン トロール スケジュール・コン トロール プロジェクト・コスト・マネジメント プロジェクトにかかるコストを計画し、予算内でプロジェクトを完了させるための知識エリアです。 4つのプロセスが定義されています。 プロセス群 プロセス 計画 ・コスト・マネジメント計画 ・コスト見積り ・予算設定 監視・コン トロール コスト・コン トロール プロジェクト・品質・マネジメント プロジェクトの成果物とその作成プロセスの品質をマネジメントするための知識エリアです。 品質要求を定める、要求を実現するための方法を定める、等の3つのプロセスが定義されています。 プロセス群 プロセス 計画 品質マネジメント計画 実行 品質保証 監視・コン トロール 品質コン トロール プロジェクト・資源・マネジメント プロジェクトを円滑に遂行するために、ヒトやモノの資源を適材適所に配置してマネジメントするための知識エリアです。 PMBOK 第6版より知識エリアの名称が「人的資源」から「資源」へと変更されました。 プロセス群 プロセス 計画 ・資源マネジメント計画 ・アクティビティ資源の見積り 実行 ・資源の獲得 ・プロジェクト・チーム育成 ・プロジェクト・チーム・マネジメント 監視・コン トロール 資源のコン トロール プロジェクト・コミュニケーション・マネジメント この知識エリアではメンバー、クライアント、その他 ステークホルダー 間のコミュニケーションを円滑に行い、縦横の情報連携をマネジメントするためのプロセスが定められています。 プロジェクトで発生する情報の収集、共有などのチャネルを作成し、 ステークホルダー 間のコミュニケーション上の問題点を解消するための知識エリアです。 プロセス群 プロセス 計画 コミュニケーション・マネジメント計画 実行 コミュニケーション・マネジメント 監視・コン トロール コミュニケーション・コン トロール プロジェクト・リスク・マネジメント 発生するとプロジェクト進行に影響を及ぼす不確実性を特定し、必要な対応策（回避・転嫁・軽減・受容）を講じるための知識エリアです。 リスクにはポジティブな好機・ネガティブな脅威の両方が考えられますが、出来る限り脅威を排除しつつ、好機を最大化することが求められます。 プロセス群 プロセス 計画 ・リスク・マネジメント計画 ・リスク特定 ・定性的リスク分析 ・ 定量 的リスク分析 ・リスク対応計画 実行 リスク対応策の実行 監視・コン トロール リスクコン トロール プロジェクト・調達・マネジメント プロジェクトの成果物を内製ではなく、外部に依頼や調達をして作成する際のマネジメントを行うためのプロセスを定義している知識エリアです。 3種類のプロセスの中で取り扱うのは発注先の選定、 RFP （Request for Proposal）の作成、 進捗管理 など、内容は多岐に渡ります。 プロセス群 プロセス 計画 調達マネジメント計画 実行 調達実行 監視・コン トロール 調達コン トロール プロジェクト・ ステークホルダー ・マネジメント プロジェクトの ステークホルダー （利害関係者）との関係構築を行い、プロジェクト目標の達成に向けてポジティブな効果を促進するためのマネジメントを定めた知識エリアです。 第5版から新たに追加されました。 ステークホルダー を特定し、各人の期待値を調整するためのプロセスが定められています。 プロセス群 プロセス 立ち上げ ステークホルダー 特定 計画 ステークホルダー ・マネジメント計画 実行 ステークホルダー ・エンゲージメント・マネジメント 監視・コン トロール ステークホルダー ・エンゲージメント・コン トロール PMBOK を活用していく際の注意点 ここまで紹介しました PMBOK の5つのプロセス群と10の知識エリアを理解することで、経験の浅いプロジェクトマネージャーでも「基本の型」をもってプロジェクトマネジメントを行うことが可能となるでしょう。 企業でも PMBOK をベースとした教育を行うことで、一定の知識を備えたマネジメント人材を輩出できるはずです。 しかしながら冒頭でもお伝えした通り、プロジェクトとは過去の事例にはない独自性を備えた取り組みです。 プロジェクトの性質や外部環境の変化によって、 PMBOK の知識だけでは対応しきれないイレギュラーな事態が発生することは考えられます。 基本の型を超えたより応用的な対応力が求められることもあるでしょう。 あらゆる事態に 臨機応変 に対応するには PMBOK のみならず、場数を踏んで経験することでしか得られない判断力や、個人の 人間力 が必要であることは念頭に置いておくべきと考えます。 おわりに 今回は知識エリアとプロセスの紹介を中心に、 PMBOK の基礎知識を説明してまいりました！ PMBOK の体系化されたプロジェクトマネジメントの知識は、プロジェクトの規模に関わらず恩恵を感じられるシーンがあるはずです。 本記事の内容が多くのプロジェクトのお役に立てますと嬉しいです。 それでは！ エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

技術広報の syoneshin です。 今回は当社の開発組織メンバー達に 読んでよかった 自身が影響を受けた 他者にも読んでほしいと思った という観点で 『おすすめの技術書』 とおすすめポイントを聞きました。 質問：皆さんの「おススメの技術書」 を教えてください。 【目次】 おすすめの技術書ランキング 『リーダブルコード―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)』 『マスタリングTCP/IP 入門編』 『体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践』 『達人プログラマー 職人から名匠への道』 『Webを支える技術』 『SQLアンチパターン』 『Java言語で学ぶデザインパターン入門』 『はじめて学ぶ　ソフトウェアのテスト技法』 『UNIXという考え方―その設計思想と哲学』 『Effective Java』 『内部構造から学ぶPostgreSQL 設計・運用計画の鉄則』 『リファクタリング―既存のコードを安全に改善する―』 『現場で役立つシステム設計の原則』 『レガシーコード改善ガイド：保守開発のためのリファクタリング (Object Oriented SELECTION)』 『3分間HTTP&メールプロトコル基礎講座』 まとめ おすすめの技術書ランキング 以下は当社の開発組織メンバーが選んだ「おすすめの技術書ランキング」です。 調査概要 調査手法:任意アンケート( ヒアリ ングシート)※複数回答可 調査対象:当社開発組織メンバー(テッ クリード ・開発マネージャー含む) 調査項目:2020年10月以前に出版された技術書 有効回答数:66名 ランキング内容:得票数6票以上の技術書 Rank 書籍名 得票数 1 リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice) 12 2 マスタリング TCP/IP 入門編 11 3 体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性 が生まれる原理と対策の実践 10 4 達人 プログラマー 職人から名匠への道 8 4 Webを支える技術 8 4 SQL アンチパターン 8 4 Java 言語で学ぶ デザインパターン 入門 8 8 はじめて学ぶ　ソフトウェアのテスト技法 7 8 UNIX という考え方―その設計思想と哲学 7 8 Effective Java 7 8 内部構造から学ぶ PostgreSQL 設計・運用計画の鉄則 7 12 リファクタリング ―既存のコードを安全に改善する― 6 12 現場で役立つシステム設計の原則 6 12 レガシーコード改善ガイド：保守開発のための リファクタリング (Object Oriented SELECTION) 6 12 3分間HTTP&メール プロトコル 基礎講座 6 当社で得票数1位の技術書は 『リーダブルコード―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)』 世間一般的にも名著としてよく取り上げられる技術書 当社でも若手からテッ クリード まで幅広い支持 以下はおすすめコメント プログラムを書く上で知っておくと良い心構えを知ることができるおすすめの１冊です。もっと早く知りたかったと思うことが多々書いてありました。 お作法や書く時に気をつけることは1年目に読んでとても参考になった技術書です。 プログラムの基本的な考え方を知ることができ、おすすめです。 多くの プログラマー が読んだ技術書ということもあり、共通認識として読んでおくといいかもしれません。 etc 次いで、得票数2位の技術書は 『マスタリング TCP/IP 入門編』 こちらも若手必読の古典 こちらも幅広い支持 以下はおすすめコメント プロトコル 、インターネット、ネットワークについての理解が深まるおすすめの1冊。 ネットワークに関する基本知識はこれで身につく。 おすすめです。 ネットワークの基礎がやさしくまとめられている。 etc 得票数3位の技術書は 『体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性 が生まれる原理と対策の実践』 こちらも若手必読の技術書 こちらも幅広い支持 以下はおすすめコメント Webアプリケーションのセキュリティに関する内容が詰まったおすすめの１冊。Webエンジニアならこの技術書を一度は読んでおきたい。 Webアプリケーションのセキュリティの基本が詰まった内容。基本的なセキュリティの知識はつけることができる。 etc 次いで得票数が同率4位の技術書4冊 『達人 プログラマー 職人から名匠への道』 主にテッ クリード 達が支持 おすすめコメント 著名なエンジニアが言っていること、やっていることが全てこの本に書かれていると感じました。理想のエンジニアに近づくためのマインドとふるまい方を教えてくれる本と言えます。 プログラムのお作法だけでなく、エンジニアとしてのマインド、のみならず、ビジネスマンとして重視すべき考え方などが広範囲にまとめられている 若手の方だけでなく、ベテランの方も初めて読む（ないし読み返す）と共感して自分の仕事や開発の仕方を再整理することができるとおもいます 仕様書やテスト項目書の書き方は教わるが、どうすればよい プログラマ になれるのかは分からなかった時 自分の会社の中ではなく、世界の「よい プログラマ 像」とそこに近づくためのヒントを教えてくれた。 etc 『Webを支える技術』 おすすめコメント Webアプリケーション開発に必要な基礎知識が一通り含まれている。 Web技術の進歩によって日常生活を大きく影響を与ええてきた歴史に触れることができました。 etc 『 SQL アンチパターン 』 おすすめコメント 読んだ当時は純粋な読み物として楽しんでいましたが、自分が実施したテーブル設計を後から見返すと SQL アンチパターン に影響されている部分が大きいと感じています。 DB設計における実践的かつ幅広いトピックが網羅されている必読の技術書。 etc 『 Java 言語で学ぶ デザインパターン 入門』 おすすめコメント 概念に名前を付けることのパワーを知ったおすすめの１冊。インターフェースで抽象化して 疎結合 にする意義や パターン名を知っていることで他者や フレームワーク のコードをすんなり理解できることを教えてくれた。 著者の“読者に理解させる”文章術がすごい。 有名な技術書だけあってとても丁寧にわかりやすく書かれている。 デザインパターン に初めて触れて「こんな考え方もあるんだ」と知るのに最適。 デザインパターン について知ることができます。古い技術書で書き方がやや古いところも多いですが役に立つかと思います。 etc 次いで得票数同率8位の技術書4冊は 『はじめて学ぶ　ソフトウェアのテスト技法』 おすすめコメント 自分がテスト書く時、すでにあるテストがどういう観点で書かれているかを把握するの役立ちました。スタンダードなパターンが網羅されていますし、初心者にも読みやすかったです。 始めは観点がわからないと思うので、テスト観点を体系的に学べるのがよさげです。 etc 『 UNIX という考え方―その設計思想と哲学』 おすすめコメント UNIX がなぜ優れているかを改めて整理したうえで、良いソフトウェアはどのような構造であるべきかを考えるきっかけになります。 「Small is beautiful.」「Make each program do one thing well.」は常時心に留めておきたい考え方。 小さく作ることがなぜ大切なのかを学ぶことができた。本を読みながらずっと心に響いていたのを記憶しています。 etc 『Effective Java 』 おすすめコメント 定番。第3版ではStreamや ラムダ式 など新しい機能への言及が追加。 Java エンジニアは必読の技術書。 Java の正しい理解と、簡潔で明瞭で正確なソフトウェアの設計に役立ちます。 etc 『内部構造から学ぶ PostgreSQL 設計・運用計画の鉄則』 おすすめコメント 実務で応用できる情報が項目毎に章立てされており、実際の業務で運用トラブルが発生した際に役にたった 高負荷時の原因箇所特定時の仮説の種がこの書籍から得られた。 PostgreSQL の全体像や仕組みから、運用に関する機能も記載されている。一回では理解できず、今もできていないこともあるので何度も読み返して理解したい。 データベースの基礎知識がある状態で読むと、 PostgreSQL の特徴などがよく理解できると思います。運用トラブル発生時は避けて通れない独特の仕様や用語などについても解説されており、関連知識を深めていく上でもよいインプットになると思いました。 etc 次いで得票数同率12位の4冊は 『 リファクタリング ―既存のコードを安全に改善する―』 おすすめコメント リファクタリング の仕方だけでなく、可読性や変更しやすいコードを書く方針を学べるよい本だと思います。 作って終わりではないことを知ったおすすめの１冊。洗練されたコードは一発で生まれるのではなく コードの内部品質を継続的に改善することで生まれると教えてくれた。 具体的なサンプルコードとともに、いろいろな リファクタリング の型を知ることができる。 安全に リファクタリング するための具体的なテクニックや心構えについて記載されており、コアロジックを大改修する際にめちゃくちゃ参考にさせてもらいました。 etc 『現場で役立つシステム設計の原則』 おすすめコメント オブジェクト指向 っぽい設計や書き方を、手続き型と対比してのメリットと実例が合わせて書かれている。 VOやEntityなどDDDのエッセンスも含まれている。 現場で設計し続けたエンジニアのこだわりを感じたおすすめの１冊。型を第一にシステム設計するとはどういうことかを教えてくれた。 著者の振り切った主張には、経験のあるエンジニアであれば必ず賛成できるものと反対したくなるものがあり その考察がシステム設計に対する自身の考えを一歩前進させるきっかけになった。 etc 『レガシーコード改善ガイド：保守開発のための リファクタリング (Object Oriented SELECTION)』 おすすめコメント レガシーコードに立ち向かっていくための手法が色々記載されている。 構造が複雑で理解できないようなコードに対する分析手法・対処方法が学べる。 etc 『3分間HTTP&メール プロトコル 基礎講座』 おすすめコメント 担当プロダクトでは課題図書に選定されていますが、個人的に一番勉強になった書籍。Web上ではどういったやり取りがされているのか、などは新人にはイメージしづらい領域かと思いますが、比較的わかりやすくまとまっていると思いました。図解が多いのもポイント。 登場人物2人の対話形式なので、理解しやすい。 2010年刊なので、HTTP/2などの新しい技術の説明はないが、 プロトコル の基礎を学ぶには十分。 etc その他にも 『基礎から学ぶ Vue.js』 『暗号技術入門 第3版　秘密の国のアリス』 『 テスト駆動開発 』 『エリック・ エヴァ ンスの ドメイン 駆動設計 (IT Architects’Archive ソフトウェア開発の実践)』 『マイクロサービス アーキテクチャ 』 の技術書が、一定の得票数を獲得しました。 まとめ 以上、いかがだったでしょうか。 今回ご紹介しきれなかった技術書は 次回の「番外編」でご紹介しようと思います。 当社開発組織では 業務に必要な技術書の購入と読書会の企画など 技術書に学ぶ機会の支援をしております。 社内読書会の様子 tech-blog.rakus.co.jp tech-blog.rakus.co.jp また学びを発信する機会として Meetupなど技術イベントを積極的に企画し メンバーが自己研鑽しやすい環境整備に力を入れ取り組んでおります。 当社の活動に少しでもご興味をお持ちいただけましたら、イベントにも是非ご参加ください。 主催イベント rakus.connpass.com 本記事でご紹介した おすすめの技術書 が皆さまの情報探索の一助となれば幸いです。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle

はじめに こんにちは。最近お気に入りのお店が閉店してしまい、悲しみに暮れています。 楽楽勤怠バックエンドチームの mako _makokです。 バックエンドチーム所属ではありますが、諸事情で数ヶ月間フロントエンドヘルプとしてTypeScriptでフロントエンドの開発を行っていました。 今ではある程度にTypeScriptを書けるようになったものの、ヘルプ当初は実務として初めてのTypeScriptを用いた大規模フロントエンド開発だったので、早期にキャッチアップする必要がありました。 今回は私がTypeScriptに入門する上で注意すべき点と実際に学習に使用したおすすめの学習教材を紹介したいと思います。 はじめに TypeScriptとは 型の恩恵 1. undefinedが激減してメンテナンスが容易になる 2. 補完を使ってサクサク書ける 3. 型がドキュメントになる 型システムを学習する上での注意点 JavaScript, TypeScriptの学習媒体について JavaScript入門したい方におすすめ JavaScript Primer TypeScript Playground 1. TypeScript Deep Dive 2. 実践TypeScript 3. プログラミング TypeScript 4. Type Challenge 最後に TypeScriptとは TypeScriptとは、動的型付け言語である JavaScript に静的型付けの概念と、一部独自の構文を取り入れた世界的に人気のある プログラミング言語 です。 *1 JavaScript のスーパーセットなので、 ECMAScript 最新仕様や JavaScript の記法がそのまま使えます。 TypeScriptで特徴的なのは型の表現力の高さです。値や数値そのものを型として扱ったり、既存の型から新しい型を作成したりなどができます。以下は型と型を合体できる Union Type という機能の一例です。 type Juice = 'Orange' | 'Apple' | 'Grape' const juice: Juice = 'Cake' // 'Orange', 'Apple', 'Grape'という文字列しか受け付けない type Coffee = 'Cappuccino' | 'American' // Juice型とCoffee型をくっつけてDrink型を生成する type Drink = Juice | Coffee // => 'Orange' | 'Apple' | 'Grape' | 'Cappuccino' | 'American' これ以外にもTypeScriptには多彩な型に関する機能や組み込み型があり、型を柔軟に操作することができます。 型の恩恵 型が柔軟なのは分かったけど、そもそも型をつけてなんのメリットがあるんだという話です。 これについては人によって様々な意見があると思いますが、個人的には以下の3点がメリットと考えています。 JavaScript においてはundefinedが激減してメンテナンスが容易になる 補完を使ってサクサク書ける 型がドキュメントになる 1. undefinedが激減してメンテナンスが容易になる 複数人で開発している以上、自分の知らないところでいつの間にかプロパティが増減しているなんてことは日常茶飯事です。依存関係があるオブジェクトをいじっていたらいつの間にかundefinedになってしまうこともよくあります。 一方で、型があれば、オブジェクトの構造は一発でわかります。 2. 補完を使ってサクサク書ける オブジェクトの構造が事前に分かっているということは、 IDE の補完が効きます。 これはつまり、numberを parseInt() しようとする無意味なコードを生み出さないことにも役立ちますし、存在しないプロパティにアクセスしようものなら コンパイル エラーとして怒ってくれます。 3. 型がドキュメントになる 型はドキュメントになります。 例えば、オブジェクト構造はuserと一緒だけど、申請画面のコードなので申請者を表すapplicantという変数を使用したとします。 型がなければapplicantってどんなオブジェクト構造なんだろうと辿るところから始まりますが、型があった場合は const user: User = { ... } const applicant: User = { ... } となり、変数名は違うけどどちらも同じUserオブジェクトなんだなと一発でわかります。 これを JavaScript で表現しようとすると、変数名を工夫するかコメントを書く必要がありますが、上記の型があるコードは短い記述で表現できます。 型システムを学習する上での注意点 TypeScriptには様々な機能がありますが、知らないまま使ってしまうと危険な機能がいくつかあります。 入門レベルのうちにVueやReactなどのライブラリを用いた開発を行っていると、以下のような問題に突き当たることになることがあるのではないかなと思います。(私はよくありました・・・) なんか型が原因でエラーを吐いているけどエラーが長くて何を直せばいいかわからない ライブラリの型を使ったらよくわからないけどエラーになってとりあえず any を使っちゃう 例えば1のような場合、 コンパイル エラーを解消するのは簡単にできます。 TypeScriptにはどのような値も許容するという any 型と、型を上書き(キャスト)する 型 アサーション という機能があります。 以下は良い例 *2 で、HTTP通信を行い、取得したデータを型 アサーション でキャストしています。 REST API による外部との通信のため、アプリケーションに型を伝えられずレスポンスの型としては any となってしまいますが、User型のオブジェクトだということが分かっている、という前提で使用しているためです。 function getUser ( id: string ) : User { // data はany型 const { data } = get( `https://example.com/user/ ${ id } ` ) // `as 型名`で型アサーション return data as User } 上記のような使用方法はとても有効的なのですが、以下のような使い方もできてしまいます。 const department: Department = getDepartment ( '1' ) const user: User = department as any as User Department 型のオブジェクトを取得し、 any 型に変換した後 User 型に変換しています。 これは コンパイル エラーにはなりません。 Department => any と、 any => User に互換性があるからです。 any はどのような値も許容するため、全ての型に互換性があります。 これは簡単な例ですが、ライブラリを扱い始めると複雑な型が出現し、「解決に時間かかりそうだしとりあえず any に アサーション してみるか・・・ｵｯなんか動いたしこれでいいか！」となるかもしれません。 これは当たり前ですが、実行時エラーの温床になっていくだけです。なんか動いているのは JavaScript のエンジンが賢いだけで、そのうちどこかで崩壊してしまうかもしれません。 TypeScriptに限った話ではありませんが、知らずに使用すると危険なコードを書いてしまう可能性があります。 後述する学習媒体では、このような機能を正しく知り、効果的に使用する方法を学ぶことができます。 JavaScript , TypeScriptの学習媒体について では具体的にどうやってTypeScript, JavaScript に入門していくかです。 TypeScriptはとても人気な言語で、資料もたくさんあります。 JavaScript はとても歴史が長いので、古くなってしまった資料なども多くあります。 実際私も資料探しにはかなり苦戦しました。資料が多く、これから入門する方からすればどれがいいかわからないのかは当たり前です。 様々な 有識者 の方にご教授いただき、私が JavaScript , TypeScriptに入門し、学習していく中で特に参考になったwebサイトや書籍を紹介します。 JavaScript 入門したい方におすすめ JavaScript Primer jsprimer.net これから JavaScript に入門したい、または JavaScript を雰囲気で書いているという方におすすめのwebサイトです。 JavaScript を体系的に、かつ実践的な使用方法を学ぶことができます。 これ1つで JavaScript の基本はマスターできます。 JavaScript の書籍をいくつか読みましたが、 JavaScript Primerは本当に必要なことだけを抽出し、実際の業務で役立つTipsなどが豊富です。 例えば、変数と宣言の項で var の使用は避けるべきということが書いてあったりします。普段 JavaScript を書いている方からすると当たり前かもしれませんが、入門者的には エビデンス 付きで説明してくれている教材はありがたく、とても貴重です。 もちろん非同期処理についても深く触れられており、 Promise や async/await への理解にとても役立ちました。 私も実務では MDN と併せてバイブルにしていました。 応用編ではVanilla JSでアプリケーションを構築する話で、 コンポーネント の実装まで行っていますが、TypeScriptの学習という点においてはあまり関係が無いので進めるかどうかは好みです。 ちなみに、書籍版もありますので、紙で読みたいという方はこちらもどうぞ。 https://www.amazon.co.jp/dp/4048930737/ www.amazon.co.jp TypeScript Playground www.typescriptlang.org JavaScript Primerで JavaScript の基本はマスターできたと思うので、次はTypeScriptに入門していきましょう。 言語の勉強をするためにはやはり自分の手で書くのが一番です。書くためには実行環境を用意しなければなりませんが、そんなときは TypeScript Playground を利用することで、即座に実行環境を用意することができます。 このPlaygroundの良いところは、TypeScriptの コンパイル 結果などを右のペインに表示してくれることです。 TypeScriptが コンパイル された結果どのような JavaScript が出力されるのか確認することができます。 enum など、 JavaScript にない機能がどのように コンパイル されるかを見るだけでもとても勉強になります。 ※ 以降のタイトルにナンバリングしていますが、番号の順に読んでいくのが良いのではないかと筆者は勝手に思っています。 1. TypeScript Deep Dive typescript-jp.gitbook.io 鉄板のWebサイトです。TypeScript commiterの方が書いてくださっているドキュメントで、有志の方たちによって日本語化もされています。 基本的にTypeScriptへの入門向けの解説が多いため、とても分かりやすく、基本的な使い方はここで学べるようになっています。 また、テストツールや周辺ライブラリへの簡単な解説などもあるので、発展的な内容や実務で使う際への足がかりになります。 TypeScriptに入門する上では欠かせないwebサイトです。 2. 実践TypeScript www.amazon.co.jp TypeScript Deep Dive を学習したあなたはTypeScriptの入門レベルを既に超えています。 次の一歩に踏み出すためには実践TypeScriptがおすすめです。 実践TypeScriptでは、実際にTypeScriptとVueやReactなどのライブラリを使用してアプリケーションのコードを書く際に非常に参考になる一冊です。 導入編と実践編の2章構成で、TypeScript Deep Diveを学習された方なら導入編の方の最初の方はサクサク進めることができるんじゃないかと思います。導入編の後半では、 Conditional Type や Mapped Type といった難易度の高い型 組み込み型の使用方法 の項目があります。TypeScript固有の書き方なので少しとっつきにくいですが、これらは型の操作やライブラリの型を読む上では欠かせないので、しっかりキャッチアップしたいです。 実践編になるとVueとReact、ユニバーサ ルフレ ームワークであるNuxt, NextへのTypeScriptの導入方法、それぞれの フレームワーク においてTypeScriptで良いコードを書くためのノウハウが書かれています。 サンプルコードが非常に豊富で、Vueの章なんかでは結構困りがちなVuexの型付けを筆者の方がほぼイチから書いているサンプルなどがあり、非常に参考になります。 3. プログラミング TypeScript https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0TypeScript-%E2%80%95%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8BJavaScript%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA-Boris-Cherny/dp/4873119049 www.amazon.co.jp TypeScriptの言語仕様が体系的にまとまった一冊です。 最初はプリミティブ型のような簡単な項目から、前項でも少し出てきた Conditional Type や Mapped Type のより詳細を知ることができます。最後半になるとASTの API (TypeScriptのコードを解析する仕組み)まであります。 ASTはアプリケーションのコードを書く上では必要ないと思いますが、興味がある方は更に学習を深めてみてはいかがでしょうか。 実践TypeScriptと比較して、こちらは言語仕様がかなり詳しく書かれています。 また、こちらにも現場で役に立つTipsや デザインパターン が載っているため、実践TypeScriptと併せて読むのがおすすめです。 4. Type Challenge github.com Type Challenge では、型の実装にチャレンジすることができます。 ここまで学ばれた方はおそらくアプリケーションのコードを書くのに不自由ないレベルの知識は得られたのではないでしょうか。アプリケーションのコードでは自分で複雑な型を自作するというのは結構稀ではありますが、0では無いのでしっかり書けるようになりたいところです。 ここまで学習された方はおそらく、 Mapped Type や Conditional Type のような独自の記法でもなんとなく読めるし、ライブラリの型も結構イケる！くらいのレベル感だと思っています。ですが、実際書けるかどうかはあまり自信がありません。私もそうでした。 そんなあなたは Type Challenge に挑戦してみましょう。 まず、READMEの Challenges から取り組む問題を選択します。 Take The Challenge のラベルを押すとPlaygroundが開くので、問題で指定されている要件の型を作成しましょう。 テストケースも用意されているので、解答のチェックも簡単です。 問題をとき終わったらIssueを見てみましょう。他の方の解答を見ることができます。自信がある解答を作ることができた！という場合は自分の解答をIssueに投げてみましょう。後半の複雑な型の解法は自分が全く思いつかなかったものもあったりするのでとても面白いと思います。 最後に いかがでしたでしょうか。おそらくここまでやり込めば、TypeScriptの言語仕様はかなりキャッチアップできたのでは無いかと思います。その後はVueやReactのようなライブラリを学んだり、webpackなどの周辺ツールについて学ぶのも良いと思います。 私自身、TypeScriptどころか JavaScript 入門者でしたが、これらの書籍やwebサイトのおかげでTypeScriptへ入門し、業務で開発を行うことができました。この記事がTypeScript入門への足がかりになっていれば幸いです。また、学習する中でフロントエンドへの興味がより強くなったので、今後は各種ライブラリの学習や、 OSS へのコミットを目指してやっていこうと思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com *1 : Stack Overflowの開発者の中で愛されている言語ランキング などでも2位を獲得しています。 *2 : 本来はキーのチェックやエラーのチェックを行う必要がありますが簡略化のため省略しています

こんにちは、株式会社 ラク スで先行技術検証や、ビジネス部門に技術情報を提供する取り組みを行っている技術推進課に所属している鈴木（ @moomooya ）です。 ラク スの開発部ではこれまで社内で利用していなかった技術要素を自社の開発に適合するか検証し、ビジネス要求に対して迅速に応えられるようにそなえる 「 開 （ か ） 発の 未 （ み ） 来に 先 （ せん ） 手をうつプロジェクト（通称：かみせんプロジェクト）」 改め 「技術推進プロジェクト」 というプロジェクトがあります。 2020年度は通年で「無停止リリース」について取り組んでいるので、途中ではありますが紹介したいと思います。 今までの記事はかみせんカテゴリからどうぞ。 tech-blog.rakus.co.jp 今回の目標 「無停止リリース」の定義 考慮するポイント セッション管理 リリース中のログインセッション維持 古いバージョンのログインユーザーのみ強制ログアウト可能 アプリケーション構成 リリース中の処理トランザクションの正常終了 リリース前後のサーバーが混在している状態でいずれの環境にアクセスしていても正常に処理される 入力パラメータの過不足がある場合に異常な更新が行われない DB運用 どのタイミングでもクエリが消失せずに整合性が保たれること どのタイミングでもDBにアクセスできること まとめ 今後の計画 今回の目標 弊社のサービスはBtoBのサービスであることもあり、多くのユーザーが営業時間外となる夜間に計画停止を行ってのリリースを行っていました。 しかし今後サービス規模の増大にともない、極力停止しないリリースが求められることや、エンジニアの夜間作業を避けるために、リリース時も極力サービスを止めない構成を模索します。 「無停止リリース」の定義 完全な無停止を目指すと大規模な分散システムにするなどコスト面で厳しい構成になると考えられたので、あくまで「ユーザーの利便性を極力損なわずにサービスを提供し続ける」という方針で検討しました。 具体的には以下のような要件を挙げています。 ユーザビリティ の確保 ログインセッションが切られることなくログイン状態を維持できる 操作内容が「なかったこと」にならないようにする システム的な完全無停止は目的にしない 内部的な停止は局所化極小化を目指す 影響がでる部分についてUI側でフォロー可能な構成を目指す プログレスバー を出せるようにする 処理完了ではなく処理受付としてレスポンスを返す など 考慮するポイント 「 ユーザビリティ を低下させない」要件をもう少し噛み砕くと以下のような要素にまとめられると考えました。 セッション管理 リリース中もログインセッションが切断されない 古いバージョンのログインユーザーのみ強制ログアウト可能 アプリケーション構成 リリース中も処理 トランザクション が正常終了する リリース前後のサーバーが混在している状態でいずれの環境にアクセスしていても正常に処理される 入力パラメータの過不足がある場合に異常な更新が行われない DB運用 どのタイミングでもクエリが消失せずに整合性が保たれること どのタイミングでもDBにアクセスできること セッション管理 セッション管理において リリース中もログインセッションが切断されない 一定期間経過後に古いバージョンのログインユーザーのみ強制ログアウト可能 という要件を満たす方法を考えました。 リリース中のログインセッション維持 まず「リリース中にログインセッションが切断されない」ということを逆に考えると、なぜリリース作業においてログインセッションが途切れるのかという話になります。 もっともシンプルなログインセッションの保持方法は アプリケーションサーバ ーに保持させることですが、この場合は保持している アプリケーションサーバ ーを再起動してしまうとログインセッションが失われます。 そこでログインセッションの保持を アプリケーションサーバ ーの外に出す必要があります。データベースサーバーに保持することで アプリケーションサーバ ーの再起動の影響を受けない データベースサーバーの再起動でも（正副サーバーのデータを同期しているので）消失しない とリリース中のログインセッション維持は実現できそうです。 ただ実現は出来るものの、ログインセッションの破棄処理をアプリケーションに実装する必要が生まれたり、頻繁なデータベースアクセスが発生してしまうという課題が生まれます。 これらを解決するためにRedisをセッションサーバーとして採用することを検討しました。 クラウド ネイティブな構成では（ AWS だとElastiCacheを利用して）比較的よく採用される構成だと思います。 Redisを採用するモチベーションとしては以下の点が挙げられます。 インメモリデータベースなので小さなデータを頻繁にアクセスする用途に最適 key- value 型のDBだけどログインセッションの維持に使うなら十分 レコードに TTL : Time To Live(有効期限)を設定することで自動破棄ができる TTL は更新も可能なので「最終アクセスから n 秒」という指定が容易 DBで保持したときのように 冗長化 も可能 古いバージョンのログインユーザーのみ強制ログアウト可能 バージョンが混在しても利用可能にはするものの、いつまでも古いバージョンからのアクセスを有効にし続けるわけにもいきません。いずれは古いバージョンのログインセッションを破棄する必要があります。ただしこのときも新しいログインセッションには影響を出したくありません。 これを実現するために「ログイン処理をどのバージョンで行ったか」を記録することで実現できると考えました。セッションデータにアプリケーションバージョンのデータを残すのです。 " (token_id) ": { " user_id ": xxxxxxxxx , " app_ver ": 1.0 } のようなイメージです。 これによりセッションサーバーから { "app_ver": 1.0 } のログインセッションを削除するなどして、指定したバージョンでログインセッションを維持しているユーザーのみを強制ログアウト可能にします。 アプリケーション構成 アプリケーション構成において リリース中も処理 トランザクション が正常終了する リリース前後のサーバーが混在している状態でいずれの環境にアクセスしていても正常に処理される 入力パラメータの過不足がある場合に異常な更新が行われない という要件を満たす方法を考えました。 リリース中の処理 トランザクション の正常終了 こちらは言い換えると処理中 トランザクション の完了を待ってからリリース処理をしてあげればいいわけなので、リク エス ト振り分けを止めて待ってあげればいいです。 HTTP Proxyで振り分け制御をするわけですが、リリースの開始判断は人間がやるとしても振り分け制御自体は自動でやりたいです。実現するための機能としては振り分け先ノードのステータスを判断するActive Health Checkと、リク エス トが完了するまで切断しないDraining Modeを使ってあげれば実現できます。 当初この部分に nginx を利用しようとしていましたが、Active Health CheckとDraining Modeがnginx+（有償版）でないと使えないということがわかりました。システム構成的にコストが見合わなかった 1 ので、別のソリューションを探すことにしました。そこで Apache を確認してみると無償版でも利用できるということだったので、 Apache を採用しています。 なお Apache はnginxの普及以降「重い」という印象がありましたが、 Apache 2.4系を評価し直してみると既に改善されているようだったことも今回の採用につながっています。 リリース前後のサーバーが混在している状態でいずれの環境にアクセスしていても正常に処理される API バージョンを複数サポートするという話ですが、試行錯誤した結果サンプル実装では以下のような ソースコード の構成にしています。 / |--app.py # Webアプリ本体。`v1/api.py`を読み込み |--README.md |--requirements.txt |--v1/ # APIバージョン:1 のソースコードディレクトリ | | # v3 を作るときに削除される想定 | |--__init__.py | |--api.py # エンドポイントを定義 | |--assets.py # 実処理モジュール | |--auth.py # 実処理モジュール | |--users.py # 実処理モジュール |--v2/ # APIバージョン:2 を作るときは v1 をコピーして改修 ウェブアプリケーション フレームワーク に用意されている、パスを指定して ルーター モジュールを読み込む機能（Path Groupとか呼ばれる機能。FlaskだとBlueprint）でバージョンごとのモジュールを読み込みます。 # app.py #... # バージョンごとのAPI読込 from v1.api import api as api_v1 app.register_blueprint(api_v1, url_prefix= '/api/v1' ) # ... # v1/api.py from flask import Flask, Blueprint, jsonify # 実処理モジュールの読み込み from . import auth from . import users from . import assets api = Blueprint( 'api' , __name__) # エンドポイントの定義 @ api.route ( '/signup' , methods=[ 'POST' ]) def post_signup (): return auth.post_signup() # ... API バージョンが変わる際にはまるごとコピーして別バージョンとして読み込む形になるので重複コードが発生しますが、今回は2バージョン（最新と1世代前）までしかサポートしない想定だったので許容しています。無理に重複コードをなくすことよりも、2世代前のサポートが外しにくくなることを避けることを優先しました。 入力パラメータの過不足がある場合に異常な更新が行われない 無停止でアップデートを行うと、 API リク エス トに必要なパラメータが異なったバージョンのアプリケーションにWebクライアントが接続されるケースが出てきます。この場合にも不正なデータ更新は行われないようにしなければなりません。 必須パラメータが不足するような組み合わせであればエラーになるため、データの更新は行われません。エラー後に最新バージョンの取得と再ログインを促せれば操作を続けられます。 エラーも発生させたくない場合があると思いますが、その場合は API バージョンを変えて2バージョン受け付けられる状態にすることになります。このとき2バージョンの差異をアプリケーションとDBで吸収しなければなりませんが、どんな場合に吸収できて、どんな場合に吸収できないのかは今後検証していきたいと思います。 DB運用 DB運用について どのタイミングでもクエリが消失せずに整合性が保たれること どのタイミングでもDBにアクセスできること 再起動中やフェールオーバー中もアクセスできること ブロックすることなく DDL 操作を行えること という要件を満たす方法を検討しました。 どのタイミングでもクエリが消失せずに整合性が保たれること こちらに関しては新たなクエリリク エス トだけを止めて処理中のクエリが完了するまでリリース担当エンジニアが見て判断する方針にしました。 現状の運用だと、リリースの際に完全に 無人 であることは考えにくく 機械的 に検知する必要性を感じなかったためにこの方針にしています。 新たなクエリリク エス トの停止についてはDBプロキシである MariaDB MaxScale（以下、MaxScale）を利用して振り分け処理を行う設計にしています。 MaxScaleにはフェールオーバー時にもアプリケーション側からの再試行を伴わずに、 トランザクション を喪失しないよう遅延、再試行を行う機能があります。 どのタイミングでもDBにアクセスできること こちらは想定している条件下では「書き込み」に関しては短時間の停止を避けられませんでしたが、片系が再起動中などでフェールオーバーが発生している場合などでも「読み込み」は常時可能になるよう設計を進めています。 MaxScaleによって参照クエリと更新クエリの分離、DBサーバーノードの管理・ 冗長化 を行います。 冗長化 されたDBサーバー クラスタ を構成することで、無停止で実行できない SQL 操作や DBMS 自体のアップデートがあった場合にもローリングアップデートで実行し、ダウンタイムを極力短縮する予定です。 この際「書き込み」はマスタのフェールオーバー中だけ実行できなくなりますが、「読み込み」は停止することなく常に実行できる見込みです。 また、DBに関しては DDL でどこまでロックされるかもシステム全体のアクセス可否に影響してきます。 MariaDB や MySQL は同じ OSS -DBである PostgreSQL と比較してオンライン DDL の対応で先行しています。 PostgreSQL ではカラム追加などのテーブル定義の変更操作は DML を（SELECTでさえ）阻害してしまいますが、 MariaDB / MySQL は多くの操作がオンライン DDL に対応しているため、テーブル定義の変更を伴う場合でもアクセスできることが期待できます。ただし、この手の機能は往々にして運用上の制約がつきものなので引き続き実際に動作させて検証していきたいと思います。 まとめ セッションサーバーにRedisを採用して外部化 HTTPプロキシに Apache を採用 アプリケーションは最大2バージョンに対応 DBMS は MariaDB を採用し、MaxScaleで クラスタ 化 MariaDB のオンライン DDL を活用 今後の計画 ここまでのお話はそれぞれの要素のカタログスペックを元にした設計です。これらが実際に期待した通りの挙動を実現してくれるのかどうかについては今年度後半で検証を進めていきたいと思います（検証結果も2021年3月ごろにブログで共有予定です）。 環境の構築 テスト項目、テスト方法の検討 本当に無停止でリリースできるか検証 （余力があれば） PostgreSQL の場合にどこまでできるか検証 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com 1ノード年間10万円。ノード数が多くなりがちなので厳しい料金体系でした。 ↩

はじめに こんにちは、tuq376sです。 今回は vim について紹介していきたいと思います。 vim というとあまり馴染みのない方には、他のエディタを使うよりも複雑で難しいという印象があるかもしれません。 しかし、あれもこれも覚えなければ基本的な使い方さえできないというわけでもないのです。 ということで、本記事では vim のインストールからファイルの基本操作までを取り扱っていきます。 はじめに インストール手順 vimインストーラーの入手とインストール 環境変数の登録 まずはここから、入力と保存 vimのモード カーソル移動と入力・保存 ファイル編集の基本操作 コピー&ペースト 取り消し&やり直し おわりに インストール手順 とにもかくにもインストールから。 今回は例として Windows にインストールする手順で行っていきます。 vim インストーラ ーの入手とインストール まずは vimの公式サイト へアクセスします。 左側のメニュー欄にダウンロードがあるので、そこから配布ページへ。 対象のOSを選べるので Windows を選択して、 インストーラ ーをダウンロードします。 ダウンロードが完了したら インストーラ ーを起動して、オプションの選択などは全てデフォルトの状態でインストールします。 完了すると、デスクトップにショートカットが作成されます。 ここから起動できるのは gvim と呼ばれる GUI で動く vim です。本記事では コマンドプロンプト から CUI の vim を使用していきますが、コマンドや操作の仕方は CUI で動く vim と変わりないようなので好みの方を利用すると良いと思います。 環境変数 の登録 vim を CUI で利用する場合は忘れずに 環境変数 も設定しておきましょう。 「コン トロール パネル > システムとセキュリティ > システム 」から、システムの詳細設定を選んで、 「 環境変数 」を選択、開いた画面の「システム 環境変数 」からPathを選択した状態で「編集」を押します。 環境変数 名の設定が開いたら「新規」を選んで、 vim .exeの場所を登録します。 デフォルトなら C:\Program Files (x86)\Vim\vim82 (82はバージョン名)にあるはずです。 環境変数 が登録できたら、 コマンドプロンプト を立ち上げて vim と入力してみましょう。 以下のような画面が立ち上がればセットアップ完了です！ まずはここから、入力と保存 では実際に vim を使っていきましょう。 vim は立ち上げただけの状態で文字の入力ができません。これは、 vim は起動された時は ノーマルモード だからです。 入力を行うには挿入モードに切り替える必要があります。 まずはこのモードからざっくりと説明していきます。 vim のモード vim にはいくつかのモードが存在し、モードによって操作できることが変わります。 よく使うものは以下の4つです。 ノーマルモード vim を起動したときの状態であり、全ての中心にあるモードです。 各モードに移動するには ノーマルモード を経由します。操作している間に意図しないモードになってしまったときは Esc を押すことでここに戻ることができます。 カーソルの移動、コピーやペーストなどができます。 挿入モード 文字を入力するためのモードです。このモードにいる間は各キーは文字入力として扱われます。 ノーマルモード から i , a などで切り替えることができ、どのキーで切り替えるかで入力位置が変わります。 コマンドモード ファイルの保存、 vim の終了などいろいろな操作を行うためのモードです。 ノーマルモード から : で切り替えます。コマンドを内容を入力したら Enter で実行します。 ビジュアルモード 主に範囲選択に関するモードで、範囲を選択したり、選択した範囲のコピーなどができます。 ノーマルモード から v などで切り替えることができます。慣れてきたら活用したいモードです。 初めはあまりピンとこないと思いますので、ひとまずはこんなモードがあるという認識だけで構いません。 カーソル移動と入力・保存 モードについて雰囲気がわかったところで、ようやくファイルの編集です。 まずは文字を入力するため、挿入モードに切り替えましょう。挿入モードに切り替えるキーは数ありますが、以下の3つを覚えれば困ることはありません。 挿入モードに切り替えたときの動作 キー カーソルの位置から文字を入力できる i カーソルの右側から文字を入力できる a カーソルの行末で改行した状態から文字を入力できる o これらのキーを入力すると挿入モードに切り替わり、 i , a , o も文字入力として認識するようになります。 しかし、挿入モードの間は入力位置を移動することができません。 入力位置を切り替えるためには一度 Esc を押して ノーマルモード に戻る必要があります。 ノーマルモード では、以下のキーでカーソルを移動できます。 移動先 キー ← h → l ↑ k ↓ j n行目 :n (10行目なら :10 ) 行頭 ^ 行末 $ n行目に移動する方法は厳密には コマンドモードで移動したい行数を入力する という動作になりますが、ここはあまり明確に意識することも少ないと思いますので、以降コマンドモードの入力は 先頭にコロンが付いているノーマルモードでの入力 として扱っていきます。 これで、任意の位置にカーソルを移動して文字の入力ができるようになりました。 次はファイルの保存と vim の終了方法です。以下の入力で行えます。 操作内容 キー 保存する :w vim を終了する :q 保存して vim を終了する :wq または ZZ 名前を付けて保存する :w ファイル名 ファイル編集の基本操作 ここまでできれば、ファイルの編集という最低限の機能は問題なく行えると思います。 けれどただ文字を入力できるだけではエディタとしては物足りないもの。どんなエディタにもあるような機能はもちろん vim にも備わっているので、こちらも紹介していきます。 コピー&ペースト 編集に必須機能その１、コピーとペースト。 vim ではこれを行う機能を「ヤンク」「プット」とそれぞれ呼びます。 まずは ノーマルモード だけで行える方法から見ていきます。 操作内容 キー n行をヤンクする nyy (10行コピーする場合は 10yy ) n行を削除する ndd (10行削除する場合は 10dd ) ヤンクしたものをプットする p ヤンクと削除は対象の行数を指定するようになっていますが、1行の場合は数字を省略して yy , dd とすることができます。 また、 dd については削除というよりは切り取りに近く、 yy したものと同様に p で貼り付けることができます。 しかしこれでは行単位でしか操作ができません。他のエディタならマウスを使って任意の範囲をコピーするところですが、 vim ではこれをビジュアルモードを使って行います。 ビジュアルモードは挿入モードと同じく、切り替えるキーによって動作が異なります。 ビジュアルモードに切り替えたときの動作 キー カーソル位置から範囲選択を行える v カーソル位置から矩形選択を行える Ctrl-v カーソル行から行選択を行える V ビジュアルモードでは ノーマルモード と同じカーソル移動を行えます。 v なら移動した位置までの文字を、 Ctrl-v なら移動した位置を対角に持つ短形範囲を、 V なら移動した位置までの行範囲をといった具合に範囲が選択されます。 選択した範囲に対して行える主な操作は以下です。 操作内容 キー 選択範囲をヤンクして ノーマルモード に移行する y 選択範囲を削除して ノーマルモード に移行する d 選択範囲を削除して挿入モードに移行する c 各入力はそれぞれモードを移行するようになっています。 c ならば挿入モードに移行し、任意の入力を行った後は通常の挿入モードと同じく Esc で ノーマルモード に戻ることができます。 これで、行単位でなくともヤンクとプットが行えるようになりました。 取り消し&やり直し 本記事最後となるのは、編集に必須機能その２、操作の取り消しとやり直しについてです。 それぞれの操作は以下のようになります。 操作内容 キー 操作を取り消す u もう一度操作する(取り消した操作を再度行う) Ctrl-r vim では複数の操作を戻ることができるため uu と入力することで2つ前の操作まで戻ることができます。 ところが vim の元で基本的な操作が同じエディタのviでは、戻ることのできる操作は1つのみです。viを使う際は uu と入力すると「操作を取り消す→取り消した操作を再度行う」という動作になるので注意が必要です。 おわりに 今回はインストールからということもあって、本当に基本的な操作だけを列挙する形になりました。 vim はもっと便利でバリエーション豊富なコマンドや操作、カスタマイズできる部分もたくさんあって、それゆえに推している方というのは多いのだと思います。 しかし自分の記憶を思い起こしてみると、使い始めてしばらくは「iで文字を入力してZZで保存して閉じる」くらいしか覚えられなかったというのもあって、本記事では「最低限のファイル編集に困らない程度」を目指すことにしました。 またいつか、今度はもう少し便利な使い方の紹介もしてみたいなと思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

はじめに はじめまして、tsudachantanです。 現在、様々なサイトで広く使われている SVG ファイル。 CSS とともに SVG が必須になるともいわれ、デザイナーやフロントエンジニアの方にはお馴染みかもしれません。 今回は改めて、具体的にどのようなフォーマットのファイルなのか、特徴と変換方法について紹介していきます！ 目次 はじめに SVGファイルが普及しているワケ SVGファイルとは？ JPEG、PNG画像形式との違い メリット 拡張性・汎用性が高い！ フィルター、アニメーション表現が可能 デメリット SVGファイルの作成方法 PNGをSVGに変換してみよう SVGファイルをPNGに変換する方法 おわりに 　 SVG ファイルが普及しているワケ Webブラウザ 最大手の IE は長らく SVG に対応しておらず、 サポートされているブラウザが少ないことから普及しませんでした。 しかし現在、 IE9 をはじめ対応するブラウザが増えたことにより多くのホームページが活用しています。 また、近年はレスポンシブデザインと フラットデザイン が主流となっており、それらと相性のいい SVG ファイルの需要は高まっています。 SVG ファイルとは？ SVG （Scalable Vector Graphics)は画像フォーマットの一種です。 SVG ファイルはその名( Vector )の通り、ベクタ形式のデータです。 画像ファイルである SVG ですが、 XML に準拠しており、 テキストエディタ で編集することも可能です。 JPEG 、 PNG 画像形式との違い 画像ファイルとしてよく用いられる JPEG 、 PNG ですが、これらはラスタ形式の画像ファイルです。 ラスタ形式は点（pixel）で画像を表現しています。 こちらの PNG 画像をご覧ください。 PNG 画像 どんどん拡大していくと…… 拡大した PNG ギザギザとドットのようなものが見えてきますね。 画質を上げるためには点の数、つまり解像度を上げていく必要があり、データの容量も大きくなります。 編集を重ねると画像が劣化しやすく、ファイルサイズも大きくなりがちです。 一方、 SVG ファイルはベクタ形式の画像ファイルです。 ベクタ形式とは、画像や文字などの2次元情報を数値化して記録しており、ブラウザがその場で描画してくれます。 解像度を気にすることも、拡大縮小でデータが劣化することもありません。 主に、アイコンや地図、平面的なイラストなどを作成するときにはベクタ形式が採用されています。 メリット 拡張性・汎用性が高い！ Scalableの文字通り、伸縮可能性に優れた SVG は、後から色・サイズ・文字の変更が容易です。 レスポンシブなサイトを構築する際に、 PNG などのラスタ形式だとデ バイス 毎に複数のバージョンを作成する必要がありますが、 ベクタ形式の SVG を使えば1つのファイルで対応できます。 また、 SVG は Retinaディスプレイ *1 にも対応しています。 これにより、Webページのレスポンス向上も期待できるでしょう。 拡大縮小による画像の劣化もないため、レスポンシブデザインとの相性も良い画像ファイルです。 フィルター、アニメーション表現が可能 SVG ファイルは、 CSS や JavaScript 、動画作成ソフトなどを使ってアニメーションを表示することができます。 今までアニメーションといえばGIFを photoshop や Flash で作るのが一般的でしたが SVG はGIFでは扱えない透過も利用できます。 （参考） ics.media www.e-webseisaku.com デメリット とはいえ SVG ファイルも万能ではありません。 SVG ファイルは写真のような複雑な陰影を表現する画像には不向きです。 風景などの画像を数値として扱うためには、膨大な量の計算が必要になるからです。 また、現在はほとんどのブラウザで対応していますが、まれに未対応のブラウザも存在します。 SVG ファイルの作成方法 SVG ファイルの作成方法は、 ベクター 画像を作成できるツールを利用することです。 一般的には Adobe Illustrator や Adobe Photoshop といった画像編集ソフトを利用します。 illustrator などを使って、 SVG にしたいベクタ形式のファイルを開いて、拡張子を. svg にして保存します。 もちろん、 テキストエディタ で作成することも可能です。 PNG を SVG に変換してみよう 元データがベクタ形式でない場合も、 SVG に変換することは可能です。 ブラウザ上で完結する変換ツールを使って変換してみましょう。 検索するといろいろ出てくるのですが、今回は　 Online Image Vectorizer 　を使用していきます。 www.vectorizer.io 対応しているフォーマットは PNG 、 BMP 、 JPEG です。 また、 SVG だけでなくEPS、DXFといった ベクター 形式に変換することも可能です。 時間当たりの変換できるファイル数に制限がありますが、基本的に無料で使えます。 使い方はいたってシンプルで、変換したいファイルをアップロードするだけで SVG ファイルに変換してくれます。 vectorizer 左が変換前の PNG ファイルで、右が変換後の SVG ファイルです。 vectorizer-拡大 拡大してみると、ラスタ形式の PNG ファイルはギザギザしていますね。 無事、 ベクター 形式に変換されていることがわかります。 サイズは 7KB→2KB になりました！ SVG ファイルの中身 変換された SVG ファイルの中身はこんな感じ。 ちなみに、先述したように SVG が苦手とする写真のような複雑な描画の PNG ファイルを変換すると…… vectorizer-写真 左が変換前の PNG ファイル、右が変換後の SVG ファイルです。 ぱっと見た感じ悪くないですが、 179 KB→542KB と、かなりサイズが大きくなっていしまいました…。 vectorizer-写真-拡大 こちらも拡大するとこんな感じ。 変換した SVG ファイルのほうは、いくら拡大してもギザギザになることはありません。 ただ、複雑な色の濃淡を数式で表現するとなると、やはりデータ量が膨大になってしまいます。 SVG ファイルを PNG に変換する方法 SVG ファイルを PNG に変換したいときはこちら SVG to PNG – SVGファイルをネット上でPNGに変換する svgtopng.com 使い方は簡単、 PNG に変換したい SVG ファイルをアップロードするだけです。 一度に20個まで変換でき、まとめてZIPでダウンロードすることも可能です。 おわりに 様々な種類がある画像フォーマットの中から、 SVG の特徴を簡単に紹介させていただきました。 適切な画像フォーマットを選択できるよう、ぜひ本記事を参考に変換してみてください。 　 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 https://rakus.hubspotpagebuilder.com/visit_engineer/ rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com *1 : Apple 製品の高画素密度ディスプレイ

こんにちは、開発エンジニアの amdaba_sk（ ペンネ ーム未定）です。 昨年度まで、 ラク スの開発部ではこれまで社内で利用していなかった技術要素を自社の開発に適合するか検証し、ビジネス要求に対して迅速に応えられるようにそなえる 「 開 （ か ） 発の 未 （ み ） 来に 先 （ せん ） 手をうつプロジェクト（通称：かみせんプロジェクト）」というプロジェクトがありました。本年度からは規模を拡大し、「技術推進プロジェクト」と名称を改めて再スタートされました。 本記事では、昨年度かみせんプロジェクトとしての最後のテーマとなった 機械学習 テーマの延長として 2020 年度上期に行った「AutoML ツールの調査と評価」について取り組み結果を報告します。 （ちなみに 機械学習 テーマは前年度から継続していたこともあり、上期で終了となってしまいました。残念……） なお過去の報告記事はかみせんカテゴリからどうぞ。技術推進プロジェクトでは 機械学習 だけではなく、他にもいろいろなテーマで検証を行っています。どれも面白そうなテーマですので是非そちらの報告もご覧ください。 tech-blog.rakus.co.jp はじめに 検証の方法 データセット モデル学習の従来手法について 調査対象とした AutoML サービス 調査対象とした AutoML ライブラリ 結果 モデル学習の作業時間と性能 従来手法 AutoML クラウドサービス AutoML ライブラリ 考察と所感 従来手法と AutoML AutoML サービスとライブラリの比較 AutoML サービス間の比較 Amazon SageMaker AutoPilot Google Cloud AutoML Tables IBM Watson Studio AutoAI Microsoft Azure AutoML AutoML ライブラリ間の比較 auto-sklearn H2O.ai TransmogrifAI AutoKeras まとめ 参考 はじめに AutoML とは、簡単に言えば 機械学習 のプロセスを自動化し、デー タセット と最重要視する評価指標を指定するだけで最適なモデルを構築する仕組みのことです。 機械学習 を使用して良いパフォーマンスを得るためには、通常、データ収集、特徴量エンジニアリング、モデルや アルゴリズム の選択といった作業に人手による試行錯誤が必要となり、コストがかかります。AutoML では、Figure 1 に示すように 機械学習 アプリケーションの構築パイプラインの一部を自動化することで、手動でのモデル学習よりも高い性能を持つ 機械学習 モデルの効率的な構築を目指します。 Figure 1. 機械学習 アプリケーションの典型的なパイプラインと AutoML の活用範囲（Q. Yao, et al., "`Taking the Human out of Learning Applications: A Survey on Automated Machine Learning`" より引用） 今回の技術推進プロジェクトでは、そんな便利そうな AutoML を、公開されたデー タセット に対して実際に使ってみることで、効率的にモデル学習ができることを確かめました。また AutoML を提供するサービス、ライブラリを複数試用し、それぞれを比べてみました。 検証の方法 特定のデー タセット について、選定したサービスやライブラリを用いて実際にモデル学習を行い、モデル学習のための作業時間と得られたモデルの性能について調べました。また同じデー タセット について、従来の方法でモデル学習 スクリプト を作成し、その作業時間と得られたモデルの性能を AutoML を使用した場合の結果と比較しました。 デー タセット 検証のためのデー タセット として Bank marketing デー タセット を用いました。 このデー タセット は クリエイティブ・コモンズ CC0: Public Domain のライセンスで利用できるオープンデータであり、テーブル形式になっています。 今回検証の対象としたサービスの中にはデー タセット の最小サイズが設定されているものがあり、有名な Titanic dataset や Iris flower dataset はサイズが足りずに使うことが出来ませんでした。Bank marketing は 後述する Google Cloud AutoML Tables の チュートリアル で用いられているデー タセット であり、サイズも充分であるためこれを用いました。 Bank marketing デー タセット は ポルトガル のとある銀行が行った ダイレクトマーケティング キャンペーンの結果です。職業、年齢などの顧客データとキャンペーン商品を購入したかどうかが記録されています。 Table 2 に示したようにクラスごとのデータ件数にはかなりの偏りがあるデータです。 データ件数 :: 45211 件 Table 1 . カラム情報 No. カラム名 データタイプ 説明 1 age 数値 年齢 2 job カテゴリ 職業の種類 3 marital カテゴリ 婚姻状態 4 education カテゴリ 学歴 5 default カテゴリ 債務不履行 の有無 6 balance 数値 年平均残高（ユーロ） 7 housing カテゴリ 住宅ローンの有無 8 loan カテゴリ 個人ローンの有無 9 contact カテゴリ 連絡先端末の種類 10 day 数値 月の最後の連絡日 11 month カテゴリ 年の最後の連絡月 12 duration 数値 最後の連絡時の通話時間（秒） 1 13 campaign 数値 キャンペーン中の連絡回数 14 pdays 数値 前回のキャンペーンでの最後の連絡からの経過日数 15 previous 数値 前回のキャンペーンでの連絡回数 16 poutcome カテゴリ 前回のキャンペーンでの結果 17 y バイナリ 顧客が定期預金に加入したかどうか（1 : 非加入、2 : 加入） Table 2 . クラスごとの件数比率 クラス 件数 比率 1 39922 0.88 2 5289 0.12 モデル学習の従来手法について 従来手法として、以下の工程を経てモデル学習と性能指標の算出を行う スクリプト を自作しました。 デー タセット の読み込み データの前処理 使用するデータ列の取捨選択 カテゴリデータのダミー変数化 数値データの整形 学習データとテストデータの分割 モデル学習 学習データに対する CV 検証を用いたハイパーパラメータ調節 調整されたハイパーパラメータでの学習データによる学習 テストデータによる性能測定 言語は Python 3 を用いました。ライブラリとして Pandas、scikit-learn を用い、Jupyter Notebook として作成しました。デー タセット は CSV ファイル形式で作成しておき、 スクリプト 内で読み込んで使用しました。 また 4 のモデル学習の際、いくつかの アルゴリズム で学習したモデルの性能を比較し、最も高い性能を示した アルゴリズム を結果として採用しました。その際の候補となる学習 アルゴリズム は scikit-learn のアルゴリズム選定チートシート をもとに第一候補を決め、加えてよく用いられる代表的な アルゴリズム を選びました。最終的に試した アルゴリズム は以下の通りです。 線形 サポートベクターマシン （ SVM ） k 近傍法（KNN） 線形判別分析（LDA） ランダムフォレスト分類器（ RFC ） 多層 パーセプトロン 分類器（ MLP ） ガウス モデル単純 ベイズ 分類器（GNB） 今回使用するデー タセット は前述の通り偏りが大きいため、ハイパーパラメータ調整と各 アルゴリズム でのモデルの性能比較において正答率ではなく F1 値のマクロ平均を最適化の基準として用いています。 調査対象とした AutoML サービス クラウド サービスを使って AutoML を行う例として、以下の 4 つのサービスを試しました。 Amazon SageMaker AutoPilot Google Cloud AutoML Tables IBM Watson Studio AutoAI Microsoft Azure AutoML AutoML の実行の際、最適化の基準となる指標には F1 値ないしそれに近い用途の指標を用いました。他の設定は各サービスのデフォルトの設定のまま行っています。サービスによっては F1 値が選択できないものもあり、そのためサービスごとに異なる指標が最適化の基準として用いることになりました。 調査対象とした AutoML ライブラリ ライブラリを使って AutoML を行う例として、以下の 4 つのライブラリを試しました。 auto-sklearn H2O.ai TransmogrifAI AutoKeras ライブラリについてもサービスの場合と同様、最適化の基準となる指標には F1 値ないしそれに近い用途の指標を用いました。他の設定は各ライブラリのデフォルトの設定のままで行っています。ライブラリによっては F1 値が選択できないものもあり、そのためライブラリごとに異なる指標が最適化の基準として用いることになりました。 結果 モデル学習の作業時間と性能 Table 3 に今回試した各手法での作業時間（時間）、最良モデルの アルゴリズム 、基準とした評価指標、最良モデルの正答率、F1 値マクロ平均をまとめました。以下、この結果をひとつずつ見ていきます。 Table 3 モデル学習の結果。「Kaggle 投稿」は本検証で用いたものと同一のデー タセット に対して Kaggle に投稿された従来手法でのモデル学習結果。H. Yamahata, "Bank Marketing + Classification + ROC ,F1,RECALL..." より引用 エントリー 作業時間 (h) 基準指標 最良 アルゴリズム 正答率 F1 値マクロ平均 従来手法 自作 スクリプト 2.5 F1 値マクロ平均 GNB 0.80 0.58 Kaggle 投稿 - 適合率 KNN 0.90 0.88 AutoML クラウド サービス Amazon SageMaker AutoPilot < 1.0 F1 値マクロ平均 XGBoost N/A 0.71 Google Cloud AutoML Tables < 0.5 AUC ROC GDBT 0.90 0.65 IBM Watson Studio AutoAI < 0.5 F1 値マクロ平均 XGB 分類器 0.88 0.70 Microsoft Azure AutoML < 0.5 加重 AUC ROC VotingEnsemble 0.89 0.61 AutoML ライブラリ auto-sklearn < 2.0 F1 値マクロ平均 Weighted Ensemble 0.86 0.68 H2O.ai < 1.0 AUC ROC StackedEnsemble 0.87 0.72 TransmogrifAI < 2.0 AUC ROC XGBoost 0.90 0.65 AutoKeras < 0.5 F1 値マクロ平均 深層学習 0.89 0.72 従来手法 従来手法で スクリプト を自作した場合の作業時間はおよそ 2.5 時間でした。この時間には Python の書き方の復習や Pandas および scikit-learn の API を確認する時間も含まれています。それによって得られた最良のモデルは ガウス モデル単純 ベイズ 分類器によるもので、正答率 が 0.88、F1 値マクロ平均は 0.58 でした。 AutoML クラウド サービス AutoML サービスを用いた場合の作業時間にはアカウントの開設などの周辺作業のための時間は含めていませんが、AutoML の実行に関する操作や設定項目の確認は作業時間に含まれています。 Amazon SageMaker AutoPilot を使った場合の作業時間はおよそ 1 時間以内でした。また得られた最良のモデルは XGBoost によるもので、F1 値マクロ平均は 0.70 でした。最適化の基準として F1 値マクロ平均 を用いました。正答率は画面から確認する術を見つけられませんでした術 Google Cloud AutoML Tables を使った場合の作業時間はおよそ 30 分以内でした。また得られた最良のモデルは勾配ブーストディシジョンツリーモデル（GDBT）によるもので、正答率 が 0.90、F1 値マクロ平均は 0.65 でした。最適化の基準として AUC ROC を用いました。 IBM Watson Studio AutoAI を使った場合の作業時間はおよそ 30 分以内でした。また得られた最良のモデルは XGB 分類器によるもので、正答率 が 0.88、F1 値マクロ平均は 0.70 でした。最適化の基準として F1 値マクロ平均を用いました。 Microsoft Azure AutoML を使った場合の作業時間はおよそ 30 分以内でした。また得られた最良のモデルは StackEnsemble によるもので、正答率 が 0.89、F1 値マクロ平均は 0.61 でした。最適化の基準としては加重 AUC ROC を用いました。 AutoML ライブラリ AutoML ライブラリを用いた場合の作業時間にはライブラリの実行環境を構築するための時間は含まれていませんが、ライブラリの使い方の確認などの調査の時間は含まれています。 auto-sklearn を使った場合の作業時間は 1 - 2 時間程度でした。また得られた最良のモデルは正答率 が 0.86、F1 値マクロ平均は 0.68 でした。最適化の基準として F1 値マクロ平均を用いました。なお auto-sklearn は アルゴリズム として常に Weighted Ensemble を用いるようになっています。得られた最良のモデルでアンサンブルに使われた アルゴリズム とそれぞれの重み係数は Table 4 のようになっていました。 Table 4 auto-sklearn の最良モデルにおける Weighted Ensemble の詳細 重み アルゴリズム 0.82 sgd 0.04 random_forest 0.02 random_forest 0.02 random_forest 0.02 random_forest 0.02 random_forest 0.02 gradient_boosting 0.02 adaboost 0.02 extra_trees H2O.ai を使った場合の作業時間はおよそ 1 時間以内でした。また得られた最良のモデルは StackedEnsemble によるもので、正答率 が 0.87、F1 値マクロ平均は 0.72 でした。最適化の基準として AUC ROC を用いました。 TransmogrifAI を使った場合の作業時間は 1 - 2 時間程度でした。また得られた最良のモデルは XGBoost によるもので、正答率 が 0.89、F1 値マクロ平均は 0.65 でした。最適化の基準として F1 値マクロ平均を用いました。 AutoKeras を使った場合の作業時間はおよそ 30 分以内でした。また得られた最良のモデルは正答率 が 0.89、F1 値マクロ平均は 0.72 でした。最適化の基準として F1 値マクロ平均を用いました。 考察と所感 従来手法と AutoML 自作 スクリプト の従来手法で得られたモデルと AutoML で得られたモデルを比較した場合、正答率や F1 値マクロ平均といった性能指標で AutoML で得たモデルの方が良い性能を示しました。一方で Kaggle に投稿されたモデルと AutoML で得られたモデルを比較すると、AutoML で得たモデルの性能は F1 値マクロ平均で大きく劣っていました。AutoML による 機械的 なモデル探索によりある程度の性能までは達成できることが分かりますが、いまだそこには限界があり、経験を積んだデータサイエンティストには敵わないようです。ただし この記事 によると、他のデー タセット 、問題設定によっては Kaggle 投稿のモデルよりもよい性能を示すモデルが構築されるようです。AutoML にも得手不得手があることが分かります。 モデル学習の実行までにかかる作業時間を比較すると、従来手法は AutoML サービスを利用した場合の 2 倍以上、AutoML ライブラリを用いた場合の 1.5 倍程度の作業時間を要しています。従来手法でも scikit-learn の API を用いてかなりの部分が自動化されているとは言え、 アルゴリズム の選定やハイパーパラメータ候補セットの検討、それらの記述にどうしても時間がかかりました。一方で AutoML では従来手法で時間を要したそれらの工程が自動化されており、作業時間が短縮できています。 AutoML サービスとライブラリの比較 AutoML で得られたモデルの内、 クラウド サービスを利用して構築したものとライブラリを利用して構築したものを比較すると、正答率や F1 値マクロ平均といった性能指標では大きな差は見られませんでした。 モデル学習の実行までにかかる作業時間を比較すると、 クラウド サービスを利用した場合はライブラリを利用した場合の半分程度の時間で作業を終えることが出来ています。 クラウド サービスは多くの場合、データ前処理、特徴量エンジニアリングの自動化もなされており、サービスが受け付けられる形式でデー タセット を用意すれば、後は数ステップの GUI 操作によってモデル学習を実行できます。一方でライブラリではデータ前処理部分は自分でコードを記述し実装しなければならず、その点で クラウド サービスよりも時間がかかりました。 クラウド サービスとライブラリでは、モデル性能や作業時間の違いはさほど大きな問題ではなく、むしろ学習の実行環境にこそ違いがあるように思われます。 クラウド サービスであれば数クリックで計算リソースの確保ができます。予算があれば高性能な インスタンス を選択し短時間で学習を終わらせることもできるでしょう。一方でライブラリは実行環境は自前で用意することになります。より速い計算速度、より大きなメモリが必要となった場合に即調達できるとは限りません。 一方でデー タセット を クラウド 上にアップロードすることが諸事情によりどうしても許容できないとなった場合は、 クラウド サービスはそもそも使用できません。この場合はライブラリを使うことで対処することになると考えられます。 AutoML サービス間の比較 AutoML サービスで得られたモデル同士を比較した場合、正答率はどれも 0.9 程度とあまり違いは見られず、F1 値マクロ平均で見ても 0.1 程度の差しかありませんでした。モデル学習の実行までにかかる作業時間も、どのサービスを用いたとしても 30 分か 1 時間以内には終了しており顕著な差は見られません。 ただ各サービスごとに機能のラインナップや画面デザインに違いがあり、プロジェクトやチームごとの重視するポイントによって最適な選択は異なると考えられます。以下ではこれらのサービスの長所や短所の所感を述べます。 Table 5 . 機能比較表 / 学習時の機能; ○：対応、△：一部対応、×：非対応 サービス 前処理の自動化 統計情報の表示 特徴量の自動作成 交差検証 Amazon SageMaker AutoPilot ○ △ ○ ○ Google Cloud AutoML Tables ○ ○ ○ ○ IBM Watson Studio AutoAI ○ △ ○ ○ Microsoft Azure AutoML ○ ○ ○ ○ Table 6 . 機能比較表 / 評価時の機能; ○：対応、△：一部対応、×：非対応 サービス 特徴量の寄与率表示 結果の可視化 学習済みモデルのダウンロード API 接続先の作成 Amazon SageMaker AutoPilot △ △ ○ ○ Google Cloud AutoML Tables ○ ○ ○ ○ IBM Watson Studio AutoAI ○ ○ ○ ○ Microsoft Azure AutoML ○ ○ ○ ○ Amazon SageMaker AutoPilot Amazon SageMaker AutoPilot は UI からできることがあまりなく、ローコード・ノーコードという観点からは使いにくさを感じました。しかしコードを読み書きする前提に立てば、AutoML の実行コードが記述された Notebook が生成されるため、解釈性やカスタマイズ性が高いとも言えます。検証作業時に確認方法のわからなかった正答率など最適化基準ではない性能指標も、Notebook を変更すれば実行ログから確認できるだろうと思われます。データサイエンティストとして知識を持った人をターゲットに、その作業を簡略化することを目的とするサービスだと感じました。 長所 AutoML 実行用の Notebook が生成される Notebook を編集することで細かなカスタマイズができる Notebook には説明が豊富に記載される（英語） 短所 データが 1000 件以上必要 デー タセット の管理が SageMaker 単体で完結できない（S3 が別途必要） UI からできることが少なく、作業フローがわかりにくい 手動でリソースを閉じる必要がある（閉じ忘れると課金される） Amazon SageMaker AutoPilot はプレビュー版であり、使えるリージョンが限られる Google Cloud AutoML Tables Google Cloud AutoML Tables は GCP でいくつか提供されている AutoML サービスの一つで、テーブル形式のデータを扱うことに特化した AutoML サービスです。デー タセット のインポート、学習の設定、実行、モデルの評価の確認、デプロイまで GUI で操作できます。各画面もシンプルな構成になっており、わかりやすいと感じました。ただシンプルな反面、モデルの構造など画面上から確認できる情報は他サービスと比べ少ないように思います。 長所 同じモデルで判定の 閾値 を変えた場合の性能指標が見られる 処理完了をメールで通知してくれる ドキュメントが丁寧かつ豊富 短所 データが 1000 件以上必要(分類ならさらにクラスごとに 20 件以上必要) モデルの内部構造を確認するために別サービス（Cloud Logging）を利用して生のログを見なければならない Google Cloud AutoML Tables はベータ版 IBM Watson Studio AutoAI IBM Watson Studio AutoAI は今回対象としたサービスの中では唯一正式サービスとして提供されています。デー タセット のインポート、学習の設定、実行、モデルの評価の確認、デプロイまで GUI で操作できます。各画面もシンプルな構成になっており、わかりやすいです。 学習ジョブの進行状況やモデルがツリー状の UI でグラフィカルに表現されている点が特徴的で、学習のどの段階でどのようなモデルが試されたのかを視覚的に把握できるようになっています。また特徴量エンジニアリングでどのカラムにどのような変換がなされたのかが確認でき、学習済みモデルを説明するための情報が豊富だと感じました。一方で特徴量エンジニアリングの変換では非合理的な変換が行われているように感じる部分もあり、不安になってしまうことがあります。 長所 グラフィカルな表現でわかりやすい 特徴量エンジニアリングの詳細が確認できる IBM Watson Studio AutoAI は正式サービス 短所 特徴量の変換が非合理的に思えることがある Microsoft Azure AutoML Microsoft Azure AutoML もデー タセット のインポート、学習の設定、実行、モデルの評価の確認、デプロイまで GUI で操作できまする。デー タセット の指定から学習の実行までは、フロー状の UI で設定ステップが示されており、今回対象としたサービスの中で最もわかりやすいと感じました。逆にモデルの評価画面は初見では少しわかりにくいと感じるかもしれません。表示される情報は豊富だが、ほしい情報がどこにあるのかが少し探しにくいように思えます。 また特徴的な機能として、学習に使用したデー タセット の品質を評価してくれるデータガードレールという機能があります。 Amazon SageMaker AutoPilot や Google Cloud AutoML Tables のようなデー タセット に関する制約ではなく、デー タセット に含まれる欠損値やクラス不均衡といった問題を検出し警告してくれることで、デー タセット の品質改善に役立ち、かつ実行の手軽さも保っていると思います。 長所 学習実行条件を細かく指定できる デー タセット 自体の問題を検出してくれる モデル性能評価のグラフが豊富 短所 出力されるモデル性能が他サービスと比べ少し悪い Microsoft Azure AutoML はプレビュー版 AutoML ライブラリ間の比較 AutoML ライブラリで得られたモデル同士を比較した場合も、 クラウド サービスの場合と同じく性能的な違いはあまり見られません。モデル学習の実行までにかかる作業時間も、どのライブラリを用いたとしても 2 時間以内には終了しました。 ただやはり各ライブラリごとに特徴があり、プロジェクトやチームごとの重視するポイントによって最適な選択は異なると考えられます。以下ではこれらのライブラリの長所や短所の所感を述べます。 Table 7 . 機能比較表 / 学習時の機能; ○：対応、△：一部対応、×：非対応 ライブラリ 前処理の自動化 統計情報の表示 特徴量の自動作成 交差検証 auto-sklearn △ × × 〇 H2O.ai △ × × 〇 TransmogrifAi △ × △ 〇 AutoKeras 〇 × × 〇 Table 8 . 機能比較表 / 評価時の機能; ○：対応、△：一部対応、×：非対応 ライブラリ 特徴量の寄与率表示 結果の可視化 サマリの表示 auto-sklearn × × △ H2O.ai 〇 〇 〇 TransmogrifAi 〇 × 〇 AutoKeras × × △ auto-sklearn auto-sklearn は scikit-learn をベースにしており、インターフェースも基本的に scikit-learn と同じです。そのため scikit-learn に慣れた人間であれば最もとっつきやすくなっていると思われます。 一方で auto-sklearn は入力データが全て数値でなければならないという制約があり、文字列データは全て手動で数値に変換してからでないと学習を実行できないため、他のライブラリに比べて手軽に試すにはややハードルが高いと感じました。 長所 scikit-learn と同じインターフェースなのでわかりやすい 短所 文字列データを受け付けない（カテゴリデータは数値に変換が必要） アンサンブルに使われた アルゴリズム の取得方法が公式に用意されていない（プライベート API を使えば可能） H2O.ai H2O.ai は Java で実装されたバックエンドを Python 、R、 REST API 、 Java 、 Scala などから操作する 機械学習 プラットフォームです。ライブラリという枠とはすこし異なりますが、 Python などで スクリプト を作成することになるという点でライブラリの一つとして取り上げました。 AutoML ライブラリとして見た場合、他のライブラリに比べ評価指標の取得・可視化が簡単で、情報量が多いという点が特徴です。モデルの評価指標を調べる場合にも、コード 1 行で各種評価指標と混同行列が出力できます。 ROC 曲線や特徴量重要度などのプロットは、他のライブラリであれば matplotlib 等の別ライブラリを用いることになりますが、H2O.ai の場合は単体で簡単にプロットが可能です。 長所 複数の言語の SDK がある 結果の可視化が簡単 短所 scikit-learn ほど流行っていない TransmogrifAI TransmogrifAI は Salesforce が開発している オープンソース の AutoML ライブラリで、 Apache Spark 上で AutoML を実行できるライブラリです。実装言語は Scala です。 ビッグデータ 解析などで使用されている Spark 上でそのまま AutoML を構築できるのが強みとされています。サポートする機能は特徴量エンジニアリング、モデル選択、ハイパーパラメータチューニングと、AutoML の基本的な機能は網羅しています。 使用した所感としては、ライブラリというよりもむしろ言語ならではのメリットが大きいと感じました。デー タセット の型や特徴量のタイプの指定などで型システムの恩恵を受けることができることや、 IDE の支援を手厚く受けられます。型が定義されていることでデー タセット の持つプロパティが補完される点は、 Python にはない利点であると思います。実行環境の構築には多少手間がかかりますが、Spark をバックエンドにした Notebook である Apache Zeppelin を使用すれば、Jupyter Notebook のような形で開発を進めることも可能です。チームやプロジェクトの置かれた環境次第では十分に選択肢に入るだろうと感じました。 長所 特徴量触るのが簡単 結果の説明がやさしい 短所 細かいチューニングを行うにはライブラリに習熟する必要がある それなりにボイラープレートは多い Spark を使うので環境構築はそれなりに面倒 AutoKeras AutoKeras は深層学習のライブラリである Keras のハイパーパラメータチューニングを自動化するライブラリです。今回試した他のライブラリとは異なり深層学習であるため、得られる情報が少ないという点が気になりました。また深層学習であるがゆえにモデルの説明可能性などは考慮されていないようです。実際にどのような処理をしているかなどは意識しないように作られているように感じました。一方、試行回数を増やすことで探索を続けることができるため、リソースや時間があればある程度正確なモデルは作成できる可能性があるとも思われます。 長所 少ないコードで実装できる 短所 精度を上げるにはそれなりの前処理が必要 特徴量エンジニアリングはしてくれない 出力されるメトリクスが少ない 学習結果のばらつきが多い まとめ 公開されたデー タセット を用いて学習 スクリプト の自作と AutoML によるモデル学習とを行い、両者の作業時間、生成される学習モデルの性能を比べました。また AutoML を提供するサービス、ライブラリを複数試用し、それぞれの長所や短所を調べました。 AutoML は従来手法と比べ、やはり作業効率の点で大きく優れていることが分かりました。一方で構築されるモデルの性能については、デー タセット や問題設定によって得手不得手があるだろうことが分かりました。目的変数のサンプル数に偏りがあるようなデー タセット では、ある程度までは AutoML で従来手法よりもよい性能のモデルが得られますが、作業者にデータ分析の十分なスキルがある場合は従来手法でモデルを構築したほうが良い性能のモデルが得られるようです。 AutoML を利用する場合、 クラウド サービスとライブラリを比べると クラウド サービスの方がグラフィカルな UI で直観的に操作できる分、作業時間はかかりません。また クラウド サービスは特徴量エンジニアリングまで自動化されていることが多いですが、ライブラリではデータの前処理部分を自前で実装しなければならず、その点でも作業時間に差があります。 参考 Q．Yao, M．Wang, Y．Chen, W．Dai, Y.-F．Li, W.-W．Tu, Q．Yang, Y．Yu, "Taking the Human out of Learning Applications: A Survey on Automated Machine Learning", arXiv preprint arXiv :1810.13306, 2019. S．Moro, R．Laureano and P．Cortez. "Using Data Mining for Bank Direct Marketing: An Application of the CRISP-DM Methodology. In P. Novais et al. (Eds.)", Proceedings of the European Simulation and Modelling Conference - ESM’2011, pp. 117-121, Guimarães, Portugal, October, 2011. EUROSIS. Bank Marketing + Classification + ROC,F1,RECALL... (参照日 2020-09-23). Awesome-AutoML (参照日 2020-09-23). AutoML がすごいと聞いたので色々使って比べてみた (参照日 2020-09-23). その機械学習プロセス、自動化できませんか？ (参照日 2020-09-23). Qiita のスパム狩りをしたら AutoML に仕事を奪われた件 (参照日 2020-09-23). AutoML vs AutoML (参照日 2020-09-23). Choosing the right estimator (参照日 2020-09-23). Amazon Sagemaker Autopilot | Amazon Sagemaker (参照日 2020-09-23). AutoML Tables | AutoML テーブル | Google Cloud (参照日 2020-09-23). IBM Watson Studio - AutoAI - 日本 | IBM (参照日 2020-09-23). 自動 ML/AutoML とは - Azure Machine Learning | Microsoft Docs (参照日 2020-09-23). auto-sklearn — AutoSklearn 0.9.0 documentation (参照日 2020-09-23). Home - Open Source Leader in AI and ML (参照日 2020-09-23). TransmogrifAI - AutoML library for building modular, reusable, strongly typed machine learning workflows on Spark from Salesforce Engineering (参照日 2020-09-23). AutoKeras (参照日 2020-09-23). エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

はじめに こんにちは、YSです。 今回は、Node.js＋ フレームワーク 「Express」を使用して作成されたwebアプリケーションで 静的コンテンツを gzip 配信できるように独自で対応した件について共有させていただきます。 はじめに 基本知識 Node.jsとは？ Expressとは？ Expressのインストール方法 プロジェクトの作成 Expressの使い方 プロジェクトの構成について 本題 サービスの構成 要件 検討 仕様 サービス起動時の処理 静的コンテンツがリクエストされた際の処理 その他 サンプルコード lib/public_cache.js routes/publicCache.js app.js まとめ 基本知識 まず前提となるNode.jsと フレームワーク 「Express」について簡単に解説させていただきます。 こちらは初心者向けの説明となりますので、不要な方は読み飛ばしてください。 Node.jsとは？ Node.jsは、サーバサイドの JavaScript です。 一般的な JavaScript は、クライアントのブラウザ上で動作するものでしたが、 Node.jsでは JavaScript がサーバサイドで動作し、 WEBサービス 等を立ち上げることができます。 Node.jsはシングルスレッドで実行され、非同期処理が行えます。 これらの特性により、負荷に強く大量アクセスによるC10K問題が起こらないように設計されています。 C10K問題とは、サーバサイドの処理において、クライアント数が約1万台に達するとメモリの不足・プロセス数の上限・ファイル ディスクリプタ の上限・ コンテキストスイッチ のコスト増加等が発生し、リソースが不足し処理性能が劣化してしまう問題です。 Node.jsは次のような仕組みにより、負荷に強い仕組みが実現されています。 シングルスレッド スレッドを単体にすることにより、大量のプロセスやファイル ディスクリプタ を発生させないようになっています。 イベントループ イベントをキューとして扱い、順番に処理していくモデルです。 ノン ブロッキング I/O データのI/O処理の完了待ちによるブロックを発生させずに並列に処理できます。 Expressとは？ Node.js用のWebアプリケーションの MVC フレームワーク です。 Node.jsで一番メジャーな フレームワーク であり、Node.jsのWebアプリケーションに関する書籍や記事などはExpressありきで書かれている事が多いです。 Expressはガッツリとした多機能な フレームワーク ではなく、Webアプリケーションを開発するにあたって必要な部品が揃った軽量な フレームワーク であり、自由度も高いです。 Expressのインストール方法 次のコマンドでインストールできます。 ※npmはNode.jsのパッケージ管理システムです。 npm install express --save プロジェクトの作成 いちから自作でプロジェクトを作成することもできますが、大変なので express-generator を使用して雛形を作成します。 次のコマンドでインストールできます。 npm install express-generator -g プロジェクトの作成はexpressコマンドにプロジェクト名を指定し実行するだけです。 express 【プロジェクト名】 Expressの使い方 1. express-generatorを使用して雛形を作成します。 ※プロジェクト名は「testApp」とします。 express testApp 2. 関連パッケージのインストールを行います。 cd testApp npm install 3. サービスを立ち上げ方です。 npm start プロジェクトの構成について express-generatorにより、次のようなファイルが作成されます。 testAppフォルダ配下の構成 public/ public/javascripts/ public/images/ public/stylesheets/ public/stylesheets/style. css routes/ routes/index.js routes/users.js views/ views/error.jade views/index.jade views/layout.jade app.js package. json bin/ bin/www app.js メインファイルです。 アプリケーション全体の処理や設定を記述します。 public/ 静的コンテンツを格納する ディレクト リです。 ファイルを設置するだけで、自動的に静的コンテンツとして利用できます。 routes/ ルーティングファイルを格納する ディレクト リです。 ルーティングファイルでは、URL毎の処理やビューファイルの呼び出し等を行います。 views/ ビューファイルを格納する ディレクト リです。 bin/ 起動ファイル「www」が格納されています。 express-generatorにより、シンプルな構成のindex画面を返す雛形が自動生成されます。 シンプルな雛形なので、アプリケーション独自のフォルダやファイルを追加しカスタマイズすることが可能です。 本題 さて、ここからが今回の本題になります。 私が開発に携わっているWEBアプリケーションのサービスで、通信量を減らしたいという要望があがり 静的コンテンツを gzip 圧縮して配信することになりました。 サービスの構成 ・ロードバランサ 　Nginx ・WEBアプリケーション 　Node.js＋ フレームワーク 「Express」 要件 1. 静的コンテンツを gzip 圧縮し配信したい。 2. リク エス トの度に gzip 圧縮するとCPUのコストがかかるので、あらかじめ gzip 圧縮しておきリク エス ト時に返すようにしたい。 3. 今後の開発・運用での作業ミスの防止のためにも、 gzip 圧縮されたコンテンツは意識せずとも最新の内容が反映されるようにしたい。 検討 これらの要件を踏まえ、パッと対応できそうなものは次のようなものでした。 ロードバランサ等のMW側の機能を利用する。 Node.jsのnpmパッケージでExpressの gzip 配信機能を導入する。 しかし実際に調査を進めてみると、単純に静的コンテンツを gzip 圧縮された形式で配信するだけなら対応できますが すべての要件をかなえるものは見つからず、断念しました。 ※2年ほど前の話ですので、現在は要件を満たすロードバランサの機能やNode.jsのnpmパッケージがあるかもしれません。 検討した結果、すべての要件を満たすために静的コンテンツの gzip 圧縮配信を独自で実装することになりました。 仕様 Expressの静的コンテンツ配信機能とは別に、独自で静的コンテンツを配信する仕組みを設ける。 Expressの静的コンテンツフォルダ「public」と同レベルに「public_cache」というフォルダを作成し、配下のファイルを gzip 圧縮して配信できる仕組みを設ける。 サービス起動時の処理 サービス起動時に静的コンテンツを取得し gzip 圧縮する。 無圧縮・ gzip 圧縮された2種類のコンテンツデータをサービスのメモリ上に保持する。 アプリケーションのサービス起動時にフォルダ「public_cache」内のファイルの情報を取得する。 ファイルを gzip 圧縮したデータを作成する。 サービスのメモリ上に無圧縮のデータと gzip 圧縮したデータを格納する。 静的コンテンツがリク エス トされた際の処理 静的コンテンツへのリク エス トが来た際に、サービスのメモリ上に保持されたコンテンツデータをレスポンスデータとして返す。 リク エス トヘッダ「accept-encoding」が gzip に対応していたら、 gzip 圧縮したデータを返す。 gzip 非対応であれば無圧縮のデータを返す。 その他 今回あわせて下記のような仕様を盛り込みました。 ・静的コンテンツのリアルタイム反映 コンテンツが最新化されると、次回リク エス ト時に最新ファイルの内容でコンテンツデータを最新化するようにしています。 これにより、サービス停止なしで静的コンテンツに関する軽微な不具合対応等が行えるようになっています。 ・セキュリティ対策 自動的に JavaScript のコメントを除去するようにしており、開発者向けのコメントを外部に見られることを防いでいます。 サンプルコード ※サンプルですので、Headerの設定等の詳細なコードは省いています。 ※静的コンテンツのリストは「lib/public_cache.js」の変数「files」に定義しています。 　ここについては、フォルダ「public_cache」内の情報から自動的にリストにすることも可能だと思います。 lib/public_cache.js 静的コンテンツを読み込み管理するためのライブラリ ※libはサンプル独自の ディレクト リ const fs = require('fs'); const path = require('path'); const zlib = require('zlib'); const publicCachePath = module.exports.appPath + '/public_cache/'; // ※現時点ではUTF-8固定にしております。 let files = { 'hoge.html': {}, 'js/jquery.js': {}, 'js/hoge.js': {}, 'css/main.css': {}, 'css/icon.css': {} }; module.exports.files = files; // ファイルを読み込み保持する function setFileData (fileName) { let mimeType = ''; // 拡張子の判断 let ext = path.extname(fileName).toLowerCase(); if (ext) { // 一文字目に「.」が付いているので除去する ext = ext.substr(1); } // mime type 設定 switch (ext) case 'js': mimeType = 'application/javascript;'; break; case 'css': mimeType = 'text/css;'; break; case 'html': case 'htm': mimeType = 'text/html;'; break; default: mimeType = 'text/plain;'; break; } mimeType += ' charset=UTF-8'; let data = fs.readFileSync(publicCachePath + fileName, 'utf-8'); if (ext == 'js') { // JSの場合は、行コメントを取り除く data = data.replace(/^\s \/\/. $/gm, ''); } let gzipData = zlib.gzipSync(data, {level: 6}); let fileStats = fs.statSync(publicCachePath + fileName); files[fileName] = { plain: data, gzip: gzipData, mtime: fileStats.mtime, mime_type: mimeType }; } // ファイル情報を読み込む function loadFileData () { for (let fileName of Object.keys(files)) { setFileData(fileName); } } module.exports.loadFileData = loadFileData; // ファイル情報を取得する function getFileData (fileName) { let fileStats = fs.statSync(publicCachePath + fileName); if (String(fileStats.mtime) != String(files[fileName].mtime)) { // 更新日時が違っている場合には読み込み直す setFileData(fileName); } return files[fileName]; } module.exports.getFileData = getFileData; routes/publicCache.js 静的コンテンツのルーティング const express = require('express'); const publicCacheLib = require('../lib/public_cache.js'); const router = express.Router(); router.get('/', function (req, res, next) { try { let fileName = req.baseUrl.replace(/^\//, ''); let fileData = publicCacheLib.getFileData(fileName); if (fileData) { res.set({ 'Content-Type': fileData.mime_type, 'Last-Modified': fileData.mtime.toUTCString() }); let acceptEncoding = req.headers['accept-encoding']; if (acceptEncoding.match(/\bgzip\b/)) { // gzipでレスポンス res.set({'content-encoding': 'gzip'}); res.send(fileData.gzip); } else { // 通常データでレスポンス res.send(fileData.plain); } res.end(); } else { res.render('error'); } } catch (e) { throw e; } }); module.exports = router; app.js app.jsに静的コンテンツ用の処理を追記する。 // 静的コンテンツのルーティング let publicCache = require('./routes/publicCache'); // 静的コンテンツを読み込み管理するためのライブラリ let publicCacheLib = require('./lib/public_cache.js'); // 静的コンテンツのリストからルーティングを設定 let files = publicCacheLib.files; for (let fileName of Object.keys(files)) { app.use('/' + fileName, publicCache); } // 静的コンテンツの読み込み publicCacheLib.loadFileData(); まとめ 今回、独自で静的コンテンツの gzip 圧縮配信を実現することができました。 また、コンテンツをメモリ上にキャッシュしたことにより ディスク読み込み負荷なくレスポンスを返す事ができます。 今回の対応を行うと、静的コンテンツを読み込んで管理するという特性を利用して、読み込み時に内容を加工することができます。 こちらを利用して、サンプルコードでは JavaScript の行コメントを削除しています。 独自実装することでパフォーマンスの劣化が生じる懸念もありましたが 速度テストの結果、特に低下は見られませんでした。 また、サービスのメモリ使用量の増加も微々たるものでした。 注意点としては、今回の対応は大容量の静的コンテンツがある場合には メモリを大量に消費するためお勧めできません。 実際にサービスで実装した際には、容量が少なく圧縮効果のあるHTML/ CSS / JavaScript 形式のファイルのみ対応を行いました。 画像ファイル等は圧縮しても効果が薄く容量も大きいため、Express既存の静的コンテンツとして扱っています。 ※Expressの静的コンテンツ配信の仕組みと併用可能です。 今回のような独自の仕様を フレームワーク に組み込めるという自由度の高さも、 フレームワーク 「Express」の魅力だと思います。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

Spring Boot入門 こんにちは。高照です。 Webアプリケーションを作成する際にどうすれば作成できるのか、またはSpring Boot聞いたことあるけど、どういうものなのかよくわからない！ という方に向け今回は簡単にWebアプリケーションを作成できる フレームワーク のSpring Bootについてご紹介します。 ちなみに私は普段の業務では SAStruts という フレームワーク を使用していますがSpring Bootを使って見て便利だと思いこの記事を書くことにしました。 フレームワーク とは まずSpring Bootの前に フレームワーク とは何かをご存じでしょうか。 フレームワーク をなんとなく聞いたことがある、なんとなく分かるという方もいるかもしれませんが、具体的にどんなものなのか知らないという方が多い印象です。ぜひこの機会に覚えていただければと思います。 フレームワーク とは「あらかじめシステムを作成する際に必要な機能が用意された枠組み」のことです。 今回題材にするSpring BootはWebアプリケーションを作成する際に必要な機能があらかじめ多数用意されています。 Spring Bootとは Spring Bootとは Spring Framework をベースとした Java を使用してWebアプリケーションを作成するための フレームワーク です。 Spring Framework が登場した当時は SAStruts という フレームワーク が普及していました。そのため、 Spring Framework は設定のしづらさと日本語ドキュメントの少なさから SAStruts と比較すると普及していないというのが現実でした。しかし、そのような難しい設定部分をある程度省略できるように改良されたものがSpring Bootです。 あらかじめSpring Bootに用意されている機能を使用しつつ比較的簡単にWebアプリケーションを作成することができるようになりました。 また、Spring Bootは数ある Java フレームワーク の中でも非常に人気の高い フレームワーク です。 そのため今回説明は省略しますが、多くの機能を プラグイン のように後から追加することも可能です。 ここで何の プラグイン を追加すればよいのかを、たくさんある プラグイン から選択することが非常に難しいポイントでもあります。 Spring Bootは現在コミュニティも活発で情報も手に入りやすいので習得すると大きなアドバンテージになると思います。 Spring Bootでできること 簡単にWebアプリケーションを作成することができます。 Spring Bootは MVC モデルというものが使用されます。 MVC とは3つの頭文字を取ったものです。 それぞれの名称と役割は以下の通りです。 M : Model → 具体的な処理 V : View → ユーザに表示する画面 C : Controller → ユーザからリク エス トを受け付ける このように役割ごとにプログラムを記述することで簡潔にWebアプリケーションを作成することができます。 前提条件 ここからは実際にプログラムを書きながら説明していきたいと思います。 また、今回はSpring Bootの解説となるため Java とHTMLをある程度知っていることが前提となります。 以下が今回筆者の使用するソフトウェアです。 IntelliJ IDEA Java OpenJDK 11 プロジェクトの作成 ここからは簡単なWebアプリケーションを実際に作成していこうと思います。 Spring Bootのプロジェクトは Eclipse や IntelliJ などの IDE からテンプレートを作成できますが、今回は 公式Webサイト からプロジェクトのテンプレートを作成しダウンロードしようと思います。 公式のプロジェクト作成サイト : Spring Initializr 今回項目は以下の通りにします。 Project : Maven Project Language : Java Spring Boot : 2.3.5 Group : com.example Artifact : demo Name : demo Description : 任意 Pacage name : com.example.demo Packaging : War Java : 11 さらに ADD DEPENDENCIES... CTRL + B を選択します。 以下のようなダイアログが出たらSpring Webを選択します。これにより MVC を使用できるようになります。またローカルで実行するための Tomcat をデフォルトで使用できるようになります。 再び ADD DEPENDENCIES... CTRL + B を選択しThymeleafも追加します。 Thymeleafは動的にHTMLを生成することができる様々なプロパティを追加することができます。Webアプリケーションを作成する際に非常に役立ちます。 以上の操作を行うと以下のようになっていると思います。 再度確認後、画面下部の GENERATE CTRL + ↲ を選択します。 すると、demo.zipというファイルがダウンロードされます。このファイルがSpring Bootプロジェクトのテンプレートです。 demo.zipを解凍し IDE でプロジェクトを開きます。 コードの編集と実行 まずはSpring Bootプロジェクト内にパッケージを作成していきます。 一般的に作成するパッケージは以下の5つです。(今回controllerのみ使用します。) controller : 画面遷移などの画面制御を行うクラスを格納 domain : データベースから取得するためのテータ構造を定義したクラスを格納 form : 画面のフォームを取得するためのデータ構造を定義したクラスを格納 repository : データベースに直接アクセスを行うクラスを格納 service : 具体的な内部処理を行うクラスを格納 続いて、作成したcontrollerパッケージの中にtestControllerクラスを作成します。このクラスでリク エス トを受け付けます。 クラスの 命名規則 としてポピュラーなのは [クラスの役割]Controller や [クラスの役割]Form とつけられることが多いです。 作成すると以下のようなファイル構造になります。 次に初めに表示する画面を作成します。 resources/templates 内にindex.htmlを作成します。 index.html初めに表示されるトップページとして 命名 されることも多いですが名前はindex以外でも問題はありません。 作成すると以下のようなファイル構造になります。 ここからコードを実際に記述していきます。 まずはtestControllerクラスから記述します。 package com.example.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping( "/test" ) public class testController { @RequestMapping( "/index" ) public String index(){ return "/index" ; } } testControllerについての解説 @Controller はコントロー ラク ラスであることを示して、主に画面遷移の制御を行います。 @RequestMapping はアクセスされるURLを指定します。今回は localhost :8080/test/index でアクセスできるように指定しています。 return "/index" は resources/templates からの .html を抜いたパスを返しています。 続いてindex.htmlを記述していきます。 <!DOCTYPE html> < html lang = "jp" xmlns:th= "http://www.thymeleaf.org" > < head > < meta charset = "UTF-8" > < title > Spring Boot入門 </ title > </ head > < body > < h1 > Spring Boot Home </ h1 > </ body > </ html > xmlns:th=" http://www.thymeleaf.org " はThymeleafを使用するために必要な文です。 Thymeleafを使用することで簡単に Java からHTMLにデータを表示させることができるようになります。 では実際に Java からHTMLにデータを渡す処理を記述する前にスコープについて解説したいと思います。 スコープで主に使用するものは3つあります。 リク エス トスコープ : 次のページまで有効 セッションスコープ : 同一セッション内で有効 アプリケーションスコープ : Webアプリケーションの起動から終了まで有効 これらのスコープを使用してデータの受け渡しを行います。 今回はリク エス トスコープを用いてデータを Java からHTMLへデータを渡します。 まずはtestControllerを以下のように変更します。 package com.example.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping( "/test" ) public class testController { @RequestMapping( "/index" ) public String index(Model model){ model.addAttribute( "tag" , "Spring Boot + Thymeleaf入門" ); return "/index" ; } } indexメソッドでModel型の宣言をしています。これは、先ほど説明したリク エス トスコープです。 次の行を見ていただくとリク エス トスコープにデータを追加していることが分かります。データはタグと情報をセットで渡します。今回タグ名を tag データを Spring Boot + Thymeleaf入門 とします。 addAttributeメソッドでは様々なデータを渡すことができます。基本的なデータ型以外にも配列やリスト、マップ、 Enum などを渡しリスト表示等に使用することも可能です。 このリク エス トスコープはreturnするページへ自動で渡されます。 では次にindex.htmlでこのデータを取り出して表示します。 <!DOCTYPE html> < html lang = "jp" xmlns:th= "http://www.thymeleaf.org" > < head > < meta charset = "UTF-8" > < title > Spring Boot入門 </ title > </ head > < body > < h1 > Spring Boot Home </ h1 > < h3 th: text = "${tag}" ></ h3 > </ body > </ html > h3のプロパティの th:text はThymeleafのものです。スコープ内の情報を参照するときはThymeleafのプロパティの値に ${タグ名} を使用することで取り出すことができます 。 また今回説明を省略させていただきますがThymeleafには他にも様々なプロパティが存在し、それらを使用してWebアプリケーションを作成していきます。 ここから更にHTMLの入力を Java で受け取ってみましょう。 まずはtestControllerから。 package com.example.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping( "/test" ) public class testController { @RequestMapping( "/index" ) public String index(Model model){ model.addAttribute( "tag" , "Spring Boot + Thymeleaf入門" ); return "/index" ; } @RequestMapping( "/input" ) public String input(String testInput, Model model){ model.addAttribute( "tag" , "Spring Boot + Thymeleaf入門" ); model.addAttribute( "testInput" , testInput); return "/index" ; } } inputメソッドを作成しました。このメソッドではHTMLのFormタグ内のnameプロパティがtestInputのものの値をString型で受け取ります。 String型で受け取る理由としてはどんなデータも格納できるためです。例えば、整数値の入力をIntegerで受け取る際にテキストボックス内に文字列が入力されたとします。その場合受け取った段階でNumberFormatExceptionとなってしまいます。 引数にnameプロパティと同じ項目を書くだけで受け取れるので非常に簡単ですね。 そして受け取った値を再びリク エス トスコープへ格納してindex.htmlを表示します。 ここで見ていただきたいのは model.addAttribute("tag","Spring Boot + Thymeleaf入門"); がもう一度書かれているところです。ここでもう一度リク エス トスコープへ追加されているのは ページ test/index から ページ test/input へ移動してしまうため情報が消えてしまうためです。実行時に試しに コメントアウト してみてください。ページ遷移後、 Spring Boot + Thymeleaf入門 という文字列は消えます。 続いてindex.htmlを以下のように変更します。 <!DOCTYPE html> < html lang = "jp" xmlns:th= "http://www.thymeleaf.org" > < head > < meta charset = "UTF-8" > < title > Spring Boot入門 </ title > </ head > < body > < h1 > Spring Boot Home </ h1 > < form method = "post" action = "/test/input" > < input name = "testInput" type = "text" > < button type = "submit" > 送信 </ button > </ form > < p th: text = "${testInput}" ></ p > </ body > </ html > HTMLからデータを送る際はFormタグを使用します。actionプロパティにはデータを送信する先のURLを指定します。先ほど作成したメソッドのRequestMappingの値は /test/input となるため、これを指定します。 また、先ほどと同様に th:text プロパティを使用しデータを受け取ります。 Formタグのmethodプロパティでpostを指定していますがここではデータが直接見えないようにデータを送信しているだけであって暗号化されていないことに注意してください。そのため安全にデータをやり取りする場合は別に暗号化する仕組みを使用する必要があります。 少し余談ではありますが、 JavaScript や CSS 、画像ファイルは resources/static 内に格納し使用します。 resources/static 内にjsや css 、imgフォルダを作成し管理することをお勧めします。 以上で実装は完了です。実際に実行してみましょう。 実行 実装お疲れ様でした。 では実際にSpring Bootを起動し Webブラウザ からアクセスしてみましょう。 アクセスURLは localhost :8080/test/index です。 このような画面が表示されましたでしょうか。これが表示されていない場合はSpring Bootがちゃんと起動できていないかどこかコードが間違っているかだと思います。 では送信ボタンの横にあるテキストボックスに何かしらテキストを打ち込んで送信と押してみてください。入力されたテキストがそのまま表示されます。 例では Spring 入門 と打ち込んで送信してみます。 このようにちゃんと Spring 入門 と表示されていれば完成です。 また、URLに注目して向てください、 localhost :8080/test/index から localhost :8080/test/input に遷移していることが分かると思います。 また、直接 localhost :8080/test/input にアクセスもしてみてください。送信ボタンを押さなくても直接アクセスできるため動作を確認してみてると、 localhost :8080/test/index と全く同じページになると思います。このような点でバグを生む可能性があるので動作確認はしっかりと行いましょう。 次にtestControllerのinputメソッド内にある model.addAttribute("tag","Spring Boot + Thymeleaf入門"); を コメントアウト して実行してみましょう。 //-- 省略 -- @RequestMapping( "/input" ) public String input(String testInput, Model model){ //model.addAttribute("tag","Spring Boot + Thymeleaf入門"); model.addAttribute( "testInput" ,testInput); return "/index" ; } //-- 省略 -- この状態で実行して localhost :8080/test/index にアクセスしても表示は変わりません。しかし、テキストボックスに文字列を入力し送信ボタンを押すと・・・ コメントアウト 前同様、 Spring 入門 という文字列は出力されます。しかし Spring Boot + Thymeleaf入門 という文字列が消えていることが分かります。 そのためデータをやり取りする際にはスコープに注意してください。スコープは短すぎると今回のように消えてしまいます。逆に想定より長いスコープを使用してしまうと前の情報を抜き出せてしまい、情報流出が起こる可能性にもつながってしまいます。そのため、使用用途に合ったスコープを使用するようにしましょう。 まとめ Spring Bootを使用して簡単にWebアプリケーションを作成できることを実感していただけましたでしょうか。 実際はDIコンテナなどの難しい部分の説明を省略してしまっていますが調べてみると面白いかもしれません。 今回はテキストを入力・表示をさせただけでしたが、入力情報を検査したり、データベースの情報を取得したりと様々なことが簡単に実装することができます。 また、Thymeleafのプロパティを書き込んでいくだけでUIの処理ができるためBootstrapや WordPress などと合わせて使用すると更に見栄えの良いページができたり、Vue.js等を使用して更に動きのあるページを作成したりと様々な表現も可能となっています。 私の感想としては、Spring Bootについて簡単な部分だけを抽出して書きましたがこれだけでもかなり便利だと感じてしまうほどでした。特にThymeleafとの相性が良くて全体的にまとまっていて非常に使いやすい印象でした。ここまで揃っていると実務でSpring Bootを使って開発できたら楽しそうですね！ 初めて使用すると裏で何をどこまで処理してくれるかなど理解できない部分も多々あります。しかし、慣れてくると非常に簡単にWebアプリケーションを作成できます。 ぜひ、Spring Bootを使用していろいろなWebアプリケーションの作成に挑戦してみてはいかがでしょうか。 以上、Spring Boot入門でした。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

はじめに こんにちは、新卒1年目のHiroto-Kitamuraです。 私の所属する部署では RDBMS ( 関係データベース管理システム )に PostgreSQL を採用しており、私も日々勉強を行っています。 その中で難しく感じたことの1つが、ターミナルに打ち込むコマンドです。 RDBMS が変わっても共通する点の多い DML (テーブル内データを操作する系統の SQL 、SELECTやINSERTなど)と異なり、コマンドは RDBMS によって差が大きく、私はなかなか慣れることができませんでした。 またインストール方法についても、簡単なインストールツールがあるとはいえ RDBMS による違いは大きいでしょう。 記事をご覧の皆様の中にも、複数の RDBMS を使っていて混乱したことがある方は多いのではないでしょうか。 本記事では、 SQL はある程度わかるけど自分でインストールしたりコマンドで管理を行ったことがないという方や、データベースを触ったことはあるけど PostgreSQL はわからないという方向けに、最も基本的である Windows における 簡単なインストール方法 や 基本的なコマンド について書いていきたいと思います。 なお、 SQL が何かわからない、ほとんど触ったことがないという方は本記事を見ながら PostgreSQL のインストールをした後、無料でダウンロードできる 標準教科書 の1～6章などで基本的な SQL について知ることをおすすめします。 ◆ 関連記事 ・ 【SQL入門】INSERT まとめ ・ 【SQL入門】UPDATE まとめ ・ 【SQL入門】DISTINCT 使い方 ・ RDBMSとDBMSについて【初心者向け】 ・ SQLの基本【まとめ】 はじめに PostgreSQLのインストール手順 ダウンロード インストール pgAdminの使い方 PostgreSQLの基本的なコマンド PGDATA環境変数 initdb pg_ctl psql createuser, dropuser createdb, dropdb 終わりに 参考文献 PostgreSQL のインストール手順 Windows における PostgreSQL の簡単なインストール手順です。 本記事ではWindows10 64bit版における手順を説明します。 なお、本記事で紹介する方法以外に ソースコード からコマンドでインストールする方法もありますが、難しく初心者にはメリットもあまりないので今回は触れません。 ダウンロード www.postgresql.org まず、このページのDownload the installerをクリックして ダウンロードサイト に移動してください。 その後、 Windows x86-64 の列にあるダウンロードリンクをクリックすると PostgreSQL の インストーラ (インストールプログラム)がダウンロードされます。 バージョンは会社等で指定があればそれにするべきですが、特になければ最新のもの(記事投稿時点で13)で大丈夫です。 ただし新しいバージョンが出たばかりだと PostgreSQL日本語ドキュメント が対応していない場合もあるので、その場合は1つ前のバージョンをインストールしたほうがいいかも知れません。 インストール いよいよ PostgreSQL のインストールに入ります。 前項でダウンロードした インストーラ ( postgresql -[バージョン番号]- windows -x64.exe)をダブルクリックして起動しましょう。 Nextを押して進めていくとインストールする場所や付属ツールの有無などを聞かれますが、特に必要性やこだわりがなければデフォルトのままで問題ありません。 しばらくするとスーパーユーザー(管理者)のパスワード入力を求められるので、使用するものを入力してください。 慣例的に、最初のユーザー名はpostgresになっています。 このユーザー名とパスワードはデータベースを管理する上でログインに必要なので、必ず覚えておきましょう。(パスワードは忘れても再設定可能です) 次に、 PostgreSQL が外部と接続する際に用いるポート番号の設定です。 基本はデフォルト値(5432)で問題ありませんが、既に使われている場合は警告が出て先に進めませんので、5433など別の番号にしましょう。 今度は ロケール (地域)の設定です。 日本に設定しておくと全角文字の並べ替え等の際に日本語を考慮した挙動をしてくれるようですが、その分検索性能が低くなる場合があるので、C(無設定)にするのがおすすめです。 なお、この場合でもデータベースに日本語は利用できますので、日本語のデータを入れる予定がある場合でも基本的にCで問題ありません。 その後設定事項を確認してNextを押していくとインストールが始まります。 しばらくかかるので、気長に待ちましょう。 この画面が出ればインストールが終わっています。 Stack Builderは追加ツールをインストールするためのものなので、特に必要がなければチェックを外しましょう。 Finishを押せば、ついに PostgreSQL のインストール完了です！ pgAdminの使い方 先程インストールした PostgreSQL には、pgAdminという GUI ツールが含まれています。 データベースの管理コマンドについては後程触れていきますが、それよりまず SQL を書いてテーブルやデータを操作したい！という方はこちらを使用するのがおすすめです。 本筋から外れるので簡単な説明に留めますが、気軽に SQL を触りたい方はぜひご覧ください。 まずスタートメニューを開き、pgAdminと入力して出てきたアプリをクリックします。 ブラウザでpgAdminが起動するので、ユーザー名にpostgres、パスワードに先程決めたものを入力してログインしましょう。 ログインが出来たら、左側の>マークを押していくと現れるpostgresデータベース(本格的な開発は他のデータベースが望ましい、下記参照)をクリックで選択し、上のTools>Query Toolをクリックします。 するとエディタが現れるので、 SQL を書いていきましょう。 書いた SQL はF5キーで実行できます。 なお、本記事は PostgreSQL のインストールとコマンドについての記事なので、 SQL についての詳しい説明は割愛します。 マニュアルなどを参照してください。 ちなみに、postgresデータベースは後述の psql コマンドや サードパーティ 製品におけるデフォルトの接続先として使われるためのものなので、本格的なデータ構築を行う際はcreatedbコマンドやpgAdmin>Databases右クリックで別にデータベースを作成してそこで行うようにしましょう。 PostgreSQL の基本的なコマンド 本節ではインストール後ターミナルで使用できる PostgreSQL の基本的なコマンドと、その使い方について解説します。 本記事では Windows を前提に紹介しますが、 Mac や Linux でも基本的な部分は変わりません。 ただし、 Ubuntu のaptでインストールした場合はinitdbやpg_ctlまわりのコマンドが大きく違いますのでご注意ください。(詳しい紹介は割愛します) 当然ですが PostgreSQL をインストールしないと使えないので、まずは前節を見ながらインストールを行った上で、本節をご覧ください。 なお、コマンドのオプションは主なもののみの紹介となっています。詳しく知りたい方は、 PostgreSQL ドキュメントをご参照ください。 PGDATA 環境変数 これはコマンドではありませんが、以下の解説で時々登場する用語なのでここで説明します。 PGDATA 環境変数 はOSで設定できる、 PostgreSQL のデータベース クラスタ (データベースの集まり)のフォルダを表す値です。 以下で解説するコマンドではデータがあるフォルダを指定する必要があるのですが、この 環境変数 を設定しておくことでコマンドを入力する際にいちいちフォルダ名を入力する必要がなくなります。 設定方法ですが、まずスタートメニューを開いてシステムの詳細設定と入力して出てきたアプリをクリックします。 その後[ 環境変数 ]>[新規]の順にクリックし、変数名の欄にPGDATA、変数値にインストール時に指定したデータベース クラスタ の場所(デフォルト値ではC:\Program Files\ PostgreSQL \<バージョン番号>)を入力し、OKを押していけば設定完了です。 なお、他にも PostgreSQL 関連の 環境変数 が存在しますが、同様に設定すればOKです。 initdb 以下、大カッコ [ ] で囲まれている部分は、省略可能であることを表します。 指定したフォルダに PostgreSQL のデータベース クラスタ を作成するコマンドです。 PostgreSQL ではこのデータベース クラスタ の中にデータベースを作成することになります。 先述した方法でインストールを行うと自動的に1つ クラスタ が作成されるので、単純な利用方法であれば実行する必要はありません。 ただしデータベースサーバーは クラスタ 単位で起動できるため、1つのマシンを複数のサービスで利用する場合にはこのコマンドを使うことになるでしょう。 なお、ポート番号が同じサーバーは複数同時起動できないので、複数のサーバーを同時起動する場合は設定ファイル( postgresql .conf)でportパラメータを変更する必要があります。 詳しくは PostgreSQL ドキュメント等を参照してください。 コマンドの使い方: $ initdb [-D ディレクト リ] [-E エンコーディング ] [--locale= ロケール ] [-U スーパーユーザ名] オプションの意味は以下のとおりです。 オプション名 意味 省略時のデフォルト値 -D クラスタ を作成するフォルダ PGDATA -E 文字 エンコーディング OSの設定値 --locale ロケール (前節で解説) OSの設定値 -U スーパーユーザー名 コマンドの実行者のOSにおけるユーザー名 -Dには空のフォルダを指定するようにしてください。 -EにはUTF8や EUC _JPが使用できます。 -Uでは クラスタ の管理者ユーザー名を指定できます。 OSのユーザーと PostgreSQL のユーザーは別個の概念 なので、異なる名前の設定が可能です。 pg_ctl PostgreSQL サーバーの起動、終了などを行うコマンドです。 設定ファイルの変更反映にも使用します。 サーバーが起動していないと SQL や以下の管理コマンドの実行はできません。 ただし、先述のインストール方法を使うとインストール完了時とPC起動時に自動的にサーバーが起動する設定になるので、毎回このコマンドでサーバーを立ち上げる必要はありません。 コマンドの使い方: $ pg_ctl 操作 [-D ディレクト リ] [-t 最大待ち時間] [-m シャットダウンモード] 操作の部分に入る主なコマンドは以下のとおりです。 コマンド名 意味 start サーバーを起動する stop サーバーを停止する restart サーバーを再起動する reload 設定ファイルを再読込する status サーバーの起動状況を表示する 設定ファイルの項目の中には、reloadではなくrestartでサーバーを再起動する必要があるものもあります。 詳しくは PostgreSQL ドキュメントを参照してください。 オプションの意味は以下のとおりです。 オプション名 意味 省略時のデフォルト値 -D クラスタ のあるフォルダ PGDATA -t 起動・停止の最大待ち時間 60秒 -m 停止モード(下記で解説) fast -tはstart,stop,restart、-mはstop,restartを行うときのみ利用できます。 -mは停止時の挙動を指定するもので、以下のオプションがあります。 オプション名 意味 smart サーバーへの接続の切断を待つ fast サーバーへの接続を強制切断 immediate サーバーを緊急停止 次回起動時に復旧が必要 psql 起動している PostgreSQL サーバーに接続し、データベースの操作などを行うコマンドです。 コマンドの使い方: $ psql -l [-p ポート番号] [-U ユーザー名] または $ psql [-c コマンド] [-f ファイル名] [-p ポート番号] [-U ユーザー名] [-d データベース名] オプションの意味は以下のとおりです。 オプション名 意味 省略時のデフォルト値 -l データベースの一覧を表示して終了 実行しない -c 実行する SQL コマンド 実行しない -f 実行する SQL が書かれたファイル名 実行しない -p サーバーのポート番号 PGPORT 環境変数 -U 接続する PostgreSQL ユーザー名 コマンドの実行者のOSにおけるユーザー名 -d 接続するデータベース名 postgres -dを省略してデータベース名のみ記載することも出来ます。 また、データベース名のあとに-Uを使わずユーザ名を記載することも可能です。 $ psql [-c コマンド] [-f ファイル名] [-p ポート番号] データベース名 ユーザー名 -l,-c,-fを指定した場合、指定の操作を実行してコマンドは終了します。 これらを指定しなかった場合は、 PostgreSQL ターミナルが起動し、先述のpgAdminのように SQL を入力、実行することが出来ます。 なお、各種操作の実行には設定ファイルに示された方法によるログインが必要です。 createuser, dropuser ユーザーを作成、削除するコマンドです。 コマンドの使い方: $ createuser [オプション] 作成するユーザー名 $ dropuser [-p ポート番号] [-U ユーザー名] 削除するユーザー名 オプションでは、主に作成するユーザーに許可する操作を設定できます。 主なオプションとその意味は以下のとおりです。 オプション名 意味 省略時のデフォルト値 -s(-S) スーパーユーザー権限を設定する(しない) -S -d(-D) データベース作成権限を設定する(しない) -D -r(-R) ユーザー作成権限を設定する(しない) -R -l(-L) ログイン権限を設定する(しない) -l -P 作成と同時にパスワードを設定する しない --interactive 権限の有無を対話的に指定 しない -p サーバーのポート番号 PGPORT 環境変数 -U このコマンドを実行する PostgreSQL ユーザー名 コマンドの実行者のOSにおけるユーザー名 権限関連のオプションを指定しない場合はログイン権限のみ持つユーザーが作成されます。 -Pオプションを指定しない場合、パスワードは設定されません。 ただし後で SQL を使って設定ができますし、パスワードを使わないログイン認証方法もあるため、必ずしもここで設定する必要はありません。 -Uオプションは現在 コマンドプロンプト を開いているOSのユーザー名とユーザー作成権限を持つ PostgreSQL のユーザー名が異なる場合に使用します。 作成・削除するユーザー名を入力するのではないことに注意してください。 ちなみに、 PostgreSQL のインストール時に作成したユーザーはスーパーユーザー権限を持っています。 スーパーユーザー権限はあらゆる権限を兼ね備えた権限なので、安易に作成するべきではありません。 createdb, dropdb データベースを作成、削除するコマンドです。 コマンドの使い方: $ createdb [-O ユーザー名] [-T テンプレートDB名] [-p ポート番号] [-U ユーザー名] データベース名 $ dropdb [-p ポート番号] [-U ユーザー名] データベース名 オプションの意味は以下のとおりです。 オプション名 意味 省略時のデフォルト値 -O データベースの所有者 -Uで指定したユーザー -T 元となるデータベース template1 -p サーバーのポート番号 PGPORT 環境変数 -U 接続する PostgreSQL ユーザー名 コマンドの実行者のOSにおけるユーザー名 PostgreSQL では、新しいデータベースはいずれかの既存のデータベースをコピーする形で作成します。 デフォルトではtemplate1という空のデータベースを利用しますが、-Tコマンドで他のデータベースを指定することも出来ます。 また、事前にtemplate1にデータを追加しておくことで共通のテンプレートを作成することも可能です。 終わりに PostgreSQL のインストール方法、コマンドの基本について駆け足で説明してきましたが、いかがでしたでしょうか。 恐らく、読んでいて「このコマンドが動かない」「この場合はどうするの」といった疑問が生まれた方も多いでしょう。 それだけ PostgreSQL は奥が深く、短い記事ですべて詳しく説明することができないということなのです。 ただ、だからといって PostgreSQL が勉強が難しい、とっつきづらいということではありません。 幸いなことに、 PostgreSQL には日本語で書かれた詳しい ドキュメント があります。 Google で検索すれば個人ブログ等で噛み砕かれた使い方も様々出てくるでしょう(この記事もその1つとして書いています)。 この記事であまり触れられなかった内容として、設定ファイル( postgresql .conf,pg_hba.confなど)・バックアップなどがあります。 気になった方はぜひ調べてみてください。 本記事を入り口に、 PostgreSQL の世界に入ってくる方が増えることを願っています。 参考文献 福岡博・笠原辰仁・宇山公隆 (2019) 『 OSS 教科書 OSS -DB Silver Ver2.0対応』 翔泳社 SRA OSS , Inc. 日本支社 正野裕大 (2020) 『徹底攻略 OSS -DB Silver問題集［Ver.2.0］対応』 インプレス 日本 PostgreSQL ユーザ会 「 PostgreSQL 日本語ドキュメント」< https://www.postgresql.jp/document/ > エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 rakus.hubspotpagebuilder.com ラク スDevelopers登録フォーム https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/ イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ ◆TECH PLAY techplay.jp ◆connpass rakus.connpass.com

はじめに こんにちはchoreiiです。先日、 応用情報技術者試験 を受験してきました（2020年10月18日）。記憶が新しいうちに自身の対策や勉強法をアウトプットします。 はじめに 応用情報技術者試験とは 応用情報技術者試験の受験背景 自己採点結果 対策と勉強法 午前 1.基礎理論 2.コンピュータシステム 3.技術要素 4.開発技術 5.マネジメント 6.ストラテジ 午後 おわりに 2020/12/25 追記 応用情報技術者試験 とは 応用情報技術者試験 とは、 IPA （ 情報処理推進機構 ）が主催する 情報処理技術者試験 の一つです。 引用：情報処理技術者試験 試験要綱 試験要項の対象者像には「高度IT人材となるために必要な応用的知識・技能をもち、高度IT人材としての方向性を確立した者」とあり、 基本情報技術者試験 よりワンランク上の試験と位置付けられています。 問題形式は、午前は マークシート の択一で、午後は記述式になっています。 応用情報技術者試験 の受験背景 ラク スに新卒入社してから今年で3年目になります。業務で必要な知識はある程度ついてきましたが、体系立てて学んだわけではなく、なんとなく理解した気になっているIT知識なども多くありました。そんな中、職場の先輩の勧めもあり受験を決意しました。 ちなみに私は 基本情報技術者試験 を受験しておらず、今回が初の 情報処理技術者試験 になります。 応用情報技術者試験 の出題範囲が 基本情報技術者試験 を内包していると聞いたため、 基本情報技術者試験 を飛ばして 応用情報技術者試験 を受験しました。 自己採点結果 2020年11月5日現在合格発表はされていません。これは例年のことで、 応用情報技術者試験 は受験日から2ヶ月後程度に発表されます。 令和2年度10月試験　合格発表スケジュール そのため、午前は公式の解答、午後は公式ではありませんが IT資格の歩き方 の解答例を参考にさせていただいて自己採点しています。 自己採点 合格点 午前 85点 60点 午後 65点 60点 午前は マークシート 式なのでマークミスさえなければ余裕を持って突破できていますが、午後はギリギリでどちらに転んでもおかしくないと思います。自分としては正解か不正解かわからないものは不正解判定にしたので、合格の方が分が良いのではないかと思っています。 対策と勉強法 さて、ようやく本題の対策と勉強法についてお話します。午前／午後別に記載しますが、先に全体の所要時間などや参考書籍を以下に記載します。 勉強期間 1ヶ月 勉強時間 50〜60時間程度 勉強方法 応用情報技術者 合格教本 https://www.amazon.co.jp/dp/4297109514 www.amazon.co.jp 応用情報技術者 過去問道場 www.ap-siken.com 午前 次のような流れで勉強を進めました。 過去問道場で午前の過去問を確認 まずは、現時点でどの程度勉強しなければいけないかを測るために、無勉強の状態で過去問にトライしてみました。結果としてほとんどの問題に解答できず、解答できたものも「この4択なら多分これ」といったような選択肢ありきかつ自信がない状態でした。そのため過去問の確認は早々に見切りをつけました。 合格教本を一通り読む（2日） 範囲全体を網羅した書籍があった方がいいと思い、前述の合格教本を購入し土日で一通り読み切りました。一通りの情報を頭に一度通すのが目的で読み進めたため、章末問題にはあえて手をつけず、自分が理解できたと思ったタイミングでどんどん読み進めました。私の場合「業務で触れている知識」「大学時代に学んだ知識」が前提にあったため、知識の補間や穴埋め的に読み進めることができたため2日で読み終わっていますが、その下地がない場合はもう少し読むのに時間がかかると思います。 過去問と書籍学習の反復（1〜2週間） 通勤途中に過去問道場で過去問を解き、家では間違えた箇所を合格教本で見直したり、章末問題を解いたりしていました。過去問を解く際は直近の2回分を除いて、直近数年分を優先的に解いていました。これは 応用情報技術者試験 の午前問題の出題傾向として、「直近の過去2回と同じ問題は出題されない」「全80問のうち半分程度は過去問から出題される」というものがあったためその点を意識しました。 合格教本の模擬試験を解く 過去問で9割程度の正答できるようになってきたため、合格教本に付属していた模擬試験を実施しました。結果として1時間以上時間を残し解答でき、正答率も8割を超えていたので午前に絞った勉強は終了し、午後勉強の合間に今まで通り過去問を解いたり、合格教本で見直す状況へシフトしました。 大筋としては以上の通り進めましたが、 応用情報技術者試験 は出題範囲が広いため出題分野によって勉強量に差がでました。出題分野別にどのようなことを意識していたかを簡単に記載します。 1.基礎理論 代表する出題内容 「集合」「 情報理論 」「確率」 「2分木」「スタック・キュー」「 アルゴリズム 」 対策 基本知識を覚えた上での計算問題が多い印象です。情報系の大学や専門学校に通っていれば一度講義で解説されている内容で、忘れてしまっていても参考書籍を読んで過去問を解けばすぐに思い出せると思います。反面、初めて内容を勉強する場合は基本知識の吸収と計算問題のパターンへの慣れが必要になるためある程度の勉強時間は確保したいところです。この範囲の知識は午後問題の「プログラミング」の範囲に大きく影響してくるので確実に理解を進めることをおすすめします。 2.コンピュータシステム 代表する出題内容 「組合せ 論理回路 」「パイプライン処理」 「集中／分散処理システム」「 待ち行列 理論」「システムの信頼性評価」 「 排他制御 」「言語プロセッサ」 対策 「1.基礎理論」ほどではありませんが、処理の仕組み・流れを覚えて、その知識を使って計算を解く問題が多いです。コンピュータのソフトウェア・ハードウェアの構成要素など暗記しなければならない問題も同じくらい出題されるため出題範囲がとても広いです。全部覚えるのが理想ですが私はそこまで時間がとれなかったため、「計算問題は確実に解けるようにする」「暗記は過去問で出たものを優先的に覚える」ことを意識していました。 3.技術要素 4.開発技術 代表する出題内容 「データベース」「ネットワーク」「セキュリティ」 「開発手法」「 オブジェクト指向設計 」「テスト技法」「レビュー手法」 対策 普段アプリケーション開発をしている人は馴染みがある範囲なのでそこまで勉強しなくても点数が取れると思います。一から勉強を始める場合もデータベースは基本的な構文や仕組みしかでてこないため難しくありません。ネットワークとセキュリティに関しては、通信規格や暗号化の規格といった技術の世代をまたいで覚えなくてはいけない分野があり、名前や説明内容も似通っているため覚え間違いをすることが多いです。私は、時系列や表に書き出すなどして混同しないように気をつけました。また、最近追加された「 アジャイル 開発」に関する問題が頻出されています。 5.マネジメント 6.ストラテジ 代表する出題内容 「プロジェクトマネジメント」「 タイムマネジメント 」「コストマネジメント」 「システム戦略」「経営戦略」 対策 この範囲に関しては私自身、深い理解を諦めた部分があります。耳馴染みがない単語が多く一から覚えることが多いですが、午前で出題される問題数はマネジメント10問、ストラテジ20問なので、勉強時間に対する点数の伸びが他の技術的分野に比べて低いと考えたためです。積極的に勉強を捨てるのはリスクが高いですが、この範囲を深追いするより技術系の基礎知識をしっかりと定着させることが優先だと感じています。また、後述しますが午後は解答分野を選択でき、マネジメントとストラテジを選択しないことも可能なため、その点も優先度を下げた理由になります。 午後 午後試験は記述式になり難易度が上がります。記述式だからというよりは、問題文が長文になるため文章の読解力が求められ、出題分野の知識の習得を前提とした上で解答を求められます点が難しいと感じました。解答は必答が1問存在し、他10問の中から4問を選択することになります。 必答 情報セキュリティ 選択（4問） システム アーキテクチャ ネットワーク データベース 組込み システム開発 情報 システム開発 プログラミング プロジェクトマネジメント サービスマネジメント 監査 ストラテジ 午前勉強と勉強方法に大きな流れの変化はありませんが、以下のようにすすめています。また、午後は分野の選択式であり、分野毎の勉強方法は個人差が大きいので記載はしません。 解答予定の項目を絞りこむ 前述の通り、情報セキュリティ以外は10問の中から4問を選択して解答することになります。年度や自身との相性によって問題の難しさが変わるので4問だけに絞るのはリスクが高いですが、10問全てを解けるようになる必要はなく、解答予定の項目を5〜6問程度に絞ることで勉強しやすくなります。私はマネジメント系とストラテジ系の問題は諦めて残りの6問を解答できるように勉強しました。 過去問と書籍学習の反復（2〜3週間） 午後試験は暗記で点数を伸ばすことができる午前試験とは違い、問題の解き方や考え方の慣れが必要なため早速過去問を解き始めました。この時意識したことは、「分からないなりにでも自分の力で記述問題を解答を記載し、何も書かずに模範解答を見ないようにする」ことです。記述解答の場合は模範解答が絶対の正解ではありません。（もちろん、ポイントとなる単語を使用しているかどうかといった基準はあります。）最初から解答を見てしまうと問題文を読んで解答を導き出す力が身に付かず、いざ本番で少し問題形式が変わっただけでどこを読めばいいのか分からず、まったく解けなくなる恐れがあります。 合格教本の模擬試験を解く（試験前日） 直前に予想問題を解いた時は正答率8割程度でした。本番結果は自己採点に記載の通りに下にブレてしまっていますが、当時はある程度手応えがあったため、試験直前まで解説を読んで問題文の読み進め方や解答のあたりのつけ方を反復していました。 おわりに 所感として、勉強の流れ自体や意識していたことに間違いはなかったと思っていますが、午後試験の対策にもう少し時間を使うべきだったと思っています。逆に午前試験は午後試験の勉強の合間にも勉強できたためもう少し早めに切り上げるべきでした。 まだ、合格発表はされていませんが、合格していれば データベーススペシャリスト の勉強を、不合格であれば再度 応用情報技術者試験 の勉強して受験しようと考えています。反省点も存在する受験でしたが、改めて勉強したことによって理解が深まった部分もあるため、合格していなかったとしても意義のある受験だったと思います。 この記事が今後、 応用情報技術者試験 を受験する方の手助けとなれば幸いです。 2020/12/25 追記 本日合格発表だったのですが、無事合格していました！！ 自己採点では午前85点／午後65点だったので概ね試算通りの結果でした。正直なところ午後試験の点数がギリギリなため勉強量が足りていたとは言い難いです。ですが合格は合格と受け止め、今回の結果に甘んじずに今後も勉強して理解を深めて行きます。今回無事合格したことによって高度試験（ データベーススペシャリスト など）の午前Ⅰ試験が免除される（2年間）ため、次の春試験で データベーススペシャリスト を本命としていずれかの高度試験を受験します。 引用：情報処理技術者試験の高度試験、情報処理安全確保支援士試験の一部（午前Ⅰ試験）免除制度 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

はじめに 使った物 準備 その1：tweetをする。 その2：特定のユーザーのtweetを取得する。 その3：検索ワードで引っかかったtweetをJSONファイルにする。 おわりに はじめに こんにちは。 rs_chankoです。 本格的に寒くなってきましたね。 スノーボード が楽しみな季節です。 全然関係ないので本題に入ります。 エンジニアたるもの、情報収集に SNS って欠かせないですよね。 私は気軽に使えるし、ユーザーも多いため Twitter をよく利用しています。 その昔、シュ○○。○○○○ーだとか、ザ○○○ドとか、 UserStreamsで常に新しい tweet が流れてくるクライアント、流行りましたよね。（流行りましたよね？） 私はそんなクライアントを使っていわゆる「ツイ廃」という人種でした。 ただ、 API の仕様変更だとかなんだとかでそのようなクライアントからも離れ、今は公式に落ち着いています。 当時は「 API 」ってなんぞや、と思いつつも、調べることも特にありませんでした。（高校生の頃の自分の欲のなさよ…） 最近、業務で API チックな実装に触れた時に突然このことを思い出したんですよね。 そして思いました。 「公式に慣れたとはいえ、自分の理想のクライアント作れたら、面白くね？？」 ということで、今回はクライアント作成まではいきませんが、 ひとまず API で何かしてみようと言うことで初級編をやったので記事にしてみます。 使った物 Twitter アカウント Python -3.9.0( VSCode ) 準備 Twitter で API を利用するには、まず「利用申請」が必要になります。 この辺は結構いろんなサイトがあるので、参考にしました。 参考にしたサイトはこちら www.itti.jp これが完了してメールが届くと、ようやく API を使ったいろんなことができます。 ひとまず、このあと必要になる下記4つを取得します。 consumer_key consumer_secret access _token access _token_secret 探すの結構苦労したんですが、実はまとまっていました。 下の画像の順に探っていくと全部取得できました。 API _Keyの取得 これらが取得できたら、早速コードを書いていきましょう その1： tweet をする。 クライアントを作って tweet が見れたところで、自分が tweet できなきゃ面白くないですよね。 なので、直書きでとりあえず tweet してやる！といった感じで書いてみました。 #tweetを投稿 import tweepy # 準備で取得したキーを格納する consumer_key = "consumer_key" consumer_secret = "consumer_secret" access_token = "access_token" access_token_secret = "access_token_secret" # Twitterオブジェクトの生成 auth = tweepy.OAuthHandler(consumer_key, consumer_secret) auth.set_access_token(access_token, access_token_secret) api = tweepy.API(auth) # tweetを投稿 api.update_status( "APIでツイートできた〜〜〜やった〜〜〜〜" ) #準備で取得したキーを格納する の部分には各自取得したキーをいれてください。 これを実行すると… tweet _ スクリーンショット こんな感じで実際に tweet できました。 OAuth認証 で API 呼び出しする感じですね。 この段階で「お、意外と簡単やん。」と自信を付けさせてくれます。 API ってこう言うところが偉大ですよね。 その2：特定のユーザーの tweet を取得する。 今回は我らが＠DevRakusの tweet を取得します。 twitter.com 最新の5tweetくらいを取得してみます。 import tweepy consumer_key = "consumer_key" consumer_secret = "consumer_secret" access_token = "access_token" access_token_secret = "access_token_secret" # Twitterオブジェクトの生成 auth = tweepy.OAuthHandler(consumer_key, consumer_secret) auth.set_access_token(access_token, access_token_secret) api = tweepy.API(auth) #tweetを取得 Account = "DevRakus" #取得したいユーザーのユーザーIDを代入 tweets = api.user_timeline(Account, count= 5 , page= 1 ) for tweet in tweets: print ( 'tweetId : ' , tweet.id) # tweetのID print ( 'tweetUser : ' , tweet.user.screen_name) # ユーザー名 print ( 'tweetDate : ' , tweet.created_at) # 呟いた日時 print (tweet.text) # tweet内容 print ( 'favo : ' , tweet.favorite_count) # tweetのいいね数 print ( 'retw : ' , tweet.retweet_count) # tweetのRT数 print ( '=' * 80 ) # =を80個表示(区切り線) これを実行すると… tweet _取得結果 こんな感じで tweet の取得ができた～～～～！ クライアント作ってユーザーページ開くときはこんな感じで tweet 取得して表示する… とかそんな感じなんですかね。 その3：検索ワードで引っかかった tweet を JSON ファイルにする。 さっきのよりも、よりシステムチックに tweet を取得してみましょう。 今回は弊社の製品、 楽楽精算 と入った tweet を検索して JSON ファイルに仕立て上げようという魂胆です。 #tweetをファイルとして保存 import json import datetime import time from requests_oauthlib import OAuth1Session from pytz import timezone from dateutil import parser # 取得した各種キーを格納----------------------------------------------------- consumer_key = "consumer_key" consumer_secret = "consumer_secret" access_token = "access_token" access_token_secret = "access_token_secret" SEARCH_TWEETS_URL = 'https://api.twitter.com/1.1/search/tweets.json' RATE_LIMIT_STATUS_URL = "https://api.twitter.com/1.1/application/rate_limit_status.json" SEARCH_LIMIT_COUNT = 10 # セッション確立 def get_twitter_session (): return OAuth1Session(consumer_key, consumer_secret, access_token, access_token_secret) # キーワード検索で得られたtweetを取得する # max_idを使用して次の100件を取得 def search_twitter_timeline (keyword, since= '' , until= '' , max_id= '' ): timelines = [] id = '' twitter = get_twitter_session() params = { 'q' : keyword, 'count' : SEARCH_LIMIT_COUNT, 'result_type' : 'mixed' } if max_id != '' : params[ 'max_id' ] = max_id if since != '' : params[ 'since' ] = since if until != '' : params[ 'until' ] = until req = twitter.get(SEARCH_TWEETS_URL, params=params) if req.status_code == 200 : search_timeline = json.loads(req.text) for tweet in search_timeline[ 'statuses' ]: # 次の10件を取得したときにmax_idとイコールのものはすでに取得済みなので捨てる if max_id == str (tweet[ 'id' ]): print ( 'continue' ) continue timeline = { 'id' : tweet[ 'id' ] , 'created_at' : str (parser.parse(tweet[ 'created_at' ]).astimezone(timezone( 'Asia/Tokyo' ))) , 'text' : tweet[ 'text' ] , 'user_id' : tweet[ 'user' ][ 'id' ] , 'user_created_at' : str (parser.parse(tweet[ 'user' ][ 'created_at' ]).astimezone(timezone( 'Asia/Tokyo' ))) , 'user_name' : tweet[ 'user' ][ 'name' ] , 'user_screen_name' : tweet[ 'user' ][ 'screen_name' ] , 'user_description' : tweet[ 'user' ][ 'description' ] , 'user_location' : tweet[ 'user' ][ 'location' ] , 'user_statuses_count' : tweet[ 'user' ][ 'statuses_count' ] , 'user_followers_count' : tweet[ 'user' ][ 'followers_count' ] , 'user_friends_count' : tweet[ 'user' ][ 'friends_count' ] , 'user_listed_count' : tweet[ 'user' ][ 'listed_count' ] , 'user_favourites_count' : tweet[ 'user' ][ 'favourites_count' ] } # urlを取得 if 'media' in tweet[ 'entities' ]: medias = tweet[ 'entities' ][ 'media' ] for media in medias: timeline[ 'url' ] = media[ 'url' ] break elif 'urls' in tweet[ 'entities' ]: urls = tweet[ 'entities' ][ 'urls' ] for url in urls: timeline[ 'url' ] = url[ 'url' ] break else : timeline[ 'url' ] = '' timelines.append(timeline) else : print ( "ERROR: %d" % req.status_code) twitter.close() return timelines, id def write_tweet_to_file (timelines, dt): # 日付ごとにjsonで書き込み f = open ( "/Users/koichi/Documents/tweet/tweet-" + dt + ".json" , "a" ) for timeline in timelines: json.dump(timeline , f , ensure_ascii= False , sort_keys= True # ,indent=4 , separators=( ',' , ': ' )) f.write( ' \n ' ) f.close() return ## メイン処理 timelines = [] # tweetID max_id = '' # 検索ワード keyword = '楽楽精算' # tweet取得対象日 start_dt = '20201104' start_dt = datetime.datetime.strptime(start_dt, '%Y%m%d' ) for i in range ( 7 ): dt = (start_dt - datetime.timedelta(days=i)).strftime( '%Y-%m-%d' ) # print(dt) since = str (dt) + '_00:00:00_JST' until = str (dt) + '_23:59:59_JST' while True : # tweet検索 timelines, max_id = search_twitter_timeline(keyword, since, until, max_id) time.sleep( 5 ) if timelines == []: break write_tweet_to_file(timelines, dt) if len (timelines) < SEARCH_LIMIT_COUNT: break 先ほどまで使っていた tweepy というライブラリではない方法で試してみました。 実行した結果は… tweet _ JSON ファイル できたできた！ ただ、筆者はここで力尽きてしまったのでせっかく JSON にしたのに tweet の形にして復元みたいな もう一段階の作業 をやりませんでした はできませんでした… ただ、今回みたいなことをしたおかげで、 特定のワードが入ったtweetしか流れてこないTL みたいなのもできそうで面白そうですよね。 (普通に公式の検索機能と同じですが…) おわりに お恥ずかしながら、筆者はTwitterAPIで遊んでみようと思って初めて Python を触りました。(環境構築 からし ました。) Python ってとても扱いやすくていい言語ですよね。(筆者は制約が多い方が好きですが) API も相まって、初級編としてはかなり扱いやすくてこれからいろいろ試してみたいなぁという気持ちになりました。 Python 自体が未知の世界で、ほとんど参考にした記事の内容を拝借させていただきましたが、 とりあえずお試しに触ってみたい！という方の目に留まればよいと思います。 次回の記事ではもう少し完成形になるようなものを書けると…いいな…(将来の自分に期待) 以下の記事を参考にしています。 qiita.com qiita.com エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

こんにちは ラク スの iketomo です。 今回は アジャイル 開発( Agile ) について紹介させていただきます。 アジャイル 開発の特徴や ウォーターフォール と比較、弊社での スクラム の取組事例などを紹介させていただきます。 皆様が アジャイル 開発手法をどう取り入れるべきかのご参考になればと思います。 ① アジャイル開発とは？ アジャイルソフトウェア開発宣言 ② アジャイル開発の特徴とウォーターフォール開発との違い 戻らないことを前提としたウォーターフォール 戻ること（仕様変更）を前提としたアジャイル開発 開発サイクルの違い ③ アジャイル開発のメリット・デメリット アジャイル開発のメリット アジャイル開発のデメリット ④ アジャイル開発で気を付けるべきこと アジャイル開発≠ドキュメントを作らない 適時のコミュニケーションと確認 顧客にチーム参画してもらう ⑤ スクラムの取組事例 配配開発チームでのスクラムの取り組み 不確実性の低減 改善文化の醸成 楽楽明細開発チームのスクラムの取組 失敗から学びとスクラムとウォーターフォールの融合 ⑥ アジャイル開発の関連書籍の紹介 SCRUM BOOT CAMP THE BOOK アジャイルサムライ みんなでアジャイル アジャイルレトロスペクティブズ Fearless Change アジャイルに効く アイデアを組織に広めるための48のパターン スクラムガイド アジャイルマニフェスト ① アジャイル 開発とは？ アジャイル には「素早い」や「機敏」という意味があります。 従来の ウォーターフォール モデルと呼ばれる開発手法が「技術や環境の変化」に対して仕様変更を即応することが難しくなる側面がありました。 アジャイル 開発はそのような煩わしさから解放されるために作られた開発手法になります。 アジャイル 開発の基本概念はあまりに有名すぎるので、割愛させていただきリンクだけ張らせていただきます。 アジャイル ソフトウェア開発宣言 agilemanifesto.org ② アジャイル 開発の特徴と ウォーターフォール 開発との違い 戻らないことを前提とした ウォーターフォール ウォーターフォール では基本的に各工程（要件定義・概要設計・詳細設計）は一方通行で戻らないことを前提としています。 ウォーターフォール 開発において工程が戻るということは、大きなリソースを消費することになるため、避けなければいけません。 そのため 各工程では入念にレビューやチェック、関係者の承認を得て 進むことになります。 ただ開発をしたことがある皆様はわかると思いますが、どれほど入念にレビューしても後工程で問題が発生し仕様変更をしなければいけないことは現場ではよくあります。 例えば実装フェーズで仕様に問題があった時に「概要設計」「詳細設計」まで戻って修正し さらには実装前にテストケースまで作っていた場合、ほとんどのテストケースを作り直しということもあり そういった場合、そこまでに使っていた大きなリソースを無駄にしてしまうこともあります。 また実際に開発完了して顧客に 検収 してもらうと「まったく思っていたものと違う」と言われて呆然としまうこともあるでしょう。 そこで アジャイル 開発の登場です。 戻ること（仕様変更）を前提とした アジャイル 開発 アジャイル 開発では 戻ること（仕様変更）を前提 としています。 そのため、 ウォーターフォール に比べ重厚なチェックなどは行わずに ある程度仕様が纏まったら、とりあえず作って、実物を見てもらいチェックしてもらおうという進め方になります。 見てもらう相手（承認者）は開発内部だけではなく、場合によっては顧客を含めることもあります。 承認者から違うと言われ、仕様変更になれば即対応を行います。 なぜそれができるかというと 開発サークルの単位が小さい からです。 開発サイクルの違い アジャイル 開発では イテレーション （スプリント）と呼ばれる小さいサイクルの開発を反復して行います。 通常 イテレーション は 1週間～長くても1カ月位の単位 で反復して機能追加を行っていきます。 各 イテレーション の中で設計・実装・テストを行い、必要であれば承認者（顧客も含むこともある）に実際の機能を見てもらうことになります。 見てもらった時に、もし予定外の機能要望や変更等があれば、また イテレーション のサイクルを繰り返すことになりますが、小さいサイクルなので問題がありません。 ③ アジャイル 開発のメリット・デメリット アジャイル 開発のメリット 前述していますが、 アジャイル 開発の大きなメリットは 不具合や仕様変更が発生した時の手戻り・ 工数 が少ない ことです。 これにより柔軟に顧客の要望を取り入れやすく、 顧客ニーズに最大限に答えることができます。 また 要件がはっきり決まっていない案件 でも作りながら見てもらいながら開発を進めることができるのでそういった案件には アジャイル 開発が向いているでしょう。 アジャイル 開発のデメリット 全体のスケジュール・予算が見えずらい アジャイル 開発では開発初期に全体のかっちりした仕様を決めずに、仕様変更を許容しているため、全体像がぼやけています。 仕様変更・追加を繰り返していくと、当初計画から大きくスケジュールがずれてしまうこともあります。 この点については下記の対策をする必要があります。 ・仕様変更などを考慮し、バッファをもったスケジュールにしておく ・全体進捗を監視し最終的な納期に間に合うかどうかを常に判断する ・顧客とスケジュールのずれについて合意しておく 開発 工数 が大きくなったり、スケジュールが伸びてくると、予算・リソースについても同様のことが言えます。 全体が見えずらいため、ある時に予算オーバーとなってしまった。開発リソースが確保できなくということもあり得ます。 ・仕様変更・追加に伴い予算追加の議論ポイントについて顧客と合意する ・リソースが大きくなった時に、確保できるように関係各署と交渉しておく といった前準備が必要になるでしょう。 アジャイル 開発と ウォーターフォール 開発のメリット・デメリットを整理すると、以下の表のようになります。 ④ アジャイル 開発で気を付けるべきこと アジャイル 開発≠ドキュメントを作らない ウォーターフォール のように重厚なドキュメントを作るということではありませんが アジャイル 開発においても場合に応じて各種ドキュメントを作成し、要求者と認識が合っているかを確認することが必要です。 適時のコミュニケーションと確認 小さいサイクルだから作った後に見てもらえば大丈夫！！という考え方は間違っています。 小さいサイクルと言えども、何度も繰り返し修正が積み重なると、大きなリソースを失いますし、進捗せずにスケジュールが伸びてしまいます。 あれ？と迷った時や疑問に感じるならば、即時で各関係者へ確認することによって、修正の度合いを減らすことができます。 どちらのケースでも言えますが、仕様変更・追加があっても修正するから確認しなくても大丈夫。 ということではなく、あくまで修正は少ない方が良いという考え方をバランスよく持ち合わせる必要があります。 顧客にチーム参画してもらう 顧客が忙しくて見ることができません。最後にできたものを見ます。という状態に陥ると アジャイル 開発の意味をなさなくなります。 開発前にしっかりと顧客と事前合意して、チームの一員となってもらい、各 イテレーション ごとの成果物を見てもらいましょう。 ⑤ スクラム の取組事例 スクラム とは アジャイル 開発の手法を取り入れた フレームワーク の1つで最も有名な開発手法の１つになります。 弊社で実際に スクラム 開発手法を取り入れたチームの状況を説明させていただきます。 配配開発チームでの スクラム の取り組み 不確実性の低減 スクラム 導入前の開発チームはスケジュールの遅延が多発し、メンバーは 疲労 していたのですが スクラム 導入によって、チームで少しずつ解消していきました。 ただ、導入当初はタスクを順番通りに進めていくという ウォーターフォール 的な進め方で開発していたため、重要なタスクが後の方に残ったり、個人の遅れがそのままチームの進捗遅れに繋がってしまっていました。 これを打破するため 1週間毎のスプリント反復開発 と カンバン を導入しました。 カンバンによって終わらないタスクが可視化され、終わらないタスクは スウォーミング（問題のある所に人が集まり解決する） でチームで解決していきました。 1週間毎に計画・振り返りを行うことで、プロジェクトが進むごとに計画の不確実性が低減していくという良い循環になりつつあります。 改善文化の醸成 スプリント毎の振り返りで改善のア イデア を出し合うことを反復することでチームメンバーに改善の文化が醸成されていきました。 こういった意識が芽生えたことで 「顧客から始める」という アジャイル 原則 に回帰し チームの在り方、将来のロードマップを作るという、より本質的な改善を行うことができました。 詳細な記事は下記をご覧ください。 speakerdeck.com speakerdeck.com 楽楽明細開発チームの スクラム の取組 失敗から学びと スクラム と ウォーターフォール の融合 楽楽明細の開発チームでは2019年春～ スクラム の取り組みを始めました。 スクラム を取り入れたものの当初は大きな課題にぶつかってしまいました。 開発した成果物を営業・企画に見てもらうと 「思っていた機能と全然違う！！」 と言われてしまい 大きな仕様変更が発生 。 「多分こうだろう。違ってもスプリントごとに見てもらえるからまぁ大丈夫か。」といった過信が原因です。 そこで 「小さめの案件は今まで通りの アジャイル 開発」 「大きめの機能は ウォーターフォール と アジャイル の融合」 といったやり方に方針変更。 大きめの機能は要件定義の段階で前よりは詳細に設計を進めることにしました。 今では小さな手戻りはあるものの 大きな手戻りはなくなり効率よく開発 を進める事ができています。 ・ スクラム の取組で良かった点 昔は開発メンバーが増えてきたが 1人の熟練技術者に設計が依存していて ボトルネック になることが課題でした。 アジャイル 開発手法の導入で設計フェーズが軽量化されたことにより ボトルネック が分散され 全体の開発力・スピード が向上することができました。 また営業・企画がスプリントごとにフィードバックしてくれることで、営業・企画との連携・風通しが良くなってます。 詳細な記事は下記をご覧ください。 speakerdeck.com ⑥ アジャイル 開発の関連書籍の紹介 SCRUM BOOT CAMP THE BOOK スクラム のことを知るならまずこの本。 アジャイル の必読入門書。 www.shoeisha.co.jp アジャイル サムライ アジャイル とセットで語られる事が多い手法やプ ラク ティスが一通り網羅されており、 アジャイル のマインドや全体像を抑えることができる、 アジャイル の現場の教科書。 shop.ohmsha.co.jp みんなで アジャイル 手法が中心の書籍が多い中で、顧客からはじめるのが アジャイル であると言い切っている点で貴重な書籍。 www.oreilly.co.jp アジャイル レトロスペクティブズ アジャイル に挑戦するときに多くの人が最初に取り組み、馴染み深いが実は奥が深い「ふりかえり」にスポットを当てた、ふりかえりの教科書とも言うべき書籍。 shop.ohmsha.co.jp Fearless Change アジャイル に効く ア イデア を組織に広めるための48のパターン アジャイル に取り組む中で直面する様々な課題に向き合うためのマインドや行動様式を48のパターンを通して学ぶことができる。 www.maruzen-publishing.co.jp スクラム ガイド 言わずと知れた スクラム のルールブック。 スクラム 実践者の多くが経験を積めば積むほど結局ここに立ち戻るとも言われている。 https://www.scrumguides.org/docs/scrumguide/v2017/2017-Scrum-Guide-Japanese.pdf アジャイル マニフェスト アジャイル の原典にして原点。 agilemanifesto.org 今回ご紹介した アジャイル 開発のご紹介が、これから アジャイル 開発を導入を検討されている方々の一助となれば幸甚です。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

はじめに Webスクレイピングの基本事項 Webスクレイピング(Scraping)とは Webスクレイピングの活用シーン Webスクレイピングの基本的な仕組み Webスクレイピングの注意事項 取得先への攻撃とみなされたり、規約違反や、著作権法違反に問われることもある 取得先の変更に影響を受ける 取得先がAPIを公開しているならそちらを活用する方が良い Webスクレイピングの実践方法 Webスクレイピングを実践するには 1. ベンダーのサービスやツールを利用する 2. 自分でプログラムを作成する なぜPythonなのか？ Pythonでのスクレイピング実践方法 事前準備 BeautifulSoup4のインストール 模擬Webサイトの構築 Webサーバーを立ち上げる 初級編：特定の要素から単一の要素を抜き出す 中級編：あるページから繰り返しを伴う複数の要素を抜き出す 上級編：複数のページから複数の要素を抜き出し、CSVに出力する おわりに はじめに みなさんこんにちは。フジサワです。 みなさんも一度や二度は、インターネット上の情報を収集して分析するという作業を行ったことがあるのではないでしょうか。 調べる対象のWebサイトが数ページくらいであれば、ブラウザを開いてコピー＆ペーストを繰り返すだけでもなんとかなりますが、 対象が数十、数百ともなると、途端に人力で情報収集を行うことが難しくなります。 こうした時に用いられるのが「Web スクレイピング 」という手法です。 先日、とあるWebサイトから情報を集めて分析するという作業をやっていたのですが、チマチマ手作業でやろうとするも精神的に限界を迎えたので、Web スクレイピング してうまく情報を集められないかと考えました。 ところが、 簡単なWeb スクレイピング であれば、さほど技術的に難易度の高いものではないのですが、調べてみると、意外とWeb スクレイピング には法要件など、技術面以外で注意しなければならないポイントが多いようです。 そこで、本稿では「Web スクレイピング とは何なのか？」「Web スクレイピング で気を付けなければならないこと」などの基本事項と併せて、「 Python を用いてWeb スクレイピング を実践するにはどうすればよいのか」といったあたりを解説したいと思います。 特にエンジニア諸氏におかれては、「あまり意識せずにWeb スクレイピング していた」人も少なくないのではないでしょうか？ Web スクレイピング について初めて学ぶ方はもちろん、既に実践されている方も、本稿を読んで改めてWeb スクレイピング について整理して頂けると幸いです！ Web スクレイピング の基本事項 Web スクレイピング (Scraping)とは Web スクレイピング とは、Webサイトに含まれる情報から必要なものを抽出する技術・行為を指すものです。 ※なお、本稿では「Web」 スクレイピング と正確に記載するようにしていますが、単に「 スクレイピング 」と呼ぶ場合も、おおよそWeb スクレイピング を指していることが多いと思います。 Web スクレイピング と並んで、よく耳にする言葉に、Webクローリング（Crawling）というものがありますが、これは、あるURLを基に、そのWebページに含まれているリンクを辿りながら、情報を収集する仕組みを指します。 ちょっとややこしいですが、この両者の違いは「 クローラー が集めた情報を スクレイピング する」という文章にすれば、より分かりやすいのではないでしょうか。 Web スクレイピング の活用シーン Web スクレイピング の基本的な狙いは、膨大な情報の収集を手作業ではなく自動化することにより業務を効率化することです。 主な活用シーンとしては次のようなものが挙げられます。 マーケティング や研究分野におけるデータ分析 機械学習 におけるモデル作成のための学習データとして Web スクレイピング の基本的な仕組み Web スクレイピング の基本的な仕組みは次の通りです。 あるWebサイトからHTMLデータを取得する HTMLデータをタグ構造に従って分解・分析（パース）する 目的となる情報を選び出し、ファイルやDBに保存する 1.～3.のプロセスを、複数のページに対して繰り返して実行する Web スクレイピング の注意事項 Web スクレイピング はデータ収集を行う上でとても強力な手段ですが、注意しなければならない点がいくつかあります。 取得先への攻撃とみなされたり、 規約違反 や、 著作権法 違反に問われることもある 取得先への攻撃 Web スクレイピング はプログラムが自動で実行するという性質上、人間には不可能な大量のリク エス トをデータの取得先に送信することができてしまいます。 しかしながら、短時間に大量のリク エス トを送信することは、取得先のサーバーの処理を遅延させ、場合によってはサーバーをダウンさせるなどの損失を与えてしまいます。過去に、この件で逮捕されてしまった事例などもあるので、慎重に考える必要があるでしょう。 では、どれくらいの頻度であれば許容されるのかというと、残念ながら明確な基準はありません。 Webサイトの運営者が robots.txt を設置している場合は、クロールして良いURL／良くないURLや許容するアクセス頻度について明言されている場合がありますので、そちらも確認しましょう。 robots.txt …Webサイトの運営者が、 Google などの 検索エンジン の クローラー 向けに配置するファイル。通常は、対象 ドメイン のルートに配置されます。（例： https://xxxx.example.com/robots.txt ） 利用規約 違反 Webサイトによっては、明確に スクレイピング することを禁止しているものも存在します。 スクレイピング する際には、十分に取得先のWebサイトの 利用規約 を確認するようにしましょう。 著作権法 違反 Web スクレイピング の対象となる情報に 著作権 が生じている場合、活用方法を誤ると 著作権法 違反となりますので注意が必要です。 なお、 著作権法 では、第三十条の四にて「情報解析の用に供する場合」は 著作権 者の承諾なく利用することができるとされています。 活用事例として挙げた「マーケテイングや研究分野におけるデータ分析」や「 機械学習 におけるモデル作成のための学習データ」として スクレイピング した情報を活用することは問題ないと言われています。 ※筆者は法律の専門家ではないので、この点については改めて十分に確認されることをお薦めします 取得先の変更に影響を受ける スクレイピング の基本的な仕組みは、「HTML要素を特定のパターンに沿って抽出する」ことですので、データの取得先の仕様変更やデザイン変更によって、HTML構造が変わり、うまく抽出できなくなってしまうことがあります。 スクレイピング が上手く処理されない場合は、取得先のHTML構造に変化がないか確認し、調整をする必要があります。 そのほか、 スクレイピング が過度に相手先に負荷をかけていなかったとしても、相手先の通信拒否リストに載ってしまい、 スクレイピング ができなくなるような場合もあります。 取得先が API を公開しているならそちらを活用する方が良い ここまで述べたとおり、Web スクレイピング にはセンシティブな問題や面倒ごとがつきまといますので、データ取得先が API で必要な情報を公開している場合は、そちらを活用する方が安全だと思います。 本当にWeb スクレイピング する必要があるのかどうかをまず考えましょう。 もちろん、 API を利用する際にも、 利用規約 があればしっかり確認してくださいね。 Web スクレイピング の実践方法 Web スクレイピング を実践するには Web スクレイピング を実践するには、次のいずれかを選択することになります。 1. ベンダーのサービスやツールを利用する ベンダーが提供しているサービスはとても種類が多く、紹介しきれないので、ここでは簡単に導入できる Chrome 拡張をいくつか紹介します。 Instant Data Scraper 複数ページにまたがる一覧画面からの スクレイピング に特化した拡張で、起動すると自動で画面上の一覧要素を判定して抽出してくれます。あとは、次のページに進むボタンがどれかを指示するだけで、自動で スクレイピング してくれます。 Scraper とてもシンプルな スクレイピングツール 。ブラウザ上の右クリックメニューから実行できるなど、現在表示しているサイトの情報を簡易的に抽出したい場合には手軽に活用できます。 Web Scraper 複数ページに対するクローリングの設定や、動的ページへの対応など、使い方を覚えるのに少し時間が必要な半面、自由度が高く高機能な スクレイピングツール です。 2. 自分でプログラムを作成する Python や Java , PHP , Ruby といったプログラム言語を用いて、 スクレイパー を作成する方法です。 費用もかからず、自由度も高いため、簡単な スクレイピング 処理であれば、慣れているエンジニアにとってはベンダーのサービスやツールを使用するよりも手軽かもしれません。 仮に、ベンダーのサービスやツールを利用する場合であっても、内部で動作しているプログラムの基本的な考え方は同じですので、ツールの機能を理解するために、 スクレイパー の実装を把握しておくのも良いのではないでしょうか。 それでは、実際に Python でWeb スクレイピング をするプログラムを作成してみましょう。 なお、本稿では、 Python のバージョンはPython3系を用いて解説していますが、Python2系をお使いの方はご了承ください。 なぜ Python なのか？ Python 以外の言語でも同様のことは実現できるのですが、 Python の場合、Web スクレイピング を実現するために必要なライブラリや書籍などが豊富だからです。 Python での スクレイピング 実践方法 Python でWeb スクレイピング を実現する方法は様々です。 本稿では、比較的ベーシックな作り方である、 Python ライブラリの「 BeautifulSoup4 」を使用した実践例を解説します。 他の方法としては、「Scrapy」というWeb スクレイピング に特化した フレームワーク を用いる場合や、「 Selenium 」などの Webブラウザ を動作させて実行するライブラリを用いる場合、あるいは少しWeb スクレイピング の本流からは離れますが、「Pandas」を用いたデータ解析などが挙げられます。 事前準備 BeautifulSoup4のインストール HTMLの解析を行うライブラリに、もっとも定番のライブラリと言われている「BeautifulSoup4」を使って解説します。 「BeautifulSoup4」は次のようにインストールすることができます。 なお、今回のサンプルでは、対象のWebサイトにアクセスするためのライブラリとして、こちらも Python では定番となっている Requests を使用するので、併せてインストールしています。 ※ Python 実行環境の構築や、pip（ Python のライブラリ管理ツール）の導入については本稿では触れませんのでご了承ください。 $ pip install beautifulsoup4 requests 模擬Webサイトの構築 それでは、 スクレイパー を実装するにあたり、模擬的なデータ取得元のWebサイトを構築しましょう。 次のファイルを、 Python を実行する ディレクト リと同じ階層に配置してください。 index.html < html > < head >< meta charset = "utf-8" />< title > フルーツショップ </ title ></ head > < body > < h1 > 商品一覧 </ h1 > < ul class = "fruits_list" > < li >< a href = "http://localhost:8000/apple.html" > りんご </ a ></ li > < li >< a href = "http://localhost:8000/grape.html" class = "new_item" > ぶどう </ a >< span style = "color:red" > 新商品！ </ span ></ li > < li >< a href = "http://localhost:8000/banana.html" > バナナ </ a ></ li > </ ul > </ body > </ html > apple .html < html > < head >< meta charset = "utf-8" />< title > 商品 </ title ></ head > < body > < p id = "item_name" > りんご </ p > < p id = "item_price" > 100円 </ p > </ body > </ html > grape.html < html > < head >< meta charset = "utf-8" />< title > 商品 </ title ></ head > < body > < p id = "item_name" > ぶどう </ p > < p id = "item_price" > 200円 </ p > </ body > </ html > banana.html < html > < head >< meta charset = "utf-8" />< title > 商品 </ title ></ head > < body > < p id = "item_name" > バナナ </ p > < p id = "item_price" > 79800円 </ p > </ body > </ html > Webサーバーを立ち上げる 上記のファイルを配置した ディレクト リで、下記のコマンドを実行して、 Python のビルトインサーバー機能を使って、Webサーバーを立ち上げましょう。 $ python -m http.server 8000 ブラウザを起動し、 http://localhost:8000 にアクセスをして、次のような画面が表示されればOKです。 なお、次節以降でWeb スクレイピング を行う Python プログラムを実行しますが、上記コマンドを実行したターミナルとは別のターミナルを立ち上げて実行する形を想定しています。 初級編：特定の要素から単一の要素を抜き出す それでは、先ほど作成したフルーツショップサイトから、「新商品」マークがついている商品の名前を取得してみましょう。 以下の Python コードを scraping_beginner.py というファイル名で保存します。 Python コード例 import requests from bs4 import BeautifulSoup target_url = "http://localhost:8000/" r = requests.get(target_url) # target_urlにアクセスして、HTMLを取得 r.encoding = 'utf-8' # 文字化け対策のため明示的に文字コードを指定 bs = BeautifulSoup(r.text, 'html.parser' ) new_fruit = bs.find(class_= 'new_item' ) # HTML要素の中から目的の要素を探す print (new_fruit.text) 実行結果 $ python scraping_beginner.py ぶどう Python コード解説 bs = BeautifulSoup(r.text, 'html.parser') ここではHTML文字列を元にパースを実行し、 Python プログラムで扱いやすくするオブジェクトへの変換を行っています。 第一引数 r.text には、 target_url にアクセスした際のレスポンスのHTML文字列が格納されています。 今回は、実際にWebサイトにアクセスしていますが、次のような形で文字列を直接渡すことや、ファイルオブジェクトを渡すことも可能です。 開発中や デバッグ の際に活用すると便利ですね。 bs = BeautifulSoup('<b class="boldest">Extremely bold</b>', 'html.parser') 第二引数 html.parser は、HTMLの解析を行うライブラリに何を指定するかを記述します。 上記のものも含め、 Python の定番パーサーを列挙します。 ・ html.parser 　…　 Python の標準機能として備わっているパーサーで、手軽に利用できる半面、 Python で記述されているため処理速度が遅い。 ・ lxml … C言語 で記述された高速なパーサーがあり、大量のHTMLを処理するのであればこちらを利用することがお薦めだが、別途OSに lxml をインストールする必要がある。 ・ html5lib …　HTMLが正しく記述されていないなどの多少の問題があっても柔軟に解釈してくれる一方、処理速度がとても遅い。 Python 標準のライブラリではないので、別途pipでインストールが必要。 new_fruit = bs.find(class_='new_item') ここでは、パースされたHTML要素の中から、目的の要素を探す処理を行っています。 今回の例であれば、 class に new_item が指定されている要素のうち、最初に見つかったものを返す、という処理になります。 ※ちなみに、キーワードが class_ となっているのは、 class という文字列が Python の 予約語 だからです。 BeautifulSoupは、HTML要素にアクセスするために必要な機能を揃えています。 イメージを掴みやすくするため、いくつかの例を紹介しておきます。 ・IDが name である <a> 要素の href 属性の値を取得する bs.find('a', id= name ) ・ class に parent が指定されている <div> の子要素である <p> を取得する bs.select( div.parent > p ) 中級編：あるページから繰り返しを伴う複数の要素を抜き出す 次に、フルーツショップサイトから、商品の名前一覧と、商品の詳細ページへのリンクURLを全て取得してみましょう。 以下の Python コードを scraping_intermediate.py というファイル名で保存します。 Python コード例 import requests from bs4 import BeautifulSoup target_url = "http://localhost:8000/" r = requests.get(target_url) r.encoding = 'utf-8' bs = BeautifulSoup(r.text, 'html.parser' ) fruits = bs.find( 'ul' , class_= 'fruits_list' ).find_all( 'li' ) for fruit in fruits: fruit_name = fruit.a.text fruit_detail_url = fruit.a[ 'href' ] print (fruit_name) print (fruit_detail_url) 実行結果 $ python scraping_intermediate.py りんご http://localhost:8000/apple.html ぶどう http://localhost:8000/grape.html バナナ http://localhost:8000/banana.html Python コード解説 fruits = bs.find('ul', class_='fruits_list').find_all('li') ここでは、二段階で要素の検索を行っています。 一段階目の find では、 class に fruits_list を持つ <ul> 要素を探し、二段階目でその子要素の <li> を全て取得しています。 初級編で解説した通り、 find は最初に見つかった要素を１つ返すだけでしたが、 find_all は、見つかった要素を全て、配列で返却します。 for fruit in fruits: fruit_name = fruit.a.text fruit_detail_url = fruit.a['href'] find_all で取得した配列を走査し、それぞれのテキスト要素と、 href 属性要素を抜き出しています。 上級編：複数のページから複数の要素を抜き出し、 CSV に出力する ここまでは、ある単一のWebページから情報を抽出するだけでした。 最後に、極めて初歩的ではありますが、Web クローラー としての振る舞いをもったプログラムを作成します。 フルーツショップサイトのトップページに記載されている全商品の詳細ページに含まれている、商品の金額情報を集め、 CSV に出力してみましょう。 以下の Python コードを scraping_advanced.py というファイル名で保存します。 Python コード例 import csv import requests import time from bs4 import BeautifulSoup target_url = "http://localhost:8000/" r = requests.get(target_url) r.encoding = 'utf-8' bs = BeautifulSoup(r.text, 'html.parser' ) fruits = bs.find( 'ul' , class_= 'fruits_list' ).find_all( 'li' ) fruit_prices = [] for fruit in fruits: time.sleep( 5 ) # 一定時間待つ fruit_name = fruit.a.text fruit_detail_url = fruit.a[ 'href' ] r_detail = requests.get(fruit_detail_url) r_detail.encoding = 'utf-8' bs_detail = BeautifulSoup(r_detail.text, 'html.parser' ) fruit_price = bs_detail.find( 'p' , id = 'item_price' ).text fruit_prices.append([fruit_name, fruit_price]) with open ( 'fruit_prices.csv' , 'w' ) as csvfile: csvwriter = csv.writer(csvfile) for fruit_price in fruit_prices: csvwriter.writerow([fruit_price[ 0 ], fruit_price[ 1 ]]) 実行結果 $ python scraping_advanced.py では、出力された CSV を見てみましょう。 $ cat fruit_prices.csv りんご,100円 ぶどう,200円 バナナ,79800円 期待通り、それぞれのページを参照して、必要な情報を集めることができていますね。 Python コード解説 r = requests.get(target_url) … [A] : fruits = bs.find('ul', class_='fruits_list').find_all('li') … [B] : for fruit in fruits: : fruit_detail_url = fruit.a['href'] : r_detail = requests.get(fruit_detail_url) … [C] 上記の処理が、とても簡単な処理ですが、この一覧の動きがWeb クローラー としての振る舞いになります。 [A]でトップ画面にアクセスし、[B]で表示されている果物リストを取得し、[C]で、それぞれの詳細ページにアクセスをする、という流れになっています。 time.sleep(5) # 一定時間待つ 5秒間待ってから、次のページへのアクセスを行っています。 この処理はとても重要で、本稿で既に述べた通り、一定時間待つという処理を挟まない場合、データ取得先のサーバーに大きな負荷をかけてしまうことになるので、かならずスリープを挟むようにしましょう。 with open('fruit_prices.csv', 'w') as csvfile: csvwriter = csv.writer(csvfile) for fruit_price in fruit_prices: csvwriter.writerow([fruit_price[0], fruit_price[1]]) fruit_prices.csv というファイル名で、 スクレイピング した情報を CSV に出力しています。 今回の例では、 CSV に出力していますが、ここの処理をDBへの登録処理や、 Excel ファイルへの出力処理など、用途に応じて変更すると良いです。 とても簡単なサンプルでしたが、Web スクレイピング 、およびWeb クローラー の基本的な仕組みは以上です。 おわりに さて、いかがでしたでしょうか。 今回は、Web スクレイピング を活用する上での前提知識、注意事項をふまえつつ、 Python プログラムの実装例を紹介しました。 みなさんもぜひ、Web スクレイピング を活用して、業務の効率化をされてはいかがでしょうか。 くれぐれも、 ・データ取得先のサーバーへの過度な負荷をかけないこと ・ 利用規約 を守ること ・ 著作権法 を守ること について、ご注意くださいませ。 ではでは、みなさま良きWeb スクレイピング ライフを。 エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com