サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
techblog.raccoon.ne.jp
プロジェクトマネジメント こんにちは!ラクーンテーブルゲーム会の部長をしている下田です。 ラクーングループではサークル活動を積極的に行っていて、ゲーム系のサークルは特に活発に活動しています。ゲームで遊んでいると、いろんなノウハウがたくさん詰め込まれているなあと思うことがあります。 任天堂のピクミン 3 デラックス等のピクミンシリーズは私の好きなゲームの一つです。ピクミンは会社経営に通ずるといった話がありますが、今回改めてプロジェクトマネジメントに当てはめて、リーダーに求められていることを考えてみました。何がリーダーに必要なのか考えながらピクミンシリーズを遊ぶと、ひょっとしたらリーダーとして成長するのではないかと思い立ちました。 今回はピクミンシリーズに秘められている、プロジェクトリーダーに求められる大切なことを解説していきたいと思います。 注意!ゲームと現実は違います 当たり前ですが、ゲー
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 技術部のアベです。 一般的にエクセルの内容をプログラム的に変化させるにはVBA / マクロを使用すると思いますが、モジュールを活用してjavascriptでエクセルの編集が出来るのは簡単だし便利だなぁと思ったので、今回はnode.jsのpackageのxlsx-populateを使用してエクセルを編集してみました。 この記事ではnode.jsを使用する為、実行環境はnode.js公式からダウンロード・インストールを行ってください。 xlsx-populateを使ってみる 新規エクセルファイルの作成 新規エクセルファイルを作成する 新規エクセルファイルを作成してみましょう。 const XlsxPopulate = require("xlsx-populate
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 インフラAWS CloudFormation入門 – ハマリポイント・注意点 AWSCloudFormation こんにちは。インフラ担当のいせです。 弊社が運用しているサービスのなかのいくつかはAWS上で動いています。 当初はWebコンソールでリソースの作成や設定変更を行っていたのですが、だんだん規模が大きくなるなかで手作業での設定には限界を感じ、CloudFormation(以下CFN)を利用することにしました。 今回はCFNの社内向け勉強会の資料をブログとしてまとめてみます。 CFNとは CFNはyamlなどでAWSの設定内容を記述したテンプレートを元に、リソース構築や設定変更を行ってくれるサービスです。 ざっくりした使い方 新規作成 テンプレートを作
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 パフォーマンス勉強会OracleデータベースMySQLInnoDB こんにちは、羽山です。今回はOracleデータベースのチューニングで少し踏み込んだ内容です。途中で比較対象としてMySQLも登場します。 日頃からSQLチューニングの機会があってそれなりに得意としているのに、それでもなぜかパフォーマンスがでないSQLに悩んだ経験はありませんか? 謎の遅い現象は特に大規模データベースになってくると発生しがちなのですが、速い場合も遅い場合も必ず理由があります。そこで本記事ではデータベースのチューニングにおいて意外と見落とされがちなローレベルな部分に着目して、さらに一歩上のパフォーマンスチューニングに必要な知識を解説します。 この記事を書くきっかけとなったのは私た
最近競技プログラミングを始めた開発チームの下田です。 会社でもプログラミングを主に行う仕事をしていますが、卸・仕入れサイト スーパーデリバリーといったサービス開発とはまったく違う難しさがあり、四苦八苦しながらも楽しんでいます。 会社でソフトウェア開発を行う場合、開発を簡単に始められるように、会社で開発環境を用意します。競技プログラミングサイトでもオンラインジャッジシステムが用意されていますが、機能が物足りない場合が多く、各自で用意することが多いのではないでしょうか。 自分で使うために、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 エンタープライズは、ユーザー単位あるいはデバイス単位で認証することができ、よりセキュリティの高い環境を実現することができますが、 構築方法がわからない、コストが高そうなどの理由で導入に踏み切れていない組
速いウェブアプリケーションについて調べていくと、MVVMパターンというデザインパターンをよく見ます。 代表的なところだと、Vue.jsがMVVMパターンです。 MVVMパターンって何だろうと調べると、このような図で説明されます。 ModelはViewModelとつながっていて、ViewModelとViewがデータバインディングしています。 Wikipediaなどを参考にしてみましたが、活用方法まで理解しきれなかったので、もう少し詳しく調べてみました。 なりたち MVVMパターンは2005年マイクロソフト社のJohnGossman氏によって、こちらのブログで発表されています。 Introduction to Model/View/ViewModel pattern for building WPF apps マイクロソフト社のエンジニアがWとつくアプリ向け、つまりWindowsアプリ向けのデ
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 WebGoogleGooglebotE-A-TYMYLSearch Consolerobots.txtクロールバジェットsitemap.xmlJavaScriptSEO こんにちは、羽山です。 ふと過去に執筆した記事を振り返ったのですが、フロントエンドのパフォーマンスの話・bashのプロセス置換・Androidアプリのパフォーマンス・DoS攻撃対策などなど、記事の方向性が毎回バラバラすぎて自分は何の専門なんだろう?と疑問に思えてきました。 まあそれは気にしないとして、今回もご多分に漏れず今までの記事とは全く異なる領域の話です。 話のベースはSEOについてですが、 心得 とか 考え方 のような話題が中心です。前半は歴史の振り返りから将来の動きなどを考えて、後半
こんにちは!SDの開発担当のさいとーです! 今回のネタは「SVG」です! 皆さん、SVG使ってますか?? SVG形式の画像って、拡大しても荒くならないとか、ロゴとかによく使われているとか、そういったイメージを持っている方が多いかもしれません。 良く使われているjpgやpngなどの画像形式との比較を簡単にまとめるとこんな感じになります。 特徴 SVG(ベクター画像) jpgやpng(ラスター画像) ここまでは良く目にする特徴かもしれませんが、 SVGはもっと色々なことができます! この記事では、SVGにCSSやjavascriptを組み込んで「機能を持つSVG画像」を作り、 その機能をHTMLから呼び出す、ということをやっていきたいと思います。 例として、SVG画像でローディングアニメーションを作成してみましょう! SVGの表示方法 まずはSVG画像の表示方法からご紹介します。 ※SVG画像
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 マネジメントアクセシビリティデザインシンキングノンデザイナースキルマップエンジニアが知るべきデザイン業務行動経済学UXUIデザイン思考ユーザーリサーチVPoD こんにちは、たむらです。 今回は元々はエンジニア出身者の私が、デザイナー部署のマネジメントをするようになったことで得たことをまとめてみたいと思います。 私は元々は運用周りなどを好んで担当するエンジニアをしていましたが、ここ最近のキャリアでは開発チームのマネージャ、いわゆるVPoE的な役割を担当してきました。ところがちょっとした大人の事情から2年程前よりデザインチームのマネジメントも担うことになりました。私はデザインという業務に関しては全くの素人です。そこで、実業務は基本的に現場のデザイナーに任せ、私は
UnityGoogle APIAR こんにちは、Paid開発ユニット werdnaの酒井です。 メインの業務で動かしている感のあるものをあまり触っていなかったため、気分を新たにUnityとGoogle APIを使って簡単なandroidのARアプリを作成した話をしたいと思います。 進めるにあたって、下記技術書を参考にしつつ作成していました。 UnityによるARゲーム開発 ―作りながら学ぶオーグメンテッドリアリティ入門 目的 Hololens2が気になっており、UnityがHololens対応するという話を聞いたので、 カメラ上にオブジェクトや地図を配置し動かすものを作ってみることで発売されて開発するためのイメトレとして実施しています。 今回作成するアプリは、Google APIとandroid端末のセンサー、カメラを用いた経路案内アプリを作成します。 端末上にカメラの映像が表示されており
3DインフォグラフィックデザインHowtoIllustrator こんにちは。デザイン戦略部のコバヤシです。 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でタイム
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 はじめまして。インフラまわりの担当をしているいせです。 インフラエンジニアなら誰しもExcelでネットワーク構成図を作成した経験があるのではないでしょうか? 私はラクーンに就職する前に2社で働いた経験があるのですが、いずれの現場でもExcelの構成図を触る機会がありました。 そんなExcelのネットワーク構成図ですが、私は以下の点で不便に感じています。 図形の中のテキストを検索できない 図形の位置をそろえるのが面倒 構成図を更新したときなどに差分比較しにくい 構成図の規模が大きくなるとうまくレイアウトするのが大変 そこで、テキストベースでホストやネットワークの関係性(ホストAとBは同じセグメント、セグメントZとYはルータRを介して接続される、など)を記述する
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よりコマンドラインを使うべきです
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 開発チームの下田です。 こないだ第3世代のecho dotが発売されました。が、第3世代のecho dotは独自仕様の電源で、ちょっと不便だと思いました。 そこでなくならないうちにUSB給電の5V 2Aで動作する第二世代のecho dotを購入しました。 足りない機能は自分で開発できて楽しいです。Alexaに自然に語りかけるようにIFTTTを操作できるスキルを作ってみたので、手順を説明します。 IFTTTとは IF This Then Thatの頭文字から名前をつけられたサービスで、直訳すると「これならば何かする」という意味です。 例えば、「3時になった」ならば「おやつの催促をメール」するといったことができるサービスです。 時間だけでなく、特定のURLにリク
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 JavaScriptVue.jsVuePressFirebase こんにちは、2018年度新卒で開発チーム所属の川崎です。 今回はVuePressを使って、記事一覧と前後投稿リンク付きのブログサイトを作成してみましょう。 VuePressはVue.jsが使えるなら学習コストが低く、カスタマイズしやすい静的サイトジェネレータです。 サイトの公開にはFirebase Hostingを利用します。 はじめに 静的サイトジェネレータとは サイトの共通部分(ヘッダーやサイドバーなど)を自動的に自分が作成したページと結合して、HTMLやJavaScript、CSSといった静的コンテンツとして出力するライブラリ・フレームワークのことを指します。 公開にアプリケーションサー
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 bashインフラLinuxプロセス置換ファイルディスクリプタシェルスクリプト こんにちは、羽山です。 今回は意外と知らないかもしれないbashの「プロセス置換」という機能を紹介します。 UNIXでは「1つのプログラムは1つの機能にとどめ、フィルタとして動作できるようにせよ」という設計思想があります。 その言葉の通り、大抵のコマンドはパイプでつないでフィルタのように動作可能ですが、必ずしも理想的に設計されていない、もしくは仕様上できないコマンドもあります。 例えば、よく使う diff コマンドがこれにあたります。 指定するファイル名を - とすれば片方は標準入力から読み込めますが、もう片方はどうしても引数で指定しなければいけません。 コマンドの実行結果を直接比
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 JavaScriptNode.jsVisualStudioCode拡張機能 こんにちは。開発チームの阿部です。 プログラムを開発する際に必要となるテキストエディターはSublime Text、Atom、VS Code など、 高性能・高機能を持つものが増えてきました。 今回はその内の1つVS Codeの拡張機能(extension)を使用してRssを取得する機能を作成してみたいと思います。 ※記事中盤あたりにRssの取得の具体的な方法を載せています。 またVS Codeの公式ページ・概要をリンクして置きました。 良かったら一度見てみてください。 Visual Studio Code 日本語 Visual Studio Code doc 英語 Visual S
会計仕訳財務諸表システム開発会計処理財務会計ソフトウェア資産計上ソフトウェア仮勘定 こんにちは、たむらです。 システム開発で基幹系システムや金融系システムの開発に携わる際に会計の知識を使うことがあると思いますが、そもそもシステム開発という業務自体は会計上どの様に扱われているのか意識したことはあるでしょうか?今回はシステム開発業務そのものが、どう仕分けされるのかをまとめてみたいと思います。 なお、ここで書いている内容は私が以前所属していた会社などの情報を元にしたざっくりしたもので、複雑な会計仕訳を正確に示したものではありません。また会社により異なるものでもある為、あくまで一例であり、参考情報として読んで頂ければと思います。 まず、一口にシステム開発といっても、仕訳はその開発(契約)形態により大きく異なります。代表的なケースである以下の3つのケースでそれぞれ見ていきましょう。 1. 受託開発
JavaScriptMarkdown 開発チームの下田です。 普段仕事をしていて、「めんどくさい」と思ったことはありませんか? そんなときこそプログラミングの出番です。 「めんどくさい」=単純作業であることが多く、簡単なコードを書くとサクッと解決できる可能性が高いです。 私はたった今、このブログの執筆がめんどうくさいです。 どのように面倒くさいかというと少々古めのCGMを使っているため、次のような問題が起きています。 問題点 まともな見栄えにするには、HTMLで記述しなければならない コードを貼り付けるときは、エスケープする必要があり、preタグのclassに"prettyprint"を指定しなければならない 見出しはh2タグ、小見出しはh3タグになっている 解決方法 本来はCGMを乗り換えるべきなのですが、やんごとなき事情により実現できない場合があります。 小手先で解決するために、コンテ
次のページ
このページを最初にブックマークしてみませんか?
『Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く