サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
ceblog.mediba.jp
こんにちは。武田(@tkdn)です。納得度の高いプロダクト開発とは何だったのか 前編では、プロダクト開発に際して直接的な関与ができていない原因は、自分の中の無知・無関心にあったというところで終えました。 後編ではプロダクトマネジメントを意識しながら、どうやってものを作ろうとしているかについて書いていきます。前編よりは実践的になっているはずです。取り組みのご参考にされてください。 プロダクトマネジメントを意識する昨年 11 月にキリの良い大きなリリースがあったため 12 月から 3 つプロダクトを抱えたチームは二手に分かれ、私は au Web ポータル無料ゲームというプロダクトの担当となりました(ヘッドレス CMS による運用についてこのブログでも触れたプロダクトです)。 まず取り掛かったことはプロダクトオーナー(以降 PO)に張り付いた業務を剥がすことと、プロダクトマネジメントの理解でした
技術基盤が固まった、機能別組織機能別組織では各作業工程が直列でチェインしており、ビジネスや企画やディレクション、デザインそして開発から品質管理といった工程の分割が行われます。直列分業により前工程のアウトプットが次工程のインプットとなり、前工程に依存したコンテキストを持つ、リレー的協働が多くなるでしょう。全工程のアウトプットが最終的な成果として統合され、組織の経営成果となるのが特徴です。 機能別組織を成す目的は予測された目標をクリアするためです。 作るものがはっきりしている場合に有効で、最終的な成果統合のために、機能別組織であった開発本部でも予測可能な目標設定を持つことになります。 たとえば事業スキームの形成とそのシステム化が目的であった場合、予測されたゴールはシステムのリリースになるでしょう。リリース後一定の経済効果を生み出すために安定したシステムを提供することも、この組織体の目標になるか
こんにちは。武田(@tkdn)です。 GraphQL を API として採用したサービスを今年序盤にリリースしています。具体的な内容は今年の夏サミ 2020 の公募枠でお話させていただいたのでよろしければ資料もご参考ください。 週一でリリースし続けるためのフロントエンドにおける不確実性との戦い方 / Developers Summit 2020 Summer C-4 - Speaker Deck今日は GraphQL や Apollo Server についての振り返りと反省を中心に供養しておきます。GraphQL 採用に迷いがある開発者、Apollo Server を採用しようとしている開発者へ向けた知見になれば幸いです。 まとめてみたら GraphQL みが思いの外少なくなりましたが、GraphQL Advent Calendar 2020 の 23 日目の記事です。 なぜ GraphQ
この記事は Node.js Advent Calendar 2019、15 日目の記事です。 こんにちは。ものづくり推進部の武田(@tkdn)です。 先日 11/30, 12/1 に弊社がスポンサードさせていただいた JSConf.jp に参加してきました。当日参加したセッションの雑多なメモはパブリックに残し、社内のコンフルには整理したものを展開し知見を持ち帰って実務にいかそうと思います。 会場廊下では、お世話になった方、知り合いのエンジニア、発表された方と立ち話する機会もありまして、情報交換や普段オンラインでのみやりとりしている方ともオフラインでコミュニケーションできて非常に充実したカンファレンスでした。 初日にスポンサートークの枠で 5 分程度ですが、mediba での フロントエンド, JavaScript についてお話させていただきました。表面的なことばかりだったのでもう少し泥臭い
こんにちは。ものづくり推進部、フロントエンドエンジニアの武田です。 今日は Datadog, Lighthouse を使ったクライアントパフォーマンス計測に取り組んでいる、というお話です。 mediba では webpagetest を使った定期実行と計測を以前から行っています。 DataStudioとGASでWebPagetestの計測結果をグラフ化するuknmr/gas-webpagetest紹介記事: gas-webpagetestでWebPagetestのパフォーマンス計測を自動化、可視化する1 での取り組みをベースにし、clasp で GAS のソースコード管理・デプロイを実現するための仕組みや webpagetest Lighthouse test と連携したメトリクスの取得まで網羅したものが 2 になります。 今回は少し webpagetest とは趣向を変えて Lighth
フロントエンド開発部の鳥居です。 サービスのKPIや施策の効果測定などを目的にAnalyticsツールはよく使われますが、Webとモバイルアプリが共存しているサービスでは、WebにGoogle Analytics(GA)、モバイルアプリにFirebase Analytics(FA)と、2つのAnalyticsツールが使われているケースがよくあります。 GAとFAの機能の差異から、分析の際に、GAの機能がFAで使えない、主にフィルタやセグメンテーションの機能が弱く、同じ条件でフィルタができないといった課題がありました。 この課題から、Google Tag Manager(以下GTM)を利用し、FAのデータをGAに転送してGA上でデータを一元的に扱う方法を試してみたので紹介します。 GAとFAの機能の差異から、マーケティング担当の視点では、GAの機能がFAで使えない、主にフィルタやセグメンテー
みなさんこんにちは。 Chef より Ansible 派、インフラストラクチャー部のぬまっちこと沼沢です。 re:Invent 後ですが、Ansible ネタの投稿です。 今回はバージョンが上がる度に強化される AWS 関連モジュールと、そのサンプルをご紹介したいと思います。 そもそも Ansible とは構築する台数が1台や2台のうちは手作業での構築で良いのですが、5台、10台…と増えていくと 初回の構築にかかる工数が膨らむいくら手順化していても人的ミスを引き起こす可能性を秘めている冗長化しているサーバでは、同じコマンドを何回も実行しなくてはいけない環境が壊れた等の理由で、再構築が必要な際にまた同じことをしなくてはいけないというようなことがあるため、工数短縮と作業ミスを減らすために、手作業での構築は減らしたいのです。 特にクラウドが普及してきた昨今では、Immutable Infrast
メディアシステム開発部の野崎です。 メディアシステム開発部では、「au Webポータル」や「au スマートパス」といった、 多くのユーザ様にご利用頂いているサービスを担当しています。 このようなシステムでは新規開発や機能追加時には負荷試験を実施することは必須となります。 そこで今回は、Webシステムの負荷試験について 負荷を生成する環境にフォーカスして、 これまで行ってきたノウハウをまとめてみます。 はじめに負荷試験と言われるものには幾つか種類があります。 性能試験、耐久試験、限界試験、ロードテストなどがありますが、 今回は簡単のために、以下の目的の試験をまとめて負荷試験と呼ぶことにします。 非機能要件で定義した性能を担保できるか?システムの性能の限界はどのくらいなのか?長時間連続して負荷をかけて、サービスイン後状況を再現し、期待通りに動作するか?生成する負荷としては、秒間数百から数千リク
フロントエンドエンジニアの金森です。 最近、企画→デザイン→開発というワークフローを最適化したくて Sketch を本格的に使い始めました。 端的にシンボル最高ですよね。 何が最高かってシンボルの上書き(Nested Overrides)ができるところです。 こんな感じにテキストや画像、アイコンだけでなく形や色まで上書けてしまうなんて😍 アイコンや形の塗りだけでなく、テキストの色も管理できないかと思ったことはないでしょうか。 この記事では試行錯誤してたどり着いた3つの方法について、いいところや悪いところと合わせて紹介します。 方法1: Blending を使う テキストに使いたい色をシンボルにします 色とテキスト(文字色は黒 #000)を同じ大きさで重ねたシンボルを作ります色はテキストより上のレイヤーに配置し Blending: Screen に設定します最下層に白い背景を敷きますこうす
こんにちは、広告システム開発部の菅原です。 今回は構文解析のお話です。構文解析は、コンパイラ、自然言語処理(テキストマイニング)、AST(抽象構文木)、AltJS(Alternatives to Javascript) などのベースとなる重要な技術の一つです。本記事では、実例としてコンパイラを交えて説明しつつ、パーサコンビネータを使って簡単に構文解析を行えることを紹介していきます。 構文解析が使われている技術について 文字列が関わる様々な技術の根底に、構文解析は関与しています。構文解析がどのように関わっているか、その実例としてコンパイラの仕組みを簡単に見ていきます。 コンパイラ(Compiler)とは、人間が理解しやすい高級言語で記述されたプログラムを、ハードウェア寄りの低級言語(機械語もしくは中間言語)に変換するプログラム1です。 一言で「変換」と表記しましたが、このプロセスは、大きく分
こんにちは、インフラストラクチャー部の沼沢です。 AWS の DNS フェイルオーバーの設定についての記事はたくさん出回っていますが、今回は Sorry ページに特化した設定をご紹介します。 以前、社内で AWS 上にシステム構築していた際に、例えば「急激なアクセス増で AutoScaling が間に合わないなどでユーザのリクエストに対して正常に応答できない状態に陥ってしまった時に “画面が真っ白な状態が続くこと” だけは避けたい」という要望を受け、最終手段的な位置付けで構築した Sorry ページ表示の仕組みについてご紹介させていただきます。 特段目新しい技術や情報ではありませんが、AWS にてサーバレスで高可用性な Sorry ページを構築する方法の参考になればと思います。 DNSフェイルオーバーとは?そもそも、DNS フェイルオーバーとはなんなのかを軽くご説明させていただきます。 ※
こんにちは、インフラストラクチャー部の沼沢です。 今回は、CloudFront + S3 での IP アドレスベースのアクセス制限を実現する方法をご紹介します。 実現したかったこと特定の外部拠点から参照されるファイルを S3 に配置したい独自ドメインが使いたかったため、CloudFront を前段に用意ファイルへのアクセスを特定の外部拠点の IP アドレスのみに制限したいS3 の URL への直アクセスはさせたくないこれを実現しようとしてググってみると、 CloudFront の IP アドレスでのアクセス制限S3 の IP アドレスでのアクセス制限CloudFront のみ、S3 のみの方法は出てくるのですが、CloudFront + S3 の方法が出てこなかったので、自分で試してみました。 やったこと先に設定した内容を箇条書きにしてみました。 AWS WAF で IP アドレスベースの
こんにちは。auスマートパス開発部の子安です。 最近すっかり寒くなりましたね。冬といえばコタツです。そしてコタツといえば双六。双六 -> サイコロ -> Redis。 ・・・はい、やっとたどり着きました。今回はRedisの話です。 全てのレコードを吐き出したい今やKVSの代名詞と言えるほど使われているRedisですが、一つ困ったことがあります。 というのも、レコードを全てダンプするようなコマンドがないのです! みなさんどうしていますか? 素直なやり方最初に思いつくのは、KEYSしてMGETかもしれません。 # export_by_keys.py r = redis.StrictRedis(REDIS_HOST) res_keys = r.keys() # KEYS if res_keys: res_mget = r.mget(res_keys) # MGET for key, val in
全国の Ansible 派のみなさん、こんにちは。 Chef より Ansible 派、インフラストラクチャー部の沼沢です。 Ansible を利用する際に、task の実行結果を register に入れて後続の task で利用したりしますよね。 自分は AWS の構築に Ansible を利用することも多いのですが、例えば以下のように、aws ec2 describe-instances の実行結果を register で変数に代入して使うというのはよくあることです。 - tasks: - name: numacchi インスタンスの Instance ID 取得 shell: > aws ec2 describe-instances \ --region ap-northeast-1 \ --filters Name=tag:Name,Values="numacchi" \ --q
mediba Advent Calendar 24日目です。 フロントエンジニアの苅部からはGoogle Data StudioとWebPagetestについて書こうと思います。 medibaシステム本部ではWebPagetestやSitespeedを使って継続したパフォーマンス計測を実施しています。 具体的にはユーザー体験(体感速度)に影響を及ぼすCritical Rendering Pathに注視して、SpeedIndexとDomContentLoaded、FirstPaintの改善を進めています。 普段WebPagetestで計測をしている中で、テスト結果を時系列にグラフ化できたらいいなと思っていたのですが、ちょうど良いタイミングでData Studioが日本でもサービス開始されたので、今回はこれらのツールとGoogle Spread Sheet(以下Spread Sheet)とGo
制作部フロントエンドエンジニアの金森です。Vim 派です。 長期的に運用していく CSS を書くのって難しいですよね? OOCSS や SMACSS、BEM、FLOCSS などの CSS 設計概念を用いてメンテナンスしていても、気がついた時には見るのも嫌になっていることがあります。 OOCSS を考えた Nicole Sullivan 氏1 も、「CSS is awesome. Code is too fragile.(CSS は素晴らしいが、とても壊れやすい)」と述べています2。 Atomic Design の上で実際どのように壊れにくい CSS を構築するのか紹介します。 Atomic Design とはBrad Frost 氏3 が開発した Atomic Design4 とは UI コンポーネントの要素を化学原子論的な要素にみたてたデザインシステムです。 小さく単純なコンポーネントを
こんにちは、制作部 フロントエンドエンジニアの武田です。 入社して5ヶ月経ちました。 ECMAScript の推し proposal は Cancellation API です。 今回は開発には切っても切れない Babel 、そのプリセットである babel-preset-env についてお話します。 このプリセットは Browserslist 1 の記述で compat table 2 を利用し、指定された環境にあったトランスパイルができるプリセットです。 使い方についての記事はすでに多くありますので今回は丁寧に触れません。 babel-preset-env を試す – アカベコマイリ最新版で学ぶwebpack 3入門 - ICS MEDIAピンと来ない方は、JavaScript をとりまくビルド環境のスケーリングに寄与しそう、と大きく理解していただいてよいです。 対象となりそうな人Ba
こんにちは。制作部の平尾です。 前回はAnimate CC→Javascriptに変換してアニメーションを作ってみたお話をしたのですが、今回はVue.jsを触ってみたお話をしようと思います。 事例みたいなものはネット上にたくさん落ちているので、今回はJavaScript初級くらいでも簡単にできて便利だよ。ということをお伝えしたいと思います。 (この記事は mediba Advent Calendar 2016 の5日目です。) Vue.jsとは 本家のサイトに書いてあるものをだいぶ雑に言い換えてみると、HTML(View)と何かしらのデータ(Model)と、それをコントロールするJS(ViewModel)を分けて書くための便利なフレームワークです。いわゆるMVVMでつくるためのフレームワーク。そしてそれがリアクティブなのがステキなところです。 幸せポイント①初心者でもすぐ導入できちゃうくら
フロントエンジニアの苅部です。 medibaシステム本部では一部サービスのA/BテストをGoogle Optimize(以下Optimize)で実施しております。 先日Optimizeの一般利用が可能になったようですので、これから初めてA/Bテストを実施する方に向けて、使用感を共有できたらと思います。 Optimizeの特徴 1. 無償版でも十分使える無償版でもほとんどの機能が利用できるため、予算のないプロジェクトでもすぐに実践的なA/Bテストが開始できます。 実際にOptimizeを使ってA/Bテストを運用していますが、無償版で機能が制限されているというよりも、有償版にすることでGoogle Analyticsのオーディエンスデータを活用できる という印象を受けました。 ツールが評価できない段階で数十万円/月の予算を確保するのはなかなか難しいと思うので、いったん無償版で小さく始められる事
全国の Ansible 派のみなさん、こんにちは。 ブログの投稿頻度急上昇中、インフラストラクチャー部の沼沢です。 今回は Ansible で対話型のスクリプトを自動化する際に利用する expect モジュールについてです。 先日、expect モジュールを利用していて罠にハマったので、その内容と対処法をご紹介したいと思います。 Linux には対話形式の入力を自動化する expect というコマンドがあります。 Linuxの対話がめんどくさい?そんな時こそ自動化だ!-expect編- - Qiita Ansible にも、このコマンドと同じことを実現するモジュールがあり、それが expect モジュールです。覚えやすいですね。 expect - Executes a command and responds to prompts — Ansible Documentation では、この
こんにちは、インフラストラクチャー部の沼沢です。 複数の AWS アカウントを運用していると、それぞれのアカウントの S3 バケットに CloudTrail のログが溜まっていきますが、そのログ、1箇所に集約して監視や可視化をしたくはありませんか? そこで今回は、複数の AWS アカウント上にそれぞれ保存されている CloudTrail ログを集約・可視化する仕組みについてです。 構成図 ① CloudTrail が S3 にログを Put したのをトリガーに、集約先に用意している Lambda を起動 ② Lambda から S3 へログを取りに行く(Roleで権限委譲して取得) ③ Lambda でログファイルを展開し、内容を無加工で CloudWatch Logs に投入 ④ CloudWatch Logs からストリーミングで Elasticsearch Service にログを流
こんにちは。mediba制作部の大村です。 現場でAdobe Creative Cloudを使っているデザイナーさんに朗報です! 既に現場でも使い始めたのではないかと思いますがAdobe Experience Design(以下XD)を使うと普段の作業がサクサクスムーズなんです。2016年6月にリリースされたバージョン4で、メニューが日本語対応となりとても使いやすくなりました。 ちょっと触ってみましたので、レビューします。 参考記事:Adobe XD Preview 4 リリース!日本語UI、オブジェクト間の距離計測、ぼかし機能など 1. Adobeユーザーなら学習コストほとんど無し 少しづつだけど確実に時短できるPhotoshopやIllustratorを使ってUIデザインしている方には、作業時間の短縮が見込めますので、是非使用して欲しいツールです。 ソフト自体のUIは洗練されましたが、
広告システム開発部の佐藤禎章です。 今回は、Firebaseサービスの一つである Cloud Messaging を使用して、ブラウザへ Push 通知を送る仕組みを揃えてみました。 試しやすく単純な仕組みに出来るので、 node を使用して全部 JavaScript で書いてあります。 node : v4.6.0 npm : 2.15.9 今回作成するものの全体は、下記 Github リポジトリに投入してあります。 これをそのまま clone して、API Key などの設定を投入すれば、そのまま使えます。 https://github.com/medi-y-sato/fcm-test-node 前提知識 : Service Worker とは今回の Push 送受信には Service Worker というものを使用します。 これは何かとざっくり言うと、 Webページとは別にバックグラ
こんにちは、品質管理グループの 山本久仁朗です。 みなさんの組織では、テスト対象端末(スマホ・タブレット・ガラケー・etc)を 選定する際に、どのように選定していますか? 選定方法によっては、不具合を発見するには、あまり効果的ではない アプローチも多々あります。 今回は、我々の組織での機種選定方法について、お話いたします。 より効果的なテストを行うために2016年3月末の内閣府の調査により、スマートフォンがガラケーの世帯保有数で 逆転したというニュースも記憶に新しいと思います。 http://www.nikkei.com/article/DGXLASDF08H0R_Y6A400C1EE8000/ いまでは多種多様なスマートフォンが発売されていますが、特に Android は日本で発売された機種だけでも500機種以上存在しているために、 すべての機種でテストを実施するのは現実的ではありません
次のページ
このページを最初にブックマークしてみませんか?
『ceblog.mediba.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く