サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
techblog.raccoon.ne.jp
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 マネジメント要求定義教訓ごんおま現象依存関係ツリー思考法カオスエンジニアリングフェイルファスト技術的負債 こんにちは、羽山です。 昔話には生きる上での数多くの教訓が込められています。今回は ごんぎつね からシステム設計・開発について考えてみましょう。 ごんぎつねの話はみなさんもご存じの通り、いたずらを悔いたごんぎつねが人知れず兵十という青年に贈り物を届けるも最後まで気づかれないまま火縄銃で撃たれてしまい、最後に「ごん、お前だったのか」となる話です。 さて、 達人プログラマー という書籍には 契約による設計(Design by Contract) という考え方が解説されています。 メソッドを契約として、 要求された以上のことも以下のことも行わない という考え方
パフォーマンスJavaScriptHTMLフロントエンドcssdomcssom こんにちは、羽山です。 今回はウェブシステムにおけるフロントエンドのパフォーマンスの話です。 皆様はウェブのパフォーマンスを気にしていますか? おそらく大抵の方はSQLのチューニングやロジックの改良などをした経験があるのではないでしょうか? しかしプログラムをチューニングしても、期待ほどはページ表示速度が改善しなかったことはありませんか? 昨今のウェブサイトは大量のCSS/Javascriptファイルで構成されているページが大半です。例えばHTMLを100~300msほどで生成してブラウザに転送できたとしても、ページ表示が完全に完了するのに4~5秒かかるということも珍しくありません。 「なんか遅いけど沢山いろいろ読み込んでるから仕方ないな・・・」と諦めないでください。ブラウザがどのようにHTMLを解釈して、CS
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 bashインフラLinuxプロセス置換ファイルディスクリプタシェルスクリプト こんにちは、羽山です。 今回は意外と知らないかもしれないbashの「プロセス置換」という機能を紹介します。 UNIXでは「1つのプログラムは1つの機能にとどめ、フィルタとして動作できるようにせよ」という設計思想があります。 その言葉の通り、大抵のコマンドはパイプでつないでフィルタのように動作可能ですが、必ずしも理想的に設計されていない、もしくは仕様上できないコマンドもあります。 例えば、よく使う diff コマンドがこれにあたります。 指定するファイル名を - とすれば片方は標準入力から読み込めますが、もう片方はどうしても引数で指定しなければいけません。 コマンドの実行結果を直接比
こんにちは。早く業務に慣れたい開発チーム入社1年目の髙垣です。 急ですが皆さん。ふと、音をフーリエ変換したい時ってありませんか? ありますよね。 でも、「フーリエ変換って学校で計算式で習ったけど、結局は何をしているんだ?」となることありませんか? そこで今回は計算式なんてほっといて、Pythonを使ってフーリエ変換が何をやっているのか体験してみましょう! 環境構築 下記リポジトリをクローンしてください https://github.com/takaT6/fft-tutorial クローンができたら下記のライブラリをインストールしてください↓ pip install numpy matplotlib japanize_matplotlib japanize_matplotlib はmatplotlibに日本語を書き込めるようにするライブラリです。 日本語化をするにはフォントを入れたり、設定フ
こんにちは、羽山です。 みなさんは業務に LLM(生成AI)を活用していますか?ラクーングループでは生成系AI LT大会を開催するなど、積極的な利用を推し進めています。 そこで今回は私がその生成系AI LT大会で発表し、隙間時間で開発して、社内で幅広く利用されるに至った AIアシスタント「おっさんずナビ」を紹介します。 おっさんずナビは LLM + RAG(Retrieval-Augmented Generation)を利用した Slackボットで「ラクーンホールディングスの社風を教えてください」という質問に 社内事情を踏まえた回答 をしてくれます。 ファインチューニングを利用せず RAG のみで精度を高めているのと、ベクトルDBなどの外部リソースを必要としないのがポイントで、使い込まれた Slack ワークスペースさえあればアプリを起動するだけで 社内事情通のAIアシスタント ができあが
デザインHowtoIllustrator3Dインフォグラフィック こんにちは。デザイン戦略部のコバヤシです。 Webデザイナーですが、たまにイラストを描いたりします。 少し前にラクーンが運営する越境ECサイト「SD export」3周年を記念するインフォグラフィックを作成しました。 このイラストは「Isometric(アイソメトリック)」と言われる技法で、Illustratorを使って作成しています。 アイソメトリックとは交差した三軸が同じ角度で交わる立体的な俯瞰図のことです。 この中で使われている立体的なアイテムのほどんどは平面のイラストから生成されました。 今回はその作成方法をご紹介します。 作り方まとめ 1.平面のイラストに3D効果を適用 2.アウトライン化して面ごとに着色 2ステップだけです。パスを使って色々描写する必要はありません。 以下、詳細を説明します。 まずは立体化の基礎と
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。
こんにちは、羽山です。本日の記事はCodeZineに寄稿させていただいたものを許可を得て掲載します。 CodeZineでも同じ内容を掲載しておりますので、そちらでも閲覧できます。 http://codezine.jp/article/detail/8333 Androidアプリのチューニングについての情報を詰め込んでいます、是非ご一読いただけたらと思います。ソースコードはGitHub(Android/Java)で公開してます。 本稿で取り扱う内容 Dalvik/ARTのヒープ領域管理とGC Dalvik/ARTが遅い原因 Dalvik/ARTでの2種類のチューニング方法 NDK(C/C++によるNative実装)での高速化 ARM 32bit(v7a)におけるCPU命令を考えたパフォーマンス設計 (以下、本文) アプリを開発していると、パフォーマンスが問題になることがよくあります。ボトルネ
例えば 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行目はパラメータ名に
したがってSameSite=Lax化の影響を調べるには、「アンカータグとGETのfrom以外で、異なるRegistrable Domainから生成されたリクエストでCookieを使用していないか」ということを確認する必要があります。 しかしこれを漏れなく確認していくことは、なかなか骨の折れる作業ではないでしょうか。 アクセスログのRefererヘッダを見れば、異なるRegistrable Domainから送られてきたリクエストかどうか、ある程度わかりそうな気もしますが、Refererヘッダは送られないケースが多々あったり、そもそもリクエスト生成元のタグ名を判別できなかったりと完璧ではありません。 Fetch Metadataリクエストヘッダとは Fetch Metadataリクエストヘッダとは、一言で言うと「リクエストが生成されたコンテキストをサーバ側に通知するためのヘッダ」です。 ざっく
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 パフォーマンスUnboundDNS こんにちは!はんだです。 今日はDNSサーバの可用性向上についてのエントリです。 DNSサーバの障害時の影響を防ぐ方法として、 単純にDNSサーバを複数設置して/etc/resolv.confに記入するという方法がありますが、 その方法には、タイムアウトの待ち時間という落とし穴があります。 /etc/resolv.conf nameserver 192.168.0.11 //DNS1のIPアドレス nameserver 192.168.0.12 //DNS2のIPアドレス のように設定したとして、 1行目のDNS1が落ちた状態の場合、2行目のDNS2に移行するまでに、設定次第ですが問い合わせの度に毎回1~数秒のタイムア
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 JavaScriptSEOWebGoogleGooglebotE-A-TYMYLSearch Consolerobots.txtクロールバジェットsitemap.xml こんにちは、羽山です。 ふと過去に執筆した記事を振り返ったのですが、フロントエンドのパフォーマンスの話・bashのプロセス置換・Androidアプリのパフォーマンス・DoS攻撃対策などなど、記事の方向性が毎回バラバラすぎて自分は何の専門なんだろう?と疑問に思えてきました。 まあそれは気にしないとして、今回もご多分に漏れず今までの記事とは全く異なる領域の話です。 話のベースはSEOについてですが、 心得 とか 考え方 のような話題が中心です。前半は歴史の振り返りから将来の動きなどを考えて、後半
WebWebAuthnFIDOFIDO2認証YubiKeyCTAP紹介 こんにちは!内定者アルバイトとして技術戦略部で働いている平尾です! オンライン上のサービスを利用する時、皆さんはどの様に自分のアカウントにログインしていますか? 恐らく多くの場合、IDとパスワードでログインしていることが多いのではないかと思います。 パスワードの流出による個人情報の漏洩などの被害は後を絶ちません。 今回紹介するWebAuthn(Web Authentication API) は、Web上でのより安全な認証可能にしてくれます。 この記事では、WebAuthnの概要を解説していきます。 WebAuthnとは WebAuthnを知るためにはまずFIDO(Fast IDentity Online) について知っておく必要があります。 FIDOというのは、パスワードの認証よりも安全で高速な認証を可能にする仕様のこ
Safari, Chrome はデスクトップ版とスマホ版で確認しましたが共に動作の違いはありませんでした。 Firefox のバージョンが2つあるのは本稿執筆中にバージョンアップがあったので試してみたところ、タイムリーに @import の Preload Scanner に機能改善が見られたため参考までに両方載せました。 項目数で最も多くの種類のリソースを Preload Scanner が読み込めたのは Safari で、次いで IE11, Chrome, Firefox71, Opera が並ぶ結果となりました。IE11は意外な健闘を見せていますが、Preload Scanner にあたる機能を最初に導入したブラウザがIE8である事を考えると妥当な結果とも言えます。 どのブラウザも共通して対応しているのは <script> <script async> <link rel="styl
AWS 開発の松尾です。 とある事情よりサーバサイドで任意のWebページのキャプチャ画像を保存したいという要件が湧いてきたので、比較的楽に実現できる方法について考えてみました。 CutyCapt CutyCaptはAppleのSafariやGoogleのChromブラウザーなどのレンダリングエンジンのベースとなっているWebkitというライブラリを利用してWebページを画像やその他のフォーマットに変換してくれる非常に便利なツールです。 わたしが開発環境として利用しているUbuntu 14.04であれば下記のように簡単に導入できます。 $ sudo apt-get install cutycapt 使い方も簡単。 $ cutycapt --url=http://www.superdelivery.com/ --out=top.png オプションの「--url」でキャプチャしたいページのURL
入社半年の新人 ですが、このような場をいただきましたので、入社してすぐに取り組んだInternetExplorer(以下、IE) 8のjQueryのパフォーマンス対策について書いてみたいと思います。
次のページ
このページを最初にブックマークしてみませんか?
『Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く