サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
techblog.raccoon.ne.jp
こんにちは羽山です。 現代の Webシステム界隈は昔よりもはるかに洗練され、初心者からでも簡単に開発方法を学び作れる時代になっています。その反面で例えば Python なら WSGI や gunicorn、Waitress、uWSGI などが何のために存在しているのかが分かりにくいと思ったことはありませんか?Ruby の Rack、unicorn、puma だったり FastCGI など、いずれも Webシステムの構成要素として重要な一方で役割を理解しにくいのは事実です。 そこで今回は Webシステムが現代の形にたどり着くまでの先人達の葛藤の歴史を解説します。歴史を知ればこれらの仕様やプロダクトが何の役になっているかが分かるはずです。 前提 動的な Webサイト(=Webシステム)を作りたいニーズはインターネット黎明期からありますが、ブラウザからのアクセスを適切に処理するには HTTPサー
開発チームの下田です。 突然ですが、java.util.functionパッケージをご存知でしょうか? lambda式を引数に取るメソッドには必ず登場します。 雰囲気で乗り切ってしまえるのでスルーしがちですが、覚えて使いこなすとJavaがもっと楽しくなります。 よくあるlambdaの登場シーン itemsというListを受け取り、値ごとにListのindexをグループして返す関数を考えてみます。 [1,2,3,1,2] と入力があったとき { 1: [0,3], 2: [1,4], 3: [2] } と返すようなイメージです。 lambdaを使わない場合 Map#put、Map#getというMapインターフェースの基本的なメソッドを使った場合の実装がこちらです。 import java.util.*; public class Main { public static void main(
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 開発JavaScriptウェブ type=”file”のinputタグをJSで操作する方法 こんにちは、デザイン戦略部の田中です。 今回は私が最近担当した案件で苦労した、type="file"のinputの値と全く同じ形式のデータを0から作る方法と、データをフォームでアップロードする方法各種について書いていこうと思います! input type="file"について 基本的にinput type="file"の値というのは、type="text"などのほかのinput要素と違い変更したり設定したりすることはできません。 もしこれができてしまうと悪意のあるコードなどによってファイルを勝手に送ったり送られたりできてしまう可能性があるため、セキュリティ的観点からそ
こんにちは。技術戦略部のあずまです。 昨年11月8日(水)に島根県の松江市・松江テルサにて行われた「Ruby biz Grand prix 2023」の表彰式と関連イベントに参加してきましたのでそちらの模様をお届けしたいと思います。 引用元:https://prtimes.jp/main/html/rd/p/000000020.000016862.html Ruby biz Grand prix とは Ruby biz Grand prixは、プログラム言語のRubyを利用しているサービスや商品が表彰されるビジネスコンテストです。 Rubyの父こと、まつもとゆきひろさんが島根県とかかわりが深いことから島根県主催のもと、毎年島根県にて表彰式が開催されています。(一部例外あり) 何をしに行ったか 今回、弊社ラクーンホールディングスは、グループ会社含めて応募はしていないのですが2017年に株式会
開発チームの下田です。 新年あけましておめでとうございます! 入れ替わりが激しいフロントエンドの技術をキャッチアップするモダンフロントエンド勉強会を社内で月2回開催しています。今回はVueの単一ファイルコンポーネントからCSS Modulesを使う方法を取り上げました。 今回のテーマはCSS Modulesです。VueのCSSモジュールではありません。紛らわしいですね・・この先VueのCSSモジュールの話は一切出てきませんので、CSS Modulesと言ったらCSS Modulesの話です。 CSS Modulesはreactとセットで解説している場合が多いですが、HTMLのテンプレートエンジンには依存しない、独立した仕様です。Vueで使ってもいいですし、他のフレームワークで使用しても問題ありません。 目的と環境 今回はわかりやすさを重視して、headerが青、mainが赤地に白の非常にダ
※この記事はめぐろLT Advent Calendar 2023の15日目です。 こんにちは、ひらおです! 師走なのでバタバタしている中でもこの1年をふりかえったりふりかえらなかったりしている頃かと思いますが、 この時期といえばアドベントカレンダーですね! ということでこの記事は、ラクーンが共催参加させていただいている「めぐろLT」というイベントのアドベントカレンダーの記事になります。 Webエンジニアとしての経歴 私はラクーンに2020年5月からインターンで関わり、2021年4月に新卒として入社しました。 ふりかえってみると約3年半の間で開発業務や会社内外イベントを経験させていただき、Webエンジニアとして成長することができたなと感じています。 時系列でまとめると次のようなことをしてきました。 入社~1年目 新卒研修で基礎的な開発作業を身に着ける 1年目~2年目 URIHOで初のPJ参画
※この記事は めぐろLT Advent Calendar 2023 の1日目です。 こんにちは、さいとうです! 12月ですね。あっという間に今年も終わりそうですが、みなさんやり残したことは無いですか・・・? そうですね!!アドベントカレンダーですね!!!! ということでこの記事は、ラクーンが共催参加させていただいている「めぐろLT」というイベントのアドベントカレンダーの記事になります。 ここ半期の取り組みについて 2023年5月、コロナが5類になったこともありエンジニア界隈のオフラインでの勉強会が盛んになっていました。 ラクーンも例に漏れず、外部とのタッチポイントを増やしたいという考えから、ここ半年ぐらいで外部勉強会への参加や開催を積極的に行っていました。 やっていた内容は主に下記になります。 技術イベントの共催・主催 外部勉強会での登壇 特に「外部勉強会での登壇」についてですが、 202
こんにちは。早く業務に慣れたい開発チーム入社1年目の髙垣です。 急ですが皆さん。ふと、音をフーリエ変換したい時ってありませんか? ありますよね。 でも、「フーリエ変換って学校で計算式で習ったけど、結局は何をしているんだ?」となることありませんか? そこで今回は計算式なんてほっといて、Pythonを使ってフーリエ変換が何をやっているのか体験してみましょう! 環境構築 下記リポジトリをクローンしてください https://github.com/takaT6/fft-tutorial クローンができたら下記のライブラリをインストールしてください↓ pip install numpy matplotlib japanize_matplotlib japanize_matplotlib はmatplotlibに日本語を書き込めるようにするライブラリです。 日本語化をするにはフォントを入れたり、設定フ
こんにちは。 技術戦略部のあずまです。 先日、社内でChatGPT勉強会&生成系AI LT大会を開催しましたので、その様子を今回はお伝えしたいと思います。 弊社ラクーンホールディングスでは、日ごろから多数の勉強会が開催されているのですが内容の専門性から全社に告知をして行う勉強会はあまり多くありません。 しかし、今回の勉強会は幅広い職種に活かせる内容と言う事で全社的に告知を行いました。 最終的に集まった人数は120名以上(出席+ウェビナー参加)で任意参加の勉強会としては過去最大級のイベントとなりました。 ChatGPT勉強会 まず初めのChatGPT勉強会では、私、あずまが「今日から始めるChatGPTの使い方と活用例」をテーマに発表しました。 便利な使い方の共有はもちろんのこと、ChatGPTを使用するうえで重要な、SiriやAlexaに代表されるAIアシスタントとの違い(最新情報に弱い、
こんにちは。たむら@認定スクラムマスター です。 今回は、先日社内で開発に関わる事業部側メンバー(ノンエンジニア)に向けてスクラムガイドの紹介を行ったので、そのことについて書こうと思います。 イントロ さて、弊社では前TechBlogにも書いた通りアジャイル開発(スクラム)に取り組んでいます。 世間を見回しても最早全く珍しいものではなくなりましたよね! がっ、しかし! そのバイブルとも言える『スクラムガイド』をいったいどれ位の人が読んでおり、且つ内容を理解しているのだろうか?とふと気になりスクラムで開発している社内チームメンバーに確認したところ、エンジニアでは半分くらい、ノンエンジニアでは9割近くは読んだことがないという結果となってしまいました。こ、これはヒドイ・・・。 とはいえ、スクラムはやっていても読んだことがあるって人は実は他社でも結構少ないのではないか?と思えます。また、読んでいた
こんにちは、羽山です。 今回は先日開催した弊社主催の技術イベント「Raccoon Tech Connect #1 レガシーシステムに立ち向かう技術」で登壇した内容を当ブログで公開します。 イベントのテーマは「レガシーシステムに立ち向かう」ということで、システムを長らく運用していくと自然と溜まっていく 技術的負債 との付き合い方に着目しました。 技術的負債に対する理解を深め、技術的負債を可視化することによって自然と対処される状態を作る方法を解説します。 アーカイブ映像(YouTube) スライド(Speaker Deck) 戦略シミュレーションゲームで例える 今回の主題は「技術的負債」ですが、最初はたとえ話から始めます。 みなさんは戦略シミュレーションゲームをプレイした経験がありますか? 次のスライドは戦略シミュレーションゲームによくありがちなユニット生産画面を表しています。 そして、多くの
情シス担当のますいです。 Shokz社製のヘッドセットOpenCommは、骨伝導で聞き取りやすい音質とノイズキャンセル性能の高いマイクが特徴で、弊社でも利用者の多い人気商品です。 ところが最近、OpenCommのマイクが認識しなくなった等の不具合を訴える利用者が度々訪れるようになりました。 症状 症状は人によって微妙に異なるのですが、 ビデオ会議で相手の音声は聞こえるが自分の音声が伝わっていない(マイク自体は認識している) ↑の症状がZoomやTeamsで出るがアプリによっては問題なく使える マイクの音量調整ができない(サウンド設定で音量コントロールバー自体が表示されない) Bluetooth接続がオーディオのみの認識でマイクが接続されない 音声がまったく出ない など、主にマイク関連がおかしくなることが多いです。 症状が発生したOpenCommを別のPCに接続すると正常に使用できることから
この問題を解けたらスゴい!?シェルスクリプトとファイルディスクリプタの話 今回はシェルスクリプトのちょっとしたクイズからファイルディスクリプタとリダイレクトの動作を解説します。 早速ですがこのシェルスクリプトの問題を解けますか? 問: bashで以下のシェルスクリプトを実行した場合に表示される文字列はどれか? ※ echo の -n は改行を出力しないオプション ( echo -n "A" > /dev/null echo -n "B" 2>& シェル芸のすすめ~awk, xargs, date~ エンジニアであれば、ログの調査、環境構築、データの整形などLinuxコマンドを書く機会はたくさんあるかと思います。 コマンドは所謂「枯れた技術」ですが、「枯れた技術」であるが故に話題に上ることは少なく、集中的に学ぶ機会は少ないように感じます。 結果として、毎回コマンドを使ってやりたいことを上手く
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 こんにちは、開発チームの山下です。 業務ではスーパーデリバリーの開発を担当しています。 今回は私がスーパーデリバリーの開発で関わったサーバーサイドにおける画像編集処理でメモリ不足を防ぐノウハウを共有したいと思います。スーパーデリバリーではユーザーが任意の画像をアップロードできる機能があるため、まれに想定以上の高解像度画像が処理されてサーバーが Out Of Memory エラーを発生させることがありました。 そこで私が任されたタスクが「画像編集処理でメモリ不足を避けるために、バリデーションを追加する」です。 TL;DR サーバーサイドでの画像編集はメモリ使用量が高い操作です。 なぜなら処理される画像データはメモリ上に非圧縮のビットマップとして展開されるた
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 パフォーマンスJavaScriptHTMLフロントエンドdomcssomGoogle AnalyticsタグマネージャGoogle Analytics 4 こんにちは、羽山です。 今回は私自身が半年にわたって弊社の運営する仕入れのECサイトスーパーデリバリーで利用している各種Web広告サービスの仕組みを調査・理解して、手段を考えて、そして改善を行った成果とそのノウハウを共有します。 まず何が問題だったかというと、Web広告サービスにはGoogle広告・Facebook広告・Yahoo広告など広告サービスは多数ありますが、それらを有効に活用するには各サービスが提供している専用タグをサイトの全ページに埋め込む必要があります。 察しの良い方はすでに感づいているかと
こんにちは。 「もう大丈夫!何故って?私が部長に就任した!」 ということで、最近ヒロアカのアニメを1~6期まで一気に見た影響が色濃く出ております。齋藤です。 (元が大丈夫じゃなかったわけではないですよ) 部内では、「さい」とう「こう」へいで、「さいこう」さんなんて呼ばれてたりします。 タイトルの通り2023年5月より技術戦略部部長に就任しました。 よろしくお願いします。 就任早々色々なことに手を付け始めてバタバタしていましたが、「一旦落ち着こう、ブログ書こう」ということで、こちらを書かせていただいております。 所信表明や目標などをお話していきます。 経歴 2017/3 受託開発系企業からWebエンジニアとしてラクーンに中途入社 2020/5 URIHO開発ユニット ユニットセンター就任 2021/5 開発第4チーム チームリーダー就任 2022/5 技術戦略部 副部長就任 2023/5 技
こんにちは 技術戦略部のあずまです。 エンジニアの皆様は、ログイン機能が必要なサイトの「ログイン方法」の要件として何を思い浮かべますか? 多くの方はID/パスワードでの認証を一番に思いつくのではないかと思います。 ID/パスワード認証はポピュラーな認証方法ですが、パスワードの漏洩からの不正アクセスのリスクや忘れてしまったときの不便さがあります。 そこで今回は、Passkey認証のできるサイトの作り方をフロントエンドの実装にフォーカスしてご紹介したいと思います。 (本記事は昨年12月末に社内勉強会で行ったPasskey勉強会をもとに作成しました。) Passkeyとは? Passkeyとは、「FIDO/WebAuthn Level3」の実装につけられた名前で、スマートフォンやパソコンなどの端末に保存された認証情報を利用してパスワードレスでログインを行う機能です。 WebAuthnとは、ユーザ
例えば ga4_event_param1.name は以下のように作ります。 トリガー作成 トリガーのタイプをカスタムイベント、イベント名を ga4_event としてトリガーを作成します。 GA4イベントタグの作成 最後にイベントの記録に使うGA4イベントタグを作成します。 タグ名を GA4汎用イベント とする 設定タグにすでにある「GA4設定タグ」を指定 イベント名は {{ga4_event_name}} 変数を設定 イベントパラメータの1行目はパラメータ名に {{ga4_event_param1.name}} 、値に {{ga4_event_param1.value}} を設定 イベントパラメータの2行目はパラメータ名に {{ga4_event_param2.name}} 、値に {{ga4_event_param2.value}} を設定 イベントパラメータの3行目はパラメータ名に
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 アジャイル開発スクラムアジャイルコーチスクラムマスター開発体制 こんにちは、たむらです。 突然ですが、皆さんの組織ではアジャイル開発を行っていますか? 恐らく程度の差はあれど、かなり多くの会社でアジャイル開発を少なからず取り入れた開発を行っているのではないかと思います。 でも・・・・、それ本当にアジャイル開発になっていますか? こんな?感想が出てくる「なんちゃってアジャイル」になってしまっていませんか? 「アジャイル開発は 納期を定めないから or 最初に要件を全て決めなくて済むから 楽だと思っている」 「アジャイル開発ではPM(プロジェクトマネージャ)をPO(プロダクトオーナー)という別称で呼ぶものだと思ってる」 「スクラムの5つのイベントをやったりやらな
デザイン戦略部のなかだです。 デザインをしていく中で配色難民(色選びに悩んで途方に暮れる民)になったことがあるデザイナーも多いのではないでしょうか? 私もその一人です。 何となく色を選んでみたけどこれでいいのかわからない メインカラーは決まったもののアイコンや見出しなどでどの色を使えばいいのかわからない そもそもどんな色を使ったらいいかわからない などなど。 そんなときに私が参考にしているデザインツールをいくつか紹介します。 配色難民を助けてくれる万能ツール まずはメインの色が決まっていて、他の色を何にしたらいいか悩んでいるときに見ることが多いものを紹介します。 圧倒的使用率NO.1!(私史上) Adobe color 配色に悩んだときにまず最初に見るのがこちらです。 メインで使いたい色が決まっていて、それに合わせる配色を考えたいときに利用することが多いですが、検索機能も充実していて膨大な
どこで使うべき? その名前が示す通りダイアログボックスを表示したい時に使います。 小さなウィンドウが開き、自由に開閉ができるものや、ユーザーに何らかの操作をさせるためのモーダル等で使えます。 今まではdivタグでマークアップしていた方も多いと思いますが、dialogタグを使う事により、ソースを見るだけで意図が理解できるので積極的に使いたいですね。 ダイアログボックスとは https://wa3.i-3-i.info/word11408.html dialogタグを使うべきではないところ ツールチップ、ドロップダウンメニューなど 許可されている子要素 dl、ul、pタグ等のフローコンテンツに属するHTMLタグ ※フローコンテンツのタグはこちらから https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#%E3%83%
デザインHowtoIllustrator デザイン戦略部のスエノです。 たびたび便利にアップデートされるIllustrator、バージョン24.3から「字形の境界に整列(24.3時はグリフバウンドに整列)」という機能が実装され、これがとてもかゆいところに手が届く良アプデでした。 知らない方も多くもったいないのでご紹介します。 イラレあるある:文字をオブジェクトの上下中央に配置できない Illustratorを使用していると「整列」ツールを使ってオブジェクト内に文字を左揃え・右揃え・上下中央揃えなどで配置するケースがあります。 しかし文字を整列してもうまく上下中央に均等配置されず、下部に余白が生まれて上寄りに配置されてしまうのがIllustratorの仕様でした。 フォントによっては余白サイズも変わり、都度の調整がとても手間です。 文字ツールはデザインする上で必ず使用するので、ほぼ全てのイラ
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 はじめまして。2021年4月に入社したエンジニアの齊藤初輝です。 今回はラクーンの新卒研修を受けた学びと感想について書きたいと思います。 新卒研修が作られた背景や研修のゴールなどは以下の記事をご覧ください。 ゼロから始める新人エンジニア研修 入社のきっかけ ラクーンへの入社を決断した1番の理由は、人が良かったからです。 ラクーンを知ったきっかけはエンジニア限定の逆求人イベントでした。 スライドを使って自己紹介し、お笑い鑑賞が趣味でおすすめのお笑い芸人さんの動画を紹介していました。 後日行った1次面接で動画の内容について話ができました。 正直見なくてもいい動画だったと思います。でもちゃんと見てくれていた。 ここなら自分もちゃんと見てもらえると思い、入社を決めま
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 JavaScriptHTMLフロントエンドGoogleタグマネージャ こんにちは、羽山です。 Webエンジニアをやっていると Google Tag Manager に触れる機会ってありませんか? マーケティング部門から広告タグの相談を受けた り、 タグマネージャから出る謎のJSエラーの調査 を依頼されたりと、今やWebシステムの構成要素としてなくてはならないものとなっています。 一方でエンジニアの管理を離れて自由奔放に運用されたタグマネージャは伏魔殿の様相を呈してくるので、できればお近づきになりたくないですがそうは言っていられません。 そんな中で今回出会ったのはタグマネージャのカスタムHTML内で外部JSファイルを読み込み、直後のインラインscriptでその
目標設定KPIKGIMBOOKRアジャイルSMARTの法則 こんにちは、たむらです。今回は、目標設定に関するお話です。 皆さんの会社では「目標設定」がありますか?また、それにどの様に取り組んでいますか?評価に係わるから頑張ろうと思う人もいれば、毎年目標設定を憂鬱に感じる人もいるのではないでしょうか。 今回は、会社の目標そのものを分解しつつ、会社の目標や自身の目標にどの様に取り組んでいけば良いのかを考えてみたいと思います。 会社でよくある目標設定 デファクトスタンダードなMBO さて、企業の目標設定というと、MBO(Management by Objectives)がまず真っ先に出てくるかと思います。P・ドラッガーが提唱した手法で、「マネジメント層からの指示ではなく、自己管理によるマネジメント」により業務の効率化・利益の向上といった会社のニーズ達成と、従業員の能力・モチベーションの向上の両取
Vueで試すCSS modules 新年あけましておめでとうございます! 入れ替わりが激しいフロントエンドの技術をキャッチアップするモダンフロントエンド勉強会を社内で月2回開催しています。今回はVueの単一ファイルコンポーネントからCSS Modulesを使う方法を取り上げました。 今回のテーマはCSS Modulesです。VueのCSSモジュールではありません。紛らわしいですね・・この先VueのCSSモジュールの話は一切出てき パスワードにさよなら?スマホ・PCで顔や指紋認証でログイン Passkey認証ができるWebサイトの作りかた エンジニアの皆様は、ログイン機能が必要なサイトの「ログイン方法」の要件として何を思い浮かべますか? 多くの方はID/パスワードでの認証を一番に思いつくのではないかと思います。 ID/パスワード認証はポピュラーな認証方法ですが、パスワードの漏洩からの不正アク
データベース 開発チームの下田です。 同僚と雑談でER図について話してました。 新しいメンバーを迎えるときにはER図があると便利だけど、100テーブルを超えたあたりから線が絡まりすぎて無理だよねー おそらく業務システム開発にかかわる人なら誰しもが似たような経験があるのではないでしょうか。 次のようなことができたらいいなあと、DDLからER図を生成するSPAを試作してみました。 DDLから動的にER図を作図してほしい 動的に位置関係を調整してほしい 動的に注目しているエンティティとリレーション、もう一つ先のエンティティを強調して見やすくしたい 試作のため、バグはかなり残っていると思いますがご容赦ください。 作ったもの インタラクティブに図を読む体験ができるダイナミックER図、Force Directed ER Diagramを作ってみました。 動的にDDLをパースしてER図を描画して、動的に
パフォーマンスフロントエンドGoogleGA4Google AnalyticsタグマネージャGoogle Analytics 4ユニバーサルアナリティクスRUM こんにちは、羽山です。 今回は GA4 でサイトの速度を記録 して分析する方法を紹介します。 ウェブサイトのパフォーマンス監視にはサーバー側でログに記録しやすいバックエンドの応答速度がよく利用されます。しかし昨今のウェブサイトはフロントエンドの比重が拡大しているので バックエンドの応答速度だけでは利用者の体感速度を正しく表していない という問題があります。 2023年7月終了予定のユニバーサルアナリティクス(UA)にはサイトの速度を記録してくれる機能があり、その数値にはフロントエンドの処理時間も含むため利用者の体感速度の指標として活用していた方も多いと思います。 しかし残念ながらユニバーサルアナリティクスの移行先である GA4 に
bashインフラLinuxプロセス置換ファイルディスクリプタシェルスクリプト こんにちは、羽山です。 今回はシェルスクリプトのちょっとしたクイズからファイルディスクリプタとリダイレクトの動作を解説します。 早速ですがこのシェルスクリプトの問題を解けますか? 問: bashで以下のシェルスクリプトを実行した場合に表示される文字列はどれか? ※ echo の -n は改行を出力しないオプション ( echo -n "A" > /dev/null echo -n "B" 2>&1 echo -n "C" >&2 echo -n "D" 2> /dev/null echo -n "E" 3>&1 >&2 2>&3 ) > /dev/null 選択肢: a. ABCDE g. CBD b. ABC h. BD c. ACDE i. BCDE d. BAD j. ACE e. BCE k. AC f.
次のページ
このページを最初にブックマークしてみませんか?
『Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く