Platformグループでマネージャーをしている松田（ @tadamatu ） です。 この記事に書いてあること GitHub Actions を利用し 「OpenAPI の自動バージョニング」から「API Clientのnpmパッケージ生成」までを完全自動化 したのですが、その際に ハマったこと、工夫したこと が結構あったので、シェアしておきたいと思い書かせていただいた記事になります。 具体的には以下のような内容について書いてあります。 Branch protection rulesを維持した状態で、workflowからだけはcommitをさせたい（bypass機能を利用） → 文中の(3-2) 別ブランチの GitHub packages に npm publish したい（通常は何もしなければGitHub Actionsからは同じリポジトリのGitHub packagesにしか np
こんにちは、モバイル基盤部の加藤です。 モバイル基盤部では開発者の開発環境や CI 環境の改善に取り組んでいます。 今回はその中でクックパッド Android アプリの CI 環境を CodeBuild へ移行した取り組みを紹介します。 クックパッド Android アプリで先行して移行を行った話となっていますが、他プロジェクトに関しては今後順次移行する予定となっています。 これまでの CI 環境 この記事では以前 Android アプリの CI 環境を紹介した Genymotion On Demandを使うようになってAndroidのCIがさらに1分短縮した話 からの差分を中心にご紹介します。 上記の記事をまだ読まれてない方はぜひご一読の上この記事を読まれることをおすすめします。 これまでの CI 環境の概要を説明すると以下のような図の構成となっていました。 既存環境の問題点 以前の記事
MIDAS TECH STUDY #2
背景 保育園の役員や謝恩会の委員、アルバム制作など、多くの人が経験することとと思います。 その中で、アルバム制作の写真集めを、GASを使って効率化した話を書きます。 エンジニアの仕事の効率化ではないことを最初に謝っておきます。ごめんなさい。 長女(9)の時に苦労して、長男(7)の時に効率化した話です。 GASのコードは、初めてGASを書いた状態なので燦々たる状態ですが、現状リファクタリングニーズがないのでこのまま供養します。 課題 子供達の保育園では、卒園アルバム制作が保護者のタスクとなっています。 例年、下記の内容でアルバム制作を進めています。 1. 業者選定 2. 分担（デザイン、撮影、データ） 3. 分担に分かれて作業 4. 納品 5. 配布 この中で、データ担当になり、写真データを集めて管理していた話です。 年にもよりますが、長女の時は、3000枚程度の写真を集めていました 何時間
最近はフロントエンドエンジニア(主にReact)をしているYano (@yuki_ycino) といいます。 この記事では自分が開発に使っているNeovim周りの環境と、その大まかな構成について書いていきます。 追記 後日、自分がNeovimでフロントエンド開発を行っている理由とVSCode という記事を書きました。 合わせて読んでいただけると幸いです。 はじめに 自分は現在フロントエンド開発のほぼ全てをNeovimで行っています。 個人的にはVSCodeと遜色なく(むしろ効率よく)開発できていると思うのですが、VSCodeではシンプルな設定で開発を始められるのに対し、Vimはどうしても設定のハードルが高いです。 具体的には現在5000行弱のVimの設定ファイルと100個前後のプラグインを導入して開発しています。 ただ、それを他の方に勧めるのは無茶なので、この記事ではほぼ最小構成に近いTy
はじめに Webアプリケーションの開発時やテスト時にはテスト用のユーザーを作成するために適当なメールアドレスとパスワードを登録することが多いと思います。 このとき、みなさんはこんなふうにデタラメなドメインをメアドに使ってないでしょうか？ 「こんなデタラメなドメイン、あるわけないやろ！」と思うかもしれませんが、自分はデタラメに付けたつもりでも意外とかなりの高確率でそのドメインは実在します。 実際、上の例で挙げたドメインをブラウザに入力すると、いずれも何かしらページが表示されます。 つまり、そのドメインは現在誰かが使っているということがわかります。 https://hoge.com/ http://testmail.com/ https://www.bbb.org (bbb.com から転送される) 実在するドメインだと何が困るの？ 何らかの間違いでその実在するドメインに向けてメールが送信され
back check 事業部に業務委託でコミットしているフロントエンドエンジニアの potato4d です。 ROXX では、 v1.0 が出る前から、プロダクト、コーポレートサイト、ランディングページ、メディアなど、多くのシーンにて、 Nuxt.js が採用されています。 Nuxt.js は多くの人に愛される一方で、最近は Vue 3.0 の話もあり、多少評価が落ち着いてきた印象があります。 この記事では、十分に普及した今だからこそ、 Nuxt.js の本当の優位性と、どういったときに使うべきか。あるいは使うべきでないかを再度言語化できればと思います。 「SSRとルールだけ」という勘違い まずは Nuxt.js の採用についてです。多くの場合、「Vue か Nuxt か」という問いには、いかが判断基準として使われます。 SSR 今必要かどうか Nuxt.js の組み込みのルールをチームに
https://contrib.rocks はGitHubのAPIから取得したコントリビューター情報からSVG画像を生成している。これまでは SVG.js を使ったTypeScriptでの実装だったが、興味本位でRustで実装したものをWebAssembly(wasm)として実行するようにしたところ、パフォーマンスが顕著に向上したためそのまま採用することにした。 Rustもwasmもまともに触ったのは今回がはじめてだったため、実装には洗練する余地が多分にあるだろうが、この記事ではとりあえず作業の記録を書き残す。 NxワークスペースにRustをセットアップするまずはじめに、Nxのワークスペース内でRustの開発環境を整えた。Cargoにもワークスペース機能があり、複数のプロジェクトの依存関係解決を集約できる。 ドキュメントに従い、ワークスペースのルートディレクトリに Cargo.toml を
株式会社スクウェア・エニックス／株式会社コロプラの導入事例：『ドラゴンクエストウォーク』に Cloud Spanner、GKE 活用 ここ数年、スマートフォンで取得した位置情報を元に、ユーザーが現実世界を動き回る事で「冒険」感覚を楽しめる「位置ゲー」（通称）が人気です。中でもその大本命とされているのが、人気ゲーム作品『ドラゴンクエスト』シリーズの世界観を盛り込んだ『ドラゴンクエストウォーク』。2019 年 9 月に配信をスタートし、その社会現象的大ヒットにも関わらず、現在までネットワークやシステム系のトラブルがほとんど発生していないという、その秘訣を伺いました。 利用している Google Cloud Platform サービス：Google Kubernetes Engine、Cloud Spanner など Google Cloud の先進テクノロジーはゲーム開発にも極めて魅力的「皆さ
新型コロナウイルス感染症が世界的に拡大し、 私たちの仕事に大きな影響を与えています。 そこで、サイボウズが10年間のテレワークで得た経験を共有するWebサイトを 急ごしらえではありますが、開設いたしました。 ひとつの例として参考になれば幸いです。
こんにちは、スタディプラスの須藤(id:kurotyann)です。 昨年の9月にFlutterとFirebaseで新規サービス「ポルト Porto」をリリースしました。 tech.studyplus.co.jp ポルトはアプリ内課金を未実装でローンチしました1。ローンチ時の決済手段は、Stripeを使ったWebクレジット決済（月額制で無料トライアル14日間）のみです。 高校生をメインターゲットとしながらもアプリ内課金がないのは大きな課題であったため、今年の2月25日にアプリ内課金をリリースしました。 そこで、今回は「FlutterとFirebaseに焦点をあてて」アプリ内課金の定期購入の実装ポイントを紹介します。 1. 技術選定 システム構成図 まず、システム構成図で全体像を示します。 アプリ内課金（定期購入） 定期購入のステータス変更通知 Flutter（アプリ側） Flutterにはア
※ この記事は2021年6月21日に行われた「進化するフロントエンド2021 − 4プロダクトから学ぶSPA/PWAの技術と実践−」の登壇を文字起こししたものになります noteのフロントエンドの歴史 ではまず自己紹介をさせていただきます。フロントエンドエンジニアの山形と申します。よろしくお願いします。 去年の3月に入社したので、noteには1年3ヶ月くらいいます。趣味でコーヒーの焙煎とかやっています。 今回はnoteが抱えているフロントエンドの課題をどう解決していったのかを話していきたいと思います。 最初にnoteが今までどうやって実装されていたのか、その歴史を説明していきます。 初期のnoteはRuby on Railsのアセット上に構築されたSPAサイトで、フロントはAngularJSとCoffeeScriptで書かれていました。 この構成はかなりの問題を含んでいました。 1つ目はS
「PWA Night Conference 2021」にて発表した資料になります https://conf2021.pwanight.jp/ タイトル:PWAとクラウドゲーミングの現状そしてPWAとOOParts Pitch: https://app.pitch.com/app/public/player/75d8b9b3-b9a2-4cce-a132-aba3dc112ffd OOParts: https://oo.parts
こんにちは、Unityエンジニアの菅谷です。 今回はMirrativのギフト機能について紹介します。特にMirrativ内のアバター（エモモ）を利用したMirrativ特有のギフトについて解説します。 Mirrativのギフト ギフトは配信を盛り上げるための機能の一つで、視聴者がギフトを贈ることで配信者の画面に演出が表示されます。 代表的なギフト演出を仕組みごとに紹介します。 スタンプギフトやシンプルなアニメーションギフトでは、Lottieライブラリ（iOS/Android）を利用してギフトの画像をアニメーションさせています。 LottieはAfter Effectsから出力したJsonファイルをそのまま利用することができます。 スタンプギフトは画面上にアイコンやアニメーションを表示します。 ギフトは30種類以上あり、様々なシチュエーションに合わせて贈られています。 また、エモモと連動した
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに 個人で開発した「縦笛なめなめVR」というVRゲームを2020年8月15日にリリースしたのですが、 今回はその売上などのデータはもちろん、 そこに至るまでの戦略や知見を全て公開しちゃおうという感じの記事です！ 以前、同じく個人で開発したVRゲーム「札束風呂VR」の売上公開記事も書いていたりします。 なお、この記事は「Twitterでフォロー+RTをしてくれた人だけが読める記事」という事を試すために、 先行公開していたりします。ただし、各種数値は現在のものに更新していますし、 これからの方針等はその時から結構変わっています。 SteamのVRカテゴリ売上ランキング1位にもなった「縦笛なめなめVR」の売上(とついでに経緯やプロモ方法の)記事を書いたので限定公開します！ 【記事を見る方法】 1.@Kan_Kikuchi をフォロー 2.このツイートをRT 3.@Kan_Kikuchiに「
@チャリティーカンファレンス沖縄 vol.1 フロントエンド編 2020 / 6 / 21 (Sun) https://charity-conf.okinawa.jp/
はじめに 仕事で解決したいことがあり、Web Push と Service Worker（以下 SW）の利用を検討しようかなと思っています 調べると Firebase Cloud Messaging（以下 FCM）を使うと簡単に実装できそうだったので、サンプルアプリを作成してみようと思います 今回実装したコードは以下です https://github.com/kurosame/glossary FCM の設定（管理画面） 以下から初期設定を行う 管理画面上での設定は以上で、その後実装する上で必要な情報は「プロジェクトの設定」で確認できます Firebase の初期設定 以下の情報は「プロジェクトの設定」で見れます 隠してますけど、これらの情報は公開してもセキュアです ただし、Firestore などのリソースにアクセスできてしまうと思うので、使っている場合は適切なルールを設定しておく必要は
The shortcomings of building based on the default node image are as follows: Docker image builds are inconsistent. Just like we’re using lockfiles to get a deterministic npm install behavior every time we install npm packages, we’d also like to get deterministic docker image builds. If we build the image from node—which effectively means the node:latest tag—then every build will pull a newly built
GitHub の issue で個人的なタスクを管理する方法を知った。 プログラマではないので普段から GitHub を使うことはないのだけれども、タスクの管理場所に迷っていたのでひとまず手を出してみようと思う。 毎日issueを作成するのも大変で、少しでもハードルを下げることを意識してGitHub Actionsで毎日自動的に作成するようにしてみた。 今回はその実現方法を記しておく。 issueのテンプレートを作成する まずはissueを作成するためのテンプレートを作成する。 これから始めるのでまずはシンプルなものを作成し、今後必要があればカスタマイズする方向で進める。 今回はworkリポジトリを作成し、配下に.github/ISSUE_TEMPLATE/todolist.mdを作成した。 --- name: TODO リスト about: 今日終わらせることの終了済み状態を書こう ti
こんにちは 今日は2/22の猫の日に合わせて個人開発したゲーム「ネコメザシアタック」の技術的なポイントを解説する記事です。去年のバージョンはこちら 作ったもの ソース： https://github.com/yuneco/mezashi2 アプリ： https://nekomzs2.web.app/ （PCでも遊べるけどスマホ推薦です） 使っている技術 そろそろリリース見込みのVue3を先取りした構成です Vue(Vue2 + CompositionAPI) TypeScript CSS Transition（ほとんどのアニメーション） SVG（画像 + 一部のアニメーション） Firebase (Hosting + FireStoreでランキング) おしながき（この記事の内容） 作ったもの全部を解説していくとキリがないので、主に去年からの差分を中心に面白いポイントだけ説明していきます。
GitHub Actions is a convenient CI/CD service provided by GitHub. GitHub Actions by Example is an introduction to the service through annotated examples. Hello World Event Triggers Actions Environment Variables Parallel Jobs Job Ordering Job Matrix Outputs Context Variables Context Expressions
認証付きGraphQL APIサーバーを爆速で立てる。 Hasura + Firebase AuthenticationFirebaseGraphQLcloudfunctionsFirebaseAuthenticationHasura HasuraはPostgreSQLからGraphQL APIサーバーを爆速で構築できるものの、認証については外部の認証基盤を使う必要があります。 今回は、認証基盤としてFirebase AuthenticationのJWT認証を使った例を紹介します。 Hasuraの認証について Hasuraの認証はWebhook方式と、JWT方式があり、今回はJWT方式を使います。 JWTは属性情報をJSONデータ構造で表現したトークンを使い認証を行う方法で、Firebase Authenticationにて採用されています。 Hasuraの認証でFirebase Auth
Figma見せ合いっこ 2021/07/15 で登壇したクックパッドのFigmaの運用のスライド資料です。 https://show-figma-20210715.peatix.com/
はじめに RustでWebアプリケーションのGraphQLバックエンドを実装してみました。その中で、できるだけClean Architectureに沿うように実装してみたので、得られた知見を公開してみたいと思います。 資料に基づきできるだけ正確な記述を目指していますが、誤りもあるかもしれません。また実装から少し時間を空けて執筆しているので、忘れている部分も多く不正確なことが書いてあるかもしれません。 Clean Architectureとは 以下のブログでRobert C. Martin（通称Uncle Bob）によって提唱されたアーキテクチャです。 その後本人により書籍も出版されました。日本語にも翻訳されています。 歴史について簡単に 多層アーキテクチャ (Multitier architecture) というものはかなり昔から考えられていたようです。初出についてはよくわからないのですが
こんにちは、アルダグラムでエンジニアをしている松田です。 Reactで状態を管理するにあたっては、useStateの利用が挙げられることが多いです。 実際、数値や文字列、真偽値などのプリミティブな値であれば、useStateが適切なケースが大半でしょう。 ただ、値を投入するだけではなく、追加・削除・更新といった操作が要求されるケースもあると思います。 その際に、配列やオブジェクトなどといった形式でデータを取り扱うことに併せて、useReducerやuseContextの利用も視野に入れると、開発手法の幅が広がります。 今回は、次の目標に掲げるUIを実現する過程を、useReducerとuseContextの活用方法の1つとしてご紹介します。 目標 以下のような操作ができるUIを作成する。 名前と年齢を入力して、ユーザーを作成 作成したユーザーは一覧に表示 各ユーザーの権限(一般 or 管理
こんにちは！モバイルアプリケーション開発部でスクラムマスターをしている折田 (@orimomo)です。 私たちの部署ではiOSエンジニア・Androidエンジニアが混在する2つのチームを作り、それぞれでスクラムによる開発をおこなっています。 私自身もともとはiOSエンジニアなのですが、現在は専任のスクラムマスターとして両チームに関わらせてもらっています。 最近では各々の継続的な改善が実を結び、スクラムチームとして少しずつ、しかし確実に成長ができているなと感じられるようになりました。 「スクラムが楽しくなってきた！」「いいチームになってきた気がする！」という話をメンバーから聞くことも増え（嬉しい🙌）、ここまで色々あったなぁ…長かったなぁ…と感慨深く思っています。 今回は、そんな私たちが具体的にどのようにスクラムを回しているのか、また以前と比べてどのように変化してきたのかについてご紹介ができ
はじめに はじめまして、分析部の喜久里と申します。様々なゲームサービスや関係部署の課題解決に向けた分析を担当しています。 AIに関連した技術がホットなトピックの1つになって久しいですが、既存の手法やツールと比べてフィージビリティが読みにくい部分があり、様々な場所で適用が試行錯誤されているのが現状です。私たちもこれまで何件もAI関連技術の業務適用を試みており、上手く進められたケースもあればそうでないケースもありました。この記事では、AIを効率よく活用しようという試行錯誤の過程で行った取り組みと工夫を紹介します。 なお、記事全体を通して “AI” という表記を使っていますが、主に機械学習(予測タスクとその周辺技術)やデータサイエンス(施策等の効果検証や説明に関係する技術)のことを指しています。 この記事で扱う内容 この記事で紹介する内容を図1にまとめました。 図1 紹介する内容のサマリ 以下の
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは。クライアントエンジニアを担当している向井です。 NieR Re[in]carnation（以後、リィンカネと呼びます。）では、キャラクター制御の設計から実装、バトルスキルアセットの設計・実装・エディター実装、それら実装の各シーンへの導入実装、アプリケーションビルドのCI環境構築など、幅広く関わらせていただきました。 本記事では、主にリィンカネにおけるキャラクター制御についてその概要と、Unityにおける実装方法について説明します。 1. NieR Re[in]carnationにおけるキャラクター制御とは まずはリィンカネにおけるキャラクター制御について、その概要を説明します。 キャラクター制御では、主に下記の挙動をカバーしています。 キャラクターの基礎挙動（待機・歩きや走り・指定場所への移動・キャラクター追従など）キャラクターの演出挙動（指定されたモーションの再生・タイムライ
masterpiece, best quality, halloween 下記の記事がGoogle砲のおかげで多くのアクセスを頂いていますので、お礼にAI絵師が描いた絵の作例を生成に使ったプロンプト（絵の下に書いてある適当な呪文）とともに、多数掲載しておきます。 アニメキャラクター生成し放題 Waifu Diffusion のモデルを #StableDiffusion web UI (AUTOMATIC1111) に入れて、AIを2次元絵師に txt2imgで描いたものを無修正でそのままExtrasで拡大しています。img2imgやInpaintで修正していけばもっと良くなると思います。こんなレベルの絵を1枚数秒で描いてしまうのはすごいですね。色々使えそう。 （AIの実力を知るため、Stable Diffusion Web UIのNovelAIエミュレーションで生成したものですが、問題もあ
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
shokai.icon masui.icon rakusai.icon progfay.icon yutaro.icon takeru.icon tiro.icon
最近更新したのでちょっと宣伝。 github.com なにこれ 最近、副業だったりプライベートなどでUnityを使う人でテストに興味ある方を対象にTDDについてお話する活動などをしています。その際に座学としてお話することもあれば、ハンズオン形式で実際に手を動かして書いてもらうということもあります。その際に使うサンプルリポジトリです。 ぜひお手元で考えながら書いてみてください。勉強会の資料などで使っていただいても大丈夫です。 なぜやってるのか ゲーム開発はソフトウェア開発の中でもかなり複雑性が高いと感じています。そして性質上変更頻度も高い。ゲームごとに作り方が変わる以上これは仕方ないことだと考えています。だからこそより変化に対応できるようにテスタビリティの高いコードになっていてほしいと考えていますがその難易度、そしてそもそものテストコード文化というものがないためにテストコードが書かれているこ
Chrome and CSS in 2024 journeyed through the forest, over the mountains, and across the seas… 2024 has been another amazing year for CSS! Cross-document view transitions and scroll-driven animations let you add more interactivity to your applications with a few lines of CSS. You can now animate to height: auto;, style scrollbars, and size text inputs to their contents. Many features have become Ba
Movies is a non-trivial demo app built using the TMDB (The Movie Database) API. It is built with learning, but not strict comparison, in mind. Movies is part of the TodoMVC TasteJS project. Credits The Movies App is a non-trivial demo application built on top of the TMDB (The Movie Database) API. It features multiple routes and views, authentication, dark mode and a range of performance optimizati
2020年2月における note Androidアプリの開発現場について、ざっと書きました。 「あれについて聞きたい」、「これについて聞きたい」など質問・疑問などあれば、ぜひ記事にコメントしていただけると嬉しいです。 2019年1月の状況は以下の記事を参照してください。 開発体制Androidエンジニア 1名（私） デザイナー 1名（iOSアプリのデザイナーも含めると2名） QA 1名 どんな改善・施策を行うかは、アプリエンジニアが率先して考えて決めています。主に改善・施策を行うことで、アプリでの体験が向上しそうなものを優先的に実装しています。実装工数を意識することも大事ですが、工数がかかっても体験が向上させることを優先しています。 現在 私がAndroidアプリ開発以外の仕事も担当しているため、アプリ開発に使っている時間をとても限られています。限られた時間の中で、何を今やるべきか？をしっ
noteでエンジニア兼ライターをしているmegayaです。 早いものでnoteはサービススタートから7年が経ち、開発体制も技術も大きく変わってきました。現在でも、さまざまなSaaSサービスの導入が検討され、試験的に運用がされています。 日々、使っていくサービスが変わっていくため、社員の中で「今ってどんなサービスを使って開発しているの？」という声が上がってくるようになりました。 社内のWikiにまとめてもよかったのですが「同じようにサービスを運用している企業の参考になるほうがいいのでは？」と思い、オープン社内報として公開することにしました。 またAnother worksさんが公開していたまとめ記事が読み応えがあり素晴らしかったため、note社でもやってみようという話しになりました。 この記事を読んだ方のサービス運用の助けに少しでもなればうれしい限りです。 ※ 一部、SaaSではないものも含
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く