サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
techblog.raccoon.ne.jp
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 マネジメント要求定義教訓ごんおま現象依存関係ツリー思考法カオスエンジニアリングフェイルファスト技術的負債 こんにちは、羽山です。 昔話には生きる上での数多くの教訓が込められています。今回は ごんぎつね からシステム設計・開発について考えてみましょう。 ごんぎつねの話はみなさんもご存じの通り、いたずらを悔いたごんぎつねが人知れず兵十という青年に贈り物を届けるも最後まで気づかれないまま火縄銃で撃たれてしまい、最後に「ごん、お前だったのか」となる話です。 さて、 達人プログラマー という書籍には 契約による設計(Design by Contract) という考え方が解説されています。 メソッドを契約として、 要求された以上のことも以下のことも行わない という考え方
HTMLcss ブログをご覧の皆様こんにちは、デザイン戦略部のJKです。 googleがモバイルフレンドリーを提唱してからもはやレスポンシブ対応は必須になりましたが、レスポンシブ対応って悩ましいですよね。 各デバイスの代表的な端末の解像度に合わせて作ればよいのですが、ウィンドウ幅を縮めてテストを繰り返していると微妙な幅の時にレイアウトが崩れているのが気になってしょうがない、なんてことザラにあります。 width、height、font-size、padding、margin…上げていくとキリがありません。 今回はそんな中でも頭を悩ませがちなfont-sizeに焦点をあてて、clampというCSSの関数をご紹介します。 clampとは 最小値、基準値、最大値を設定して可変にすることができる関数です。 widthでいうmax-widthやmin-widthがイメージに近いです。 使い方としては
プロジェクトマネジメント こんにちは!ラクーンテーブルゲーム会の部長をしている下田です。 ラクーングループではサークル活動を積極的に行っていて、ゲーム系のサークルは特に活発に活動しています。ゲームで遊んでいると、いろんなノウハウがたくさん詰め込まれているなあと思うことがあります。 任天堂のピクミン 3 デラックス等のピクミンシリーズは私の好きなゲームの一つです。ピクミンは会社経営に通ずるといった話がありますが、今回改めてプロジェクトマネジメントに当てはめて、リーダーに求められていることを考えてみました。何がリーダーに必要なのか考えながらピクミンシリーズを遊ぶと、ひょっとしたらリーダーとして成長するのではないかと思い立ちました。 今回はピクミンシリーズに秘められている、プロジェクトリーダーに求められる大切なことを解説していきたいと思います。 注意!ゲームと現実は違います 当たり前ですが、ゲー
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 インフラAWS CloudFormation入門 – ハマリポイント・注意点 AWSCloudFormation こんにちは。インフラ担当のいせです。 弊社が運用しているサービスのなかのいくつかはAWS上で動いています。 当初はWebコンソールでリソースの作成や設定変更を行っていたのですが、だんだん規模が大きくなるなかで手作業での設定には限界を感じ、CloudFormation(以下CFN)を利用することにしました。 今回はCFNの社内向け勉強会の資料をブログとしてまとめてみます。 CFNとは CFNはyamlなどでAWSの設定内容を記述したテンプレートを元に、リソース構築や設定変更を行ってくれるサービスです。 ざっくりした使い方 新規作成 テンプレートを作
最近競技プログラミングを始めた開発チームの下田です。 会社でもプログラミングを主に行う仕事をしていますが、卸・仕入れサイト スーパーデリバリーといったサービス開発とはまったく違う難しさがあり、四苦八苦しながらも楽しんでいます。 会社でソフトウェア開発を行う場合、開発を簡単に始められるように、会社で開発環境を用意します。競技プログラミングサイトでもオンラインジャッジシステムが用意されていますが、機能が物足りない場合が多く、各自で用意することが多いのではないでしょうか。 自分で使うために、2020年現在でアプリケーション環境構築のデファクトスタンダードとなっている、Dockerを使用したC++向けサンドボックス環境のnekosunaを作成しましたので、ご紹介したいと思います。 起動方法 1. Dockerのインストール Dockerを使用します。インストール方法は省略します。 2. docke
WebWebAuthnFIDOFIDO2認証YubiKeyCTAP紹介 こんにちは!内定者アルバイトとして技術戦略部で働いている平尾です! オンライン上のサービスを利用する時、皆さんはどの様に自分のアカウントにログインしていますか? 恐らく多くの場合、IDとパスワードでログインしていることが多いのではないかと思います。 パスワードの流出による個人情報の漏洩などの被害は後を絶ちません。 今回紹介するWebAuthn(Web Authentication API) は、Web上でのより安全な認証可能にしてくれます。 この記事では、WebAuthnの概要を解説していきます。 WebAuthnとは WebAuthnを知るためにはまずFIDO(Fast IDentity Online) について知っておく必要があります。 FIDOというのは、パスワードの認証よりも安全で高速な認証を可能にする仕様のこ
SlackリモートワークコミュニケーションツールZoomDiscord こんにちは!開発チームのさいとーです! 私がほぼフルリモートになって早3ヶ月・・・(2月からの今までの出社日数は6日でした) 最初はおっかなびっくりだったリモートでのコミュニケーションですが、、 ラクーンがリモート推奨になったのが1月27日からで、相当早い段階だったということもあり どんどんリモートでコミュニケーションを行うナレッジが成熟してきました。 最近では勉強会や飲み会もオンラインにて滞りなくできています! とはいえ非常事態宣言が発令されてからは、まだ1ヵ月・・・。 世の中的にはまだまだやり辛さを感じている方も多いのではないでしょうか・・・?(延長されましたしね) ということでこの記事では、弊社(というか主に技術戦略部)で取り入れている リモートワークでのコミュニケーションツールとその運用方法をご紹介していきたい
デザインIllustrator文字詰めカーニングデザイン基礎ベタ打ちInDesign文字詰めのやり方 こんにちは。デザイン戦略部のくま太郎です。 「わーい!デザインが完成した!!……うーん、でもなんだか散漫な印象。 どこかツメが甘い感じもする…」 そんな時はありませんか? そのモヤモヤの原因は細部の調整不足かも。 美しさは細部に宿ります。ちょっとした調整でデザインの質がぐんと上がるかもしれません。 デザインの基本! 文字詰めをチェック まずは以下をご覧ください。 一見、普通の名刺ですが、よーく見てください。 どこか気になるところはありませんか…? 赤く印をつけた部分、気になりませんか? 隣り合う文字の空きが不自然ですね。目線がつまづき、読んでいて違和感を感じます。 また、見た目にも不安定な印象があります。 このように文字の間隔が不自然に見える原因は、文字を「ベタ打ち」しているからです。 「
したがってSameSite=Lax化の影響を調べるには、「アンカータグとGETのfrom以外で、異なるRegistrable Domainから生成されたリクエストでCookieを使用していないか」ということを確認する必要があります。 しかしこれを漏れなく確認していくことは、なかなか骨の折れる作業ではないでしょうか。 アクセスログのRefererヘッダを見れば、異なるRegistrable Domainから送られてきたリクエストかどうか、ある程度わかりそうな気もしますが、Refererヘッダは送られないケースが多々あったり、そもそもリクエスト生成元のタグ名を判別できなかったりと完璧ではありません。 Fetch Metadataリクエストヘッダとは Fetch Metadataリクエストヘッダとは、一言で言うと「リクエストが生成されたコンテキストをサーバ側に通知するためのヘッダ」です。 ざっく
Safari, Chrome はデスクトップ版とスマホ版で確認しましたが共に動作の違いはありませんでした。 Firefox のバージョンが2つあるのは本稿執筆中にバージョンアップがあったので試してみたところ、タイムリーに @import の Preload Scanner に機能改善が見られたため参考までに両方載せました。 項目数で最も多くの種類のリソースを Preload Scanner が読み込めたのは Safari で、次いで IE11, Chrome, Firefox71, Opera が並ぶ結果となりました。IE11は意外な健闘を見せていますが、Preload Scanner にあたる機能を最初に導入したブラウザがIE8である事を考えると妥当な結果とも言えます。 どのブラウザも共通して対応しているのは <script> <script async> <link rel="styl
高価なRADIUSアプライアンス不要!コストをかけずに無線LANをActive DirectoryアカウントでWPA2エンタープライズ認証する WiFiRADIUSActive DirectoryWPA2 エンタープライズ 情シス担当のますいです。 無線LANの認証方式として主流なものに、WPA2-PSK(WPA2 パーソナル)とWPA2 エンタープライズ(WPA2-EAP)があります。 WPA2-PSKは、事前共有鍵(PSK)のみを認証キーとして用いるため設定が簡単で手軽に導入できる一方で、PSKが漏洩してしまうと不正侵入されるおそれがあるなどセキュリティ上のリスクがあります。 WPA2 エンタープライズは、ユーザー単位あるいはデバイス単位で認証することができ、よりセキュリティの高い環境を実現することができますが、 構築方法がわからない、コストが高そうなどの理由で導入に踏み切れていない組
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 JavaScriptSEOWebGoogleGooglebotE-A-TYMYLSearch Consolerobots.txtクロールバジェットsitemap.xml こんにちは、羽山です。 ふと過去に執筆した記事を振り返ったのですが、フロントエンドのパフォーマンスの話・bashのプロセス置換・Androidアプリのパフォーマンス・DoS攻撃対策などなど、記事の方向性が毎回バラバラすぎて自分は何の専門なんだろう?と疑問に思えてきました。 まあそれは気にしないとして、今回もご多分に漏れず今までの記事とは全く異なる領域の話です。 話のベースはSEOについてですが、 心得 とか 考え方 のような話題が中心です。前半は歴史の振り返りから将来の動きなどを考えて、後半
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 スキルマップ行動経済学UXUIデザイン思考ユーザーリサーチVPoDマネジメントアクセシビリティデザインシンキングノンデザイナーエンジニアが知るべきデザイン業務 こんにちは、たむらです。 今回は元々はエンジニア出身者の私が、デザイナー部署のマネジメントをするようになったことで得たことをまとめてみたいと思います。 私は元々は運用周りなどを好んで担当するエンジニアをしていましたが、ここ最近のキャリアでは開発チームのマネージャ、いわゆるVPoE的な役割を担当してきました。ところがちょっとした大人の事情から2年程前よりデザインチームのマネジメントも担うことになりました。私はデザインという業務に関しては全くの素人です。そこで、実業務は基本的に現場のデザイナーに任せ、私は
UnityGoogle APIAR こんにちは、Paid開発ユニット werdnaの酒井です。 メインの業務で動かしている感のあるものをあまり触っていなかったため、気分を新たにUnityとGoogle APIを使って簡単なandroidのARアプリを作成した話をしたいと思います。 進めるにあたって、下記技術書を参考にしつつ作成していました。 UnityによるARゲーム開発 ―作りながら学ぶオーグメンテッドリアリティ入門 目的 Hololens2が気になっており、UnityがHololens対応するという話を聞いたので、 カメラ上にオブジェクトや地図を配置し動かすものを作ってみることで発売されて開発するためのイメトレとして実施しています。 今回作成するアプリは、Google APIとandroid端末のセンサー、カメラを用いた経路案内アプリを作成します。 端末上にカメラの映像が表示されており
デザインHowtoIllustrator3Dインフォグラフィック こんにちは。デザイン戦略部のコバヤシです。 Webデザイナーですが、たまにイラストを描いたりします。 少し前にラクーンが運営する越境ECサイト「SD export」3周年を記念するインフォグラフィックを作成しました。 このイラストは「Isometric(アイソメトリック)」と言われる技法で、Illustratorを使って作成しています。 アイソメトリックとは交差した三軸が同じ角度で交わる立体的な俯瞰図のことです。 この中で使われている立体的なアイテムのほどんどは平面のイラストから生成されました。 今回はその作成方法をご紹介します。 作り方まとめ 1.平面のイラストに3D効果を適用 2.アウトライン化して面ごとに着色 2ステップだけです。パスを使って色々描写する必要はありません。 以下、詳細を説明します。 まずは立体化の基礎と
こんにちは、brownieユニットに移動した堀口です。 今回はRubyのtimeoutメソッドを使った時にロールバックされなかった話です。 先に理由だけ書いちゃうとtimeoutメソッドが悪いというよりメソッド内でthrow~catchを使っているせいでした。 ここではthrow~catchを使うと何故ロールバックされないのか、またtimeoutメソッドでどう処理されているかを説明していきます。 やりたかったこと とあるバッチで使用しているAPIがたまに処理が長くて30分以上経っても終わらない場合、タイムアウトさせてDB更新のロールバックすることにしました。 以下のような感じです。 DB更新 ↓ API実行 ↓ 処理が長い場合、タイムアウト発生 ↓ ロールバック ということをしたかったんです... タイムアウトした時にロールバックさせたい! Rubyでタイムアウトするには Rubyでタイム
UnionFS こんにちは。インフラ担当のいせです。 みなさんはテストに使用するデータをどのように用意していますか? ラクーンが運営するSUPER DELIVERYはECサイトなので商品の画像がたくさん並んでいます。 リリース前のテストでは、それらの画像を当てはめて確認したくなるときがあります。 本番環境では商品の画像はストレージサーバに保存されており、NFSで各アプリケーションサーバにマウントされています。 しかし、テスト中に画像の追加や削除が行われる可能性があるため、本番環境のストレージをそのままテストサーバにマウントさせるわけにはいきません。 かといってテスト用のストレージサーバを作るとなると、テスト環境の数だけサーバを用意する必要がでてきます。また、本番環境のストレージサーバから定期的に画像を転送するという手間も発生してしまいます。 今回はこのような課題をUnionFSを使用して解
PHPRubyLaravelRuby on Railsフレームワーク こんにちは!開発チームのさいとーです。 近年、PHPのフレームワーク界隈では「Laravel」が盛り上がっていますね。 ラクーンではLaravelを使用したサービスの開発は行ってはいないのですが、 今後の開発の選択肢の1つとして挙げられるようにと、一通りの機能をリサーチしました。 「Ruby on Rails」(以下Rails)と似ているとは聞いていたのですが、実際使ってみると本当に似ていました。 一方で、言語仕様や思想の違いから異なる部分も見えてきました。 ということで今回は「Laravel」と「Rails」を機能毎に比較し、似ている部分、異なる部分をまとめてみました! ※Laravel5.7 と Rails5.2.2 を比較しています。 ルーティング編 まずはルーティングです。 ルーティングの記述 Laravel r
開発チームの下田です。 10年前、私が新人のころに勉強するときに辛かったことが、「どの技術書を読んでいいかわからない」ことでした。 IT系ではない学部を出ていたので、先輩に聞いた本やネットに書いてあるおすすめ本を読んでも、難しすぎてまったく理解できないこともありました。 また、最初の方はプログラミングの入門書から探そうとしていたのですが、実際にITエンジニアの仕事に携わってみると、プログラミング入門書以外にも必要な知識がたくさんありました。 そこで未経験でも読みやすく、どんな場合でも役に立つ基礎知識を蓄えられる技術書をセレクトしました。 できれば全部読んでほしいですが、いきなり10冊というと積んでしまう可能性が高いので、上から選んでいくとよいと思います。 Linux コマンドライン 入門者のLinux 素朴な疑問を解消しながら学ぶ ITエンジニアなら、GUIよりコマンドラインを使うべきです
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 JavaScriptVue.jsVuePressFirebase こんにちは、2018年度新卒で開発チーム所属の川崎です。 今回はVuePressを使って、記事一覧と前後投稿リンク付きのブログサイトを作成してみましょう。 VuePressはVue.jsが使えるなら学習コストが低く、カスタマイズしやすい静的サイトジェネレータです。 サイトの公開にはFirebase Hostingを利用します。 はじめに 静的サイトジェネレータとは サイトの共通部分(ヘッダーやサイドバーなど)を自動的に自分が作成したページと結合して、HTMLやJavaScript、CSSといった静的コンテンツとして出力するライブラリ・フレームワークのことを指します。 公開にアプリケーションサー
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 bashインフラLinuxプロセス置換ファイルディスクリプタシェルスクリプト こんにちは、羽山です。 今回は意外と知らないかもしれないbashの「プロセス置換」という機能を紹介します。 UNIXでは「1つのプログラムは1つの機能にとどめ、フィルタとして動作できるようにせよ」という設計思想があります。 その言葉の通り、大抵のコマンドはパイプでつないでフィルタのように動作可能ですが、必ずしも理想的に設計されていない、もしくは仕様上できないコマンドもあります。 例えば、よく使う diff コマンドがこれにあたります。 指定するファイル名を - とすれば片方は標準入力から読み込めますが、もう片方はどうしても引数で指定しなければいけません。 コマンドの実行結果を直接比
次のページ
このページを最初にブックマークしてみませんか?
『Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く