タグ

ブックマーク / note.com (62)

  • Troubleshoot Nuxt on Lambda というタイトルでお話してきました|福井 烈 / note inc.|note

    fukuiretu
    fukuiretu 2018/11/17
    Nuxt
  • アラサーエンジニア シティボーイ化計画  - 都会のお得物件を統計的に探してみる -|hanaori|note

    はじまりこの note を運営しているピースオブケイク社でエンジニアをしている hanaori です。少し前から統計学を勉強中でして、現実世界に当てはめて試せそうな題材を探している毎日を過ごしています。 そんな折、「弊社CTOが引っ越しを検討している」という話を聞き、 CTOの引越し先としてコスパの良い物件を、統計を使って探し出しだす のはどうかとひらめいてしまいました 😆 そこで、重回帰分析を用いてコスパに優れる物件を洗い出していきたいと思います。 今回探す物件の条件ここで今回対象とする物件の条件を確認しておきます。 ・ ジムが近い(→ 狙いは東京体育館) ・ 最寄り駅は千駄ヶ谷 ・ 高すぎる物件はちょっと・・・(一旦20万より下で設定) 物件データを可視化する今回は千駄ヶ谷駅周辺の物件データを用意しました。 最寄り駅ごとに箱ひげ図を描いてみると駅ごとに賃料の分布が異なりそうなことが分

    アラサーエンジニア シティボーイ化計画  - 都会のお得物件を統計的に探してみる -|hanaori|note
    fukuiretu
    fukuiretu 2018/11/14
  • noteをNuxt.jsで再構築した話というタイトルでお話してきました #vuefes|福井 烈 / note inc.|note

    2018-11-03にVueFesJapan2018にて 「noteをNuxt.jsで再構築した話」 というタイトルで発表させて頂きました。 ※資料内のリンクは追って記事内に追記いたします。

    noteをNuxt.jsで再構築した話というタイトルでお話してきました #vuefes|福井 烈 / note inc.|note
    fukuiretu
    fukuiretu 2018/11/03
  • noteエディタをどうやって開発している(きた)のか|ct8ker|note

    この記事は旧バージョンのエディタについてのものになります。 現在は進化した新バージョンがリリースされています。 前の記事で、noteHTML5のcontenteditableを利用している事、そしてそのままではとても使えない事を書きました。それをどうにか使えるようにしているのがエディタなわけですが、今回はそのエディタの成り立ちや、どういう開発をしてきたのか、といった事を書こうと思います。 noteエディタの歴史私が開発担当している現行(201810現在)のエディタ(初版201704リリース)は、実はnoteのサービスローンチ時まで遡って数えると、3代目になります。 初代 弊社CTOのkonpyuが、突貫で作り上げた…と聞いています。 曰く、「すぐに引っ込めた」との事。note自体のローンチに向けた開発も多忙な中にあって、エディタに人員を割り当てて実装する、というのはなかなか難しかったので

    noteエディタをどうやって開発している(きた)のか|ct8ker|note
  • noteと"contenteditable"|ct8ker|note

    この記事は旧バージョンのエディタについてのものになります。 現在は進化した新バージョンがリリースされています。 初めてエンジニアらしい記事を書きます。 記念すべき?初回はHTML5のcontenteditableのお話です。 contenteditableコンテントエディタブル、と読みます。content editable。 こいつは何なのか、超ざっくり言ってしまうと、HTMLタグ内のテキストを編集可能にしてくれる属性、です。百聞は一見にしかずで例を出してみます。 <p contenteditable=true> コンテントエディタブル </p>これをブラウザで表示すると、pタグの中身が編集可能(キャレットを合わせて、キーボード入力可能)な状態になります。一般的にHTMLの世界でテキストを入力する手段といえば、inputやtextareaを思い浮かべるのではないかと思いますが、通常表示する

    noteと"contenteditable"|ct8ker|note
  • ビジネスモデル2.0図鑑 #全文公開チャレンジ|チャーリー|note

    前置きが長くなりましたが、ここからビジネスモデル2.0図鑑のスタートです。 ※当記事の情報を転載、複製、改変等は禁止いたします ビジネスモデル2.0図鑑 目次(note簡易版)● はじめに ● 序章「ビジネスモデル2.0」とはなにか? ・生き残るビジネスモデルには「逆説の構造」がある ・ビジネスモデル1.0と2.0を分けるもの ・「起点」「定説」そして「逆説」を考える ・「ポプテピピック」のどこが革新的か? ― 逆説の構造、3つの事例 ・「非常識」をいかに実現するか? ・逆説が強いほど「高度な仕組み」が求められる ・「逆説の究極形」がイノベーション ・「社会性」「経済合理性」「創造性」― 理想はすべてが揃ったビジネスモデル ・逆説だけでは感動するビジネスモデルは生まれない ・「八方よし」の考え方が必要になる ・「ソーシャル」と「ビジネス」と「クリエイティブ」 ・「バランスシートに載らない価

    ビジネスモデル2.0図鑑 #全文公開チャレンジ|チャーリー|note
    fukuiretu
    fukuiretu 2018/09/12
  • 「フロントエンド刷新中のnoteの開発環境について」というタイトルで発表をしてきました #html5j|福井 烈 / note inc.|note

    2018-09-05にMercari社のオフィスで開催されたHTML5とか勉強会で 「フロントエンド刷新中のnoteの開発環境について」 というタイトルで発表させて頂きました。 pixiv社の川田さん(@_furoshiki)よりお声がけ頂き登壇する運びになりました。機会を頂き感謝です、ありがとうございました! スライド内の紹介コンテンツ・noteフロントエンドをNuxt.jsへ刷新します ・テキストのサンプル(Nuxt.jsのデモページ) ・Nuxt.js ・ESLintJavaScript Standard Style ・Prettier ・「結局Nuxt.jsって何がいいの?」に対する回答 ・Atomic Design ~堅牢で使いやすいUIを効率良く設計する ・Vue.js からみた AtomicDesign ・note engineer meetup 雑談当日は参加者100

    「フロントエンド刷新中のnoteの開発環境について」というタイトルで発表をしてきました #html5j|福井 烈 / note inc.|note
  • 「フロントエンド初学者のためのNuxt.jsの歩き方」というタイトルで発表をしてきました|福井 烈 / note inc.|note

    先日、三沢市で開催された名無し勉強会で、 「フロントエンド初学者のためのNuxt.jsの歩き方」 というタイトルで発表をしてきました。 スライドを作り始めたらボリュームが大きくなってしまい、10分に収まらずすいませんでした🙇時間オーバーしてしまったにも関わらず全てを伝えることはできませんでしたが、興味を持って頂いて学習のきっかけとしていただけたら嬉しいなと。 かく言う自分もフロントエンド格的に触り始めて5ヶ月弱の弱者なのでまだまだ初学者に毛が生えたレベルなんですが、自分の経験を元にこんな感じで勉強していけば効率的に学べるんじゃないかな?という情報をまとめたつもりですので少しでも参考にして頂ければ幸いです。 また、間違いなどのご指摘やアドバイスなどがあれば是非お願いします🙏 (スライドは公開用に少しリライトしました) 資料内の紹介コンテンツ・Nuxt.js ・noteフロントエンド

    「フロントエンド初学者のためのNuxt.jsの歩き方」というタイトルで発表をしてきました|福井 烈 / note inc.|note
    fukuiretu
    fukuiretu 2018/08/27
  • note のアプリ、絶賛リニューアル中です|らぷ/lap

    いまこの記事をご覧の方は PC の Web ブラウザからでしょうか。 それともスマホの Web ブラウザですかね。 アプリの方はどうでしょうか。 使いづらいところは多々ありますが、いつも使っていただきありがとうございます。 こんにちは、note の iOS アプリを担当していますらぷらぷです。 入社して4ヶ月弱経ち、今の iOS アプリのバグ修正をお届けしつつアプリをリニューアルするお仕事をしています。 リニューアル、つまり note の iOS アプリを1から作り直しています。 詳しい理由は後述しますが、端的に言うと今の100倍以上 note を読んだり書いたりすることが楽しくなるアプリにするには作り直す方が速いと判断したからです。 * * *今の iOS アプリについてざっくりお話しますと、 ・2014年10月からリリースされて4年弱経ち、最新の iOS 技術を取り入れにくいくらいにメ

    note のアプリ、絶賛リニューアル中です|らぷ/lap
    fukuiretu
    fukuiretu 2018/08/24
  • 「この国をどうしたいの?」と聞かれたので考えてみました。|前澤友作 Yusaku Maezawa

    前澤、お前はこの国をどうしたいの? 日曜日の朝、ツイッター上で唐突に聞かれたので、考えをまとめてみました。 結論、 「仕事を楽しむ労働者を増やし、労働生産性の高い国にしたい」 です。 日人の半分以上が労働者ですから、仕事を楽しむ人が増えれば、自然と社会全体も明るくなります。生産性が高まれば、余暇が増え、生活にゆとりができ、人の心に余裕が生まれ、さらに社会は明るくなります。きっと悲しいことも減るでしょう。 仕事を楽しむ、ということと、生産性が高まる、ということは、実はセットです。 人は楽しんで集中している時に、一番生産性が高くなります。逆につまらないことをダラダラしている時に一番生産性が低くなります。みなさんも身に覚えあると思います。 また、楽しんで働く人の側には人が集まってきます。上司から大切な仕事を任せてもらえることも増えるでしょう。部下からの相談が増え、信頼されるようにもなるでしょう

    「この国をどうしたいの?」と聞かれたので考えてみました。|前澤友作 Yusaku Maezawa
    fukuiretu
    fukuiretu 2018/08/04
  • noteのフロントエンドをNuxt.jsへ刷新します|こんぴゅ|note

    webサービスUXを向上させるために、表示速度は非常に大切です。 しかしながら、noteはリリース当初からフロントエンドの実行速度が遅い=表示が遅いという構造的な問題を抱えており、継続率や離脱率など重要指標に悪影響を及ぼすリスクが強くありました。 noteチームはnote格的なメディアプラットフォームへ成長させるスピードを加速していきます。それを踏まえ、手遅れになる前に技術的な負債を解消し、最新のベストプラクティスに沿ったフレームワークに移行することで、高性能なサービスを提供する基盤を作っていくという決断をしました。 ポストでは、移行プロジェクト技術的背景や移行手順を説明します。また、途中成果のデモをUPしているのでご紹介します。 技術的な背景noteの現在のフロントエンドAngular.js 1系で構築されたSPAです。Angular 1系はかなり複雑なUIでも簡単に構築でき

    noteのフロントエンドをNuxt.jsへ刷新します|こんぴゅ|note
    fukuiretu
    fukuiretu 2018/07/25
  • 家庭ドリブンでリモートワークをはじめて1年半経った|らぷ/lap

    先程こんなメールが届いた。 リモートワークをはじめて半年が経ち、導入経緯や気を払ってることを備忘録程度にまとめてたなーというのを思い出した。 詳しくはこちらに書いてあるのですが、雑にまとめるとこんな感じです。 ・子供が保育園に入園 & の復職で育児業カバーしないとヤバい ・へのヒアリングの結果、子供と一緒に夜家に着いたときに夫がいた方がいないときより安心感が大きいということで、リモートワークはじめた ・リモートワークは実施する側にとってはある種訓練が必要なスキルだし、リモートワークされる側(チーム・会社など)にもしっかり理解を得られた上で気持ちよく進められるようにしていけると良さそう あれから1年子供もすくすく育ち、今では私やと同じ事が取れるようになってきたので、最近は家族分の料理を用意して夕をみんなでべるようになりました。 掃除洗濯洗い物に加えて料理も仲間入り。 一日のスケジ

    家庭ドリブンでリモートワークをはじめて1年半経った|らぷ/lap
  • 某アイシングクッキー屋のサイトに「お問い合わせ用チャット」を導入した話|福井 烈 / note inc.|note

    fukuiretu
    fukuiretu 2018/05/29
    書きました
  • 某アイシングクッキー屋のサイトを、アイシングクッキー界一ナウい技術スタックなサイトにリニューアルした話|福井 烈 / note inc.|note

    先に軽くお店の紹介を...enはデザインへのこだわりはもちろん、安心安全に美味しくべて頂けることを目指し、着色に天然色素を使用、原材料に国産バター・国産小麦を使用するなど味と品質にも重きを置いています。 デザインの一例としては、例えば会社や自社サービスのロゴをモチーフにしたクッキー。 暖かくなってきてイベントなども多くなるシーズンですので、ノベルティなどにオススメです! 他にもnoteとInstagramで作品を公開しているので、良かったら覗いてみてください。 ■note: https://note.mu/en0315 ■Instagram: https://www.instagram.com/en_0315/ Why?リニューアル前はameba ownd上で運用していて、無料で利用できるし大きな不満はなかったのですが、 ・独自ドメインをSSLで運用したい ・ページ表示のパフォーマンスを

    某アイシングクッキー屋のサイトを、アイシングクッキー界一ナウい技術スタックなサイトにリニューアルした話|福井 烈 / note inc.|note
  • GraphQLはRESTの置き換えではない|こんぴゅ

    GraphQLは最近注目されているWeb APIのための問い合わせ言語だ。 現在主流のRESTfulなAPIはURLとmethodでリソースを表現するわけだが、GraphQLは単一エンドポイント(ex: "POST /graphql")だけ存在し、欲しいリソースをHTTP POSTのbodyに明示的に記載してリクエストする。 ↑JSON APIGraphQLの形式でコールする(引用: how to graphql ) 徐々に実装例が増えてきており、2016年にはGithubAPIの実装を全面的にGraphQLに移行させたのが注目された。 色々調べていくと、GraphQLは単にRESTの代替ではなく、開発・運用フローを一新させうるほど豊かな思想・機能を含む事が分かって来たので現状の整理をしてみたい。 APIリクエストを束ねて効率化RESTではURLがひとつのリソースを表すため、複数のリソ

    GraphQLはRESTの置き換えではない|こんぴゅ
    fukuiretu
    fukuiretu 2018/05/07
  • 「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」を読んでコンポーネント設計を学んだ|福井 烈 / note inc.|note

    4/25に発売された「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」を読みました。 ちょうど中~大規模なサービスにおけるコンポーネントの設計で悩んでいたところで、良きタイミングで良書を読めたので、著者の五藤さんには当に感謝です🙏 コンポーネントの設計という観点で個人的に特に学びがあった、参考になった部分をメモがてら以下にまとめていきます。 (Atomic Designって何?という方は、 Atomic Designの考え方と利点・欠点 に概要がわかりやすくまとまっているのでオススメです) ■MoleculesとOrganismsの分け方(3章5節) 書を読むまではMoleculesとOrganismsの境界が曖昧でモヤッとしてたのですが、 Molecules -> 独立して存在できない(ヘルパーなコンポーネント) Organisms -> 独立して存在できる(

    「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」を読んでコンポーネント設計を学んだ|福井 烈 / note inc.|note
    fukuiretu
    fukuiretu 2018/05/02
  • 山の上のパン屋に人が集まるわけ|平田 はる香

    これは2018年に書いたnoteですが、2023年4月28日に「山の上のパン屋に人が集まるわけ」というがサイボウズ式ブックスより出版されました! 内容はこのnoteの内容ではありませんが、タイトルはこちらから取りました。私の幼少期から創業期、現在の経営までストーリーとしてお読みいただけます。こちらのnoteが気に入ってくださった方はぜひご購入していただければ幸いです! ⏩Amazonではこちらから 初めまして。株式会社わざわざの代表の平田はる香と申します。これからnoteに経営のことを中心に書き綴っていきたいと思います。最近の趣味は、会社の現状分析です。夜に好きなお酒を飲みながらデータを見ながら会社のことを考えるのが大好きです。 このnoteにはパンと日用品の店「わざわざ」の経営から考えたことを書いていきたいと思っています。note一つ目の記事はまずこちら「山の上のパン屋に人が集まるわけ

    山の上のパン屋に人が集まるわけ|平田 はる香
    fukuiretu
    fukuiretu 2018/04/17
  • 「悪い方が良い」原則と僕の体験談|Rui Ueyama

    ソフトウェアの世界には「悪い方が良い」原則という有名なエッセイがある。キレイにレイヤ分けされた一貫性のある良いデザインよりも、一見手抜きの悪いデザインのほうが実は良いときもあるという話だ。この逆説的なデザイン原則を僕は身をもって体験したことがある。それについてちょっと書いてみようと思う。 僕はlldというリンカの現行バージョンのオリジナル作者だ。リンカというのはコンパイラと組み合わせて使うもので、実行ファイルやDLLを作るのに使用される。lldはプロダクトとしてはかなり成功していて、標準のシステムリンカとして採用しているOSがいくつかあったり、GoogleやFacebookなど皆が知っているような大規模サイトの中で広く使われていたりする。 現在のlldは2世代目で、第1世代のlldは僕がプロジェクトに参加する前から存在していたのだけど、数年前にそれを捨てて一から書き直すということになった。

    「悪い方が良い」原則と僕の体験談|Rui Ueyama
    fukuiretu
    fukuiretu 2018/04/06
  • サービスの目視チェックをヘッドレスブラウザで効率化した話|raahii

    ■ モチベーションサービスを継続的に改善していく上で、バグを避けることはできません。そこで、バグが混入した時にそれにいち早く気付ける仕組みが必要になります。 Webサービス開発ではふつう、ユニットテストを書きます。一連のページ遷移(動線)をチェックするE2Eテストを書くこともあります。これらを用いることで、バグに簡単に気づくことが出来ます。 しかし、フロントエンドのエラーには微妙なページデザインの崩れなども含まれます。この場合、単にDOMの存在やページ遷移の可否をチェックするだけでは不十分です。 このようなエラーチェックに関しては、2018年になった今も、人が直接見なければ良し悪しがわかりづらいというやっかいな側面があります。かといって、主要なページを毎日手でチェックするのは非常に手間がかかってしまいます。 ■ 自動でページのスクリーンショットを取るそこで、ChromeをNodeから操作す

    サービスの目視チェックをヘッドレスブラウザで効率化した話|raahii
    fukuiretu
    fukuiretu 2018/04/03
  • Payment Request APIで簡単に決済機能を提供する|Masato Sugiyama

    Payment Request APIとはPayment Request APIは支払い情報・配送先住所などを入力するUIを提供するAPIです。このAPIでは、ブラウザなどに記録されているクレジットカード情報や住所を、UIからユーザが選択することもできるので、支払いなどでのユーザの負担を軽減することができます。 このAPIは入力されたデータをJavaScriptでPAY.JPやStripeなどの外部決済サービスに送信し、レスポンスを受け取って決済の結果を画面に表示する機能のみです。実際に使用するためには、サービスと事前に連携させる必要があります。 Payment Request APIを使用した場合のフローPayment Request APIを使用した場合のフローは以下のようになるかと思います。 ・Webサイト上で購入する商品を選択 ・購入ボタンをクリック ・Payment Reques

    Payment Request APIで簡単に決済機能を提供する|Masato Sugiyama
    fukuiretu
    fukuiretu 2018/03/30