ブックマークしました ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください Twitterで共有
この記事はBASE Advent Calendar 2019の8日目の記事です。 devblog.thebase.in エンジニアの右京です！ みなさん！Storybook は使っていますか？BASE ではUIコンポーネントの社内展開はもちろん、日々の業務の中でもサンプルの実装を共有したりするために Storybook が使われています。BASEではこれを「特定のリポジトリにコードをコミットすると、自動的に社内向けサーバーへデプロイされる仕組み (ようするに社内 GitHub Pages ですね)」を利用して社内共有しているのですが、毎度のセットアップが大変なので Gtihub Actions を使ってお手軽に設定できるようにしてみたよ、という内容です。 github.co.jp TL;DR 社内用向けドキュメントサーバーへのデプロイを他のリポジトリから使いやすいように Action 化し
この記事はBASE Advent Calendar 2019の6日目の記事です devblog.thebase.in どうもこんにちは、Frontend Groupの青木です BASEではVue.js+TypeScriptを採用したフロントエンド開発を行っています 今回のブログでは、私が業務で直面したちょっとした課題を、Vue.jsのカスタムディレクティブを実装して解決し、npmのパッケージとして公開した話をします 何を作ったか vue-remove-whitespace - npm spanやaなどのinline要素内での改行による意図しないスペースを削除するVue.jsのカスタムディレクティブを作りました 挙動としては <p v-remove-whitespace> お問い合わせは <a href="#">こちらから</a> お願いします </p> というvueのtemplateが、レ
この記事はBASE Advent Calendar 2019 の2日目の記事です。 devblog.thebase.in こんにちは！BASEでFrontend Groupに所属している三佐和 です。主にネットショップ作成サービス「BASE」のフロントエンドを担当しています。 2016年に未経験からBASEでインターンを開始し、その後正社員として入社しました。当時は主にLP などのマークアップや管理画面のUI に関わる細かい修正などを担当しており、使っていた技術は主にHTML, CSS, jQuery で、LP で使うような簡単なアニメーションの実装しかしたことがなかったのでJavaScript の知識はほぼ皆無でした。 今回のブログでは、リーダブルコード を読みながら、今年1年間書いてきた自分のコードを振り返ってみたいと思います。 今年主に取り組んできたこと 昨年、ショップオーナーさんが
こんにちは！BASE BANK株式会社 Dev Divisionでソフトウェアエンジニアをやっている東口（@hgsgtk）です。先日、7月24日〜7月27日にアメリカ・サンディエゴで開催されたGopherCon 2019に参加してきました。初めてのアメリカ、初めての国際カンファレンスで、初めての英語でのLightning Talkをしてきました。当日の会場の様子も含めてGopherCon 2019の参加レポートをします！参加した結果、やっておいてよかったこと・やっておいたほうが良かったことといった反省点などもまとめます。 GopherCon 2019とは GopherCon 2019とは、プログラミング言語Go関連で世界最大級の国際カンファレンスです。今年は6年目となり、世界中から1800名弱のGopherが参加したようです。7月24日から27日にかけて4日間開催されました。 BASEでは
こんにちは、BASEの次世代管理画面プロジェクトでデザインを担当している小山です。 ネットショップ作成サービス「BASE」は2019年2月に、商品管理ページをリニューアルしました。 今回は商品管理ページをリニューアルして、再検討が必要になってしまった機能にどう向き合ってきたかをお伝えできればと思います。 「次世代管理画面プロジェクト」がどのようなコンセプトのプロジェクトであるかは、過去のアドベントカレンダーで早川が書いた記事がありますので、そちらをご覧ください。 devblog.thebase.in 次世代商品管理ページリリース まずは2月にリニューアルされた商品管理ページの Before / After を紹介します。 リニューアルのポイント 今回のリニューアルでは、主に以下の点を変更しました。 スマートフォンファーストなデザイン 新機能（商品の複製、一括削除、一括公開/非公開設定）を追
こんにちは。SREチームの山根（@fumikony）です。 このブログでも東口（@hgsgtk）が何度か紹介している即時資金調達できる金融サービス「YELL BANK(エールバンク)」のインフラまわりに関わっています。 今回は、YELL BANKのデプロイメントパイプラインを構築したときの工夫などを紹介します。 インフラ構成 インフラ構成図 まず大まかなインフラ構成について説明します。上の図は構成図です。 YELL BANKではGo言語でAPIサーバを開発しており、ビルドしたコンテナをECSのFargateモードを使って動かしています。 コンテナレジストリにはAWSのECRを使っています。 また複数AWSアカウント構成をとっていて、本番・ステージング・開発の各環境ごとに個別のAWSアカウントを用意しています。 今回のデプロイ機構ではこれらの環境のうち本番環境（prd）およびステージング環境
フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上（1ページあたりの閲覧時間が長く相対的にローディン
Page Speed Insights の score を 定期的に計測して、DataStudio でグラフ化する 投稿者: kem / 右記内 Page Speed Insights / 投稿日:2017-12-07 ( 6 年, 10 ヶ月 ago) / 更新日:2017-12-08 ( 6 年, 10 ヶ月 ago) / コメント DataStudioとGASでWebPagetestの計測結果をグラフ化する | mediba Creator × Engineer Blog を読んで、実際に Google スプレッドシートで、WebPagetest で定点観測をするようにしました。 この調子で Page Speed Insights のスコアも取れるといい感じなのではと思いましたので、Google Apps Script で スコアを定期的に取得するスクリプトを書いて DataSt
はじめに タイトルにある通り、scaffdog という scaffolding のためのツールを作りました。Node.js で書いています。 scaffdog https://github.com/cats-oss/scaffdog スカーフを巻いた犬がロゴ… Markdown で記載されたテンプレートに従ってファイルを生成するものとなっています。 具体的には次のようなテンプレートです。 --- name: 'component' description: 'Generate standard React component.' message: 'Please enter component name.' root: 'src' output: '**/*' ignore: [] --- # `{{ input | pascal }}/index.js` ```javascript ex
旧サイト(はてなブログ)からのパフォーマンスの伸びが顕著ですね。 Performanceは言わずもがなですが、はてなブログでPWA対応がほとんどされていないのが気になりました。Service Workerのような標準化しつつある仕様に追従できていないのは痛いところ。 Nuxt + Contentfulでやっていき 今回の実装にあたってはフレームワークに依存せずSPAを作成することも検討しましたが、SEOなどを考えるとSSRの仕組みが必須です。またSSRもスクラッチで組もうとすると中々ハードルが高く(Storeのハイドレーション、Render hooksのAPI設計等)、今回は業務でも利用した事のあるNuxt.jsを利用しました。 Embedded content: https://nuxtjs.org/ 詳細は後述しますが、Nuxt communityの提供しているModule群がものすご
この記事は「BASE Advent Calendar 2018」25日目の記事です。 devblog.thebase.in こんにちは。BASEでFrontend Groupに所属している三佐和です。主にネットショップ作成サービス「BASE」のフロントエンドを担当しています。 先日デザイングループのマネージャー早川が 「BASE」の管理画面リニューアルプロジェクトのこれまでとこれからで話しているように、現在BASEでは本格的にフロントエンドをVue.jsで置き換えるプロジェクトが進行しています。 これまでのBASEのフロントエンドは、主にマークアッパーを含むデザイナーが中心になってjQueryでゴリゴリと実装していました。 Frontend Groupが発足したものの、まだまだこれからで、しばらくはデザイナーと協力してサービスを作っていくスタンスで開発を進めています。 そのため、モダンなフ
この記事は「BASE Advent Calendar 2018」24日目の記事です。 devblog.thebase.in はじめに BASEでエンジニアとしてインターンをしている池田です。今日はクリスマスイブということで、以前から気になっていたグリューワイン（ドイツのクリスマスに欠かせないホットワイン）をクリスマスマーケットに飲みに来ています。 普段はBASE BANKというBASEの100%子会社にて金融事業の立ち上げを行っています。BASE BANKのプロダクトのAPIはGoを使って書かれているのですが、BASEでのGoの使用はこのプロジェクトが初だったので、開発基盤整備の一貫で様々なlinterの導入を行いました。その際にlinterの内部がどうなっているかに興味を持ち、すごく簡単なlinterの仕組みを実際に作ってみたので、今回はその知見をお話しします。 Goと静的解析 Goには
BASEの執行役員/Product Managerをしている神宮司（7jin16）です。 BASEのプロダクトマネージャーは、プロダクトの戦略、製品、事業数値まで責任を持ちます。 ユーザーの方々にどうしたら素晴らしい体験を届けることができるのかを悩みながら毎日淡々と会社全体でプロダクトを作っているため、プロダクト作りでとても重要だと思うことを書いていきます！ ポエムを書く 新プロダクトや新機能を作り始める前に実現したい理想の世界観についてのポエムを書くことが多いです。ポエムはあくまで Be Hopeful に書きます。深夜に書くとより叙情的に書けるのでオススメです。 ポエムを書くことによって自分たちが目指したい方向性が言語化されて、新プロダクトや新機能のコアバリューが設定されます。コアバリューが設定されていれば、タスクの優先順位が付けやすくなります。 ポエムによってチームもエモい気持ちで頑
これは「BASE Advent Calendar」22日目の記事です。 devblog.thebase.in はじめに こんにちは。BASEでサーバサイドエンジニアをしている柳川（@gimupop）です。直近では、即時に資金調達ができる金融サービス「YELL BANK（エールバンク）」というプロダクトの開発を行っていました。 さて本日ですが、技術ブログなんですが技術の話はしません。私が部長を務める社内の部活がすごく良いという話をします。 BASEには、CLUB BASEという部活動制度があります。共通の趣味を持つ社員が部署を超えて集まり、なにかしらの活動をすることを会社から補助を出す形で支援しています。一例としましてはランニング部とかボルダリング部といった活動内容が想像できるものから、日本酒部といった一見何をするかわからないものまで、様々な部活があります。 本日はその中でも僕が部長を務める
この記事は「BASE Advent Calendar 2018」19日目の記事です。 devblog.thebase.in はじめに こんにちは。BASEの100%子会社であるBASE BANKの矢部(@Toshi_Day1)です。BASEの金融事業という立ち位置で先日リリースした、リスクなく即時に資金調達ができる金融サービス「YELL BANK（エールバンク）」を中心に複数の金融事業を立ち上げ責任者をしています。 今回、社をあげてのアドベントカレンダーということで、テックな内容ではありませんがFinTechについて少し書き連ねていきたいと思います。 ここ1年弱、消費者と事業者の混ざり合ったようなユーザー層への金融サービスに思いをめぐらせつつ、決済をコアとした事業構造のBASEに身を置き、またFinTech企業や金融機関の方々とお話させていただく中で学んできたことをもとに、来年のファイナン
これは「BASE Advent Calendar」16日目の記事です。 こんにちは、BASEのDesign Groupに所属している吉岡です。 先日BASE BANK株式会社初めてのプロダクトとして即時に資金調達ができる金融サービス「YELL BANK」をリリースしました。個人的にお金にまつわるデザインは初めての経験ということもあり、難しかったのですが、LPではAfterEffectsで作ったアニメーションをCanvasやSVGアニメーションにできるプラグインを使って表現しました。 今回はせっかくのアドベントカレンダーなので、下記の様なHolidayAnimationを書き出してみようと思います。 環境設定 Bodymovin をインストール creative.adobe.com プラグインインストールのためのzxp-installerもダウンロードします aescripts.com Lo
はじめに これは「BASE Advent Calendar 2018」15日目の記事です。 devblog.thebase.in こんにちは、Backend Engineer Groupの菊地陽介です。今回は、BASEの育休エバンジェリストとして記事を書きたいと思います。今年の8月8日に第一子（綾瀬はるか似の娘）が生まれ、その後BASEの男性社員としては初めてとなる育児休業（以下、育休）を1.5ヶ月ほど取得しました。 育休取得直後に娘の心臓に先天性の疾患があることが分かり、一般的な赤ちゃんの倍くらい世話が必要だったので私が育休を取って妻と2人で育児をすることができたことは大変ありがたかったです(その後手術を行い現在は回復の方向に向かっています)。 なにより育休期間中の1.5ヶ月は娘の成長を間近で見ることができ、私の人生において生涯忘れないであろうかけがえのない日々となりました。そこで私が今
この記事は、「BASE Advent Calendar 2018」の14日目の記事です。 devblog.thebase.in こんにちは！Design Groupに所属している森（@mrkzk ）です！ リードエンジニアのお兄さんに「森さん、寿司食いたくないですか？」と聞かれ「もちろん、食べたいです。」と答えたらアドベントカレンダーブログを書くことが決定していました！お寿司は隠語だったのでしょうか？びっくりです！ では早速、タイトル通りデザイナーの私が初めてプロダクトのコードをコミットしてみたお話をします。 どうしてコードを書くことになったの？ 私の普段の業務はアプリのUIデザインなのですが、ときどきWebのクリエイティブ作成にも関わることがあり、いつもクリエイティブを作ったのちに「お願いします！」とこのようにエンジニアの方にお渡ししています。 今回は、既存バナーのUIやショップ数が古か
BASE Advent Calendar 2018 (13日目) この記事は、「BASE Advent Calendar 2018」の13日目の記事です。 devblog.thebase.in Backend Engineerの沖中 (@okinaka) です。 読者のみなさんはテストを書いてますか？テストが面倒くさいとか思ってませんか？（私はたまにあります） そんな時、モチベーションをあげるには、どのような工夫をしていますか？ 私の場合、カバレッジ計測の結果のレポートがとても役に立っています。 レポートを眺めると、視覚的に 「どの行が実行された」とか 「カバレッジ率が◯％」だとか 「ここ複雑だけどテストがないクラスがあるよ」など、 いろいろ気づきがあります。 「ここマズイな、テスト書いて確認しなくちゃ！」という気持ちになるのでとても重宝しています。 とてもいいツールだと思うのですが、残念
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く