vue-nextのソースコードの読み方を説明しました。

for ginza.js#7 @mizchi このスライドツールの作者 今はワケあってこの会場の会社にいる(Plaid) お品書き VSCode をハックしようとして敗北した MonacoEditor をハックしてる フロントエンドの仕事、ブラウザだけで完結するはず、と思ったことないですか？ フロントエンドのおしごと コンポーネントを作る ビルドする テストする ブラウザで確認する フロントエンドのおしごと コンポーネントを作る(ブラウザでできる？) ビルドする(ブラウザでできる?) テストする(ブラウザでできる) ブラウザで確認する(ブラウザでできる) 経緯: コンパイラを作った フロントエンドでフロントエンドをビルドする で、ブラウザ上で動くコンパイラ作った 今日は、このコンパイラを動かすためのエディタを作ってる話 @mizchi/web-compiler (仮)ができること サンプル

スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？　かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ

このBlogは「アジャイル開発 Advent Calendar 2019の11日目」の記事になります。 安野と申します。今回は、MNTSQ社（モンテスキュー、と読みます）における開発プロセスの紹介をしたいと思います。MNTSQでは、機械学習/自然言語処理と、弁護士の高度なドメイン知識を組み合わせ、リーガルワークの現場にいるプロフェッショナル向けにプロダクトを提供しています。現場の弁護士先生がガンガン使うSaaS型プロダクトを、数名のチームで回しているのは世の中的にもなかなか珍しいのではないかなと個人的には思っています。 MNTSQは、「エンタープライズ向け（あるいはプロフェッショナル向け）」かつ「クラウド/オンプレ併用」という特徴を持っています。この制約下でうまくワークする開発フローを作るのは諸々試行錯誤がありましたので、この機会に紹介できればと思います。 おそらくエンタープライズにクラウ

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

はじめに これは Angular Advent Calendar 2019 10日目の記事です。 こんにちは (｡･ω･｡) Angular と Firebase で CGM サービス（一般ユーザー投稿型サービス）を開発している者です。 早いもので、Angular Advent Calendar も 3 回目の参加となります。 例年ではなんとなく不吉な 4 日目をいただいていたのですが、今年も募集当日にエントリーしに行くと既に 9 割ほどの枠で参加表明があり、狙っていた？ 4 日目も埋まっていました。 （どこでも良いので他の人が嫌がる確率が高そうなところに入ったろの精神 今まで #1 しかなかったカレンダーが今年は勢いそのまま #2 まで誕生し、ここ 1 年での Angular コミュニティの成長を実感しています (ﾉﾟ∀ﾟ)ﾉ 小話はこの辺で... この記事では、約 2 年間 Angul

Kyashでは9月からIDaaSであるOneLoginを導入しました。 導入から3ヶ月が経過し、現時点でほぼすべての社内認証をOneLoginに統一することが出来ました! 今回は、なぜOneLoginにしたのか、使い勝手等を含めお伝えできればと思います。 すごくヨイショしている記事になってしまったんですが、お金はもらってません!!!!!笑 www.onelogin.com 公式HPにも取り上げて頂き、ありがとうございます! 実は前職でもかなり使い込んでおり、OneLoginは思い入れのあるプロダクトです。 www.pentio.com 今回の導入に関しても、OneLogin 日本代表の福見さんと代理店であるペンティオさんにかなりのお力添えを頂きました。ありがとうございます! Kyash Advent Calendar 2019 day11 ということでKyash Advent Calend

Webで縦書きなどを実現する「CSS Writing Modes Level 3」、ついにW3Cの「勧告」に HTMLで構造化された文書に対してスタイルを与える「Cascading Style Sheet」（CSS）は「CSS 2」から、directionプロパティでテキストの表示方向を左から右か、右から左かを指定可能でした。 今回勧告になった「CSS Writing Modes Level 3」では、従来の横書きの左から右への記述（英語やヒンディ語など）、横書きの右から左への記述（ヘブライ語やアラビア語など）に加えて、日本語やモンゴル語などで使われるような縦書きなどを指定することができます。 また、縦書きでは、右から左への行送り（中国語、日本語、韓国語など）と、左から右への行送り（モンゴル語など）も指定可能。 これらは同一ページ上で混在でき、さらに双方向混在の記述における分離、字形の方向

この記事はコネヒト Advent Calendar 2019の11日目の記事です！ qiita.com はじめに 半年ほど前から新規事業のチームで仕事するようになり、主な技術スタックもPHPからGo, Next.jsへと変わりました。 その中で、特にフロントエンドのテスト周りにおいてキャッチアップ不足を感じていたのですが、たまたま見つけた*1「Full Stack Open 2019」という教材がとても良かったので紹介したいと思います。 「Full Stack Open 2019」とは fullstackopen.com フィンランドのヘルシンキ大学で実際に使われているテキストベースのオンライン教材です。 Nodeで作られたREST APIとReactを使ったSPAの実装を通して、React・Redux・Node.js・MongoDB・GraphQLが一度に学べる教材となっています。 教材

2019 Javascriptエンジン俯瞰 こんにちは 2019 Javascript Advent Calendarの11日目です 2019はJSエンジンが新たに2つもリリースされた まずFacebook産のhermes もう一つがFFMPEG作者のbellardが実装したquickjs この2つを見ていこうと思う ちなみにhermesは以前にも書いたので正直あまり書くことは無い http://abcdef.gets.b6n.ch/entry/2019/07/22/142510 特徴 hermes C++ FacebookがReact Nativeの高速化用に実装したエンジン レジスタマシンのバイトコードインタプリタを搭載 flowを解釈できる commonjsを解釈して実行できる バイトコードのexportとimportも可能でスタートアップタイムを高速化することが可能 JITはx86

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

この記事はGo7 Advent Calendar 2019の記事です。 Go には Java や Ruby などのモダン言語のような slice を操作する関数は用意されていません。 Go では built-in 関数のappend()やcopy() と for 構文を組み合わせることで、他の言語にあるような slice 操作を実装できます。 この記事ではそれぞれの slice 操作を図解で解説します。 元ネタは Go 公式 Wiki にあるGo SliceTricks - golang/go Wikiです。 Slice の連結 a = append(a, b...) コピー先 a にコピー元の b の全ての要素をコピーします。 連結後の長さが cap(a) を超える場合は、新たな slice が作成されて a、bともにコピーします。 以降はappend()のコピー先には十分なcapがある

Try PWA 「Try PWA」発行主旨・内容紹介 「Try PWA」目次 「Try PWA」Amazonでの購入はこちら 「Try PWA」楽天市場での購入はこちら（※電子書籍版です） Try PWA インプレスグループで電子出版事業を手がけるインプレスR&Dは、技術の泉シリーズ11月の新刊として、渋田達也氏著書によるはじめてPWAにトライするエンジニアのための「Try PWA」を発売した。 最新の知見を発信する「技術の泉シリーズ」では、「技術書典」や「技術書同人誌博覧会」をはじめとした各種即売会や、勉強会・LT会などで頒布された技術同人誌を底本とした商業書籍を刊行し、技術同人誌の普及と発展に貢献することを目指している。 渋田達也Profile●福岡で活動しているweb系のエンジニア。サーバーレスなどのバックエンドのこともしたりするが最近はフロントエンドがメインとなっています。witt

この記事はPWA Advent Calendar 2019の1日目の記事です。 以前、PWA Night vol.9 で、Web技術だけで作るQRコードリーダーという内容で紹介したのですが、当日は時間の問題で概要程度だったのでもう少し技術的な詳細を書きます。(当日のスライドはこちら) 作ったもの まずは、実際に見ていただくのがイメージつきやすいと思うので動作しているGIFです。 QRコードを読み込んで結果を表示するというものですが、これがブラウザで動いています。 実際に公開されていますのでよかったら使ってみてください。 サイト：https://simple-qr.netlify.com/ GitHub：https://github.com/KanDai/simple-qr-reader 確認している対応ブラウザは以下です。 Android Chrome Android Firefox iO

PWA（Progressive Web Apps）は今後のWebを担う大事な技術になっています。多数ある技術を合わせたものなので、すべてを実装するのは難しいですが、逆に一部からでもはじめられるのがメリットです。 そんなPWAでアプリとしてインストールする機能に注目が集まっていますが、面倒なのが多数のアイコンを作成しなければならない作業です。そこで使ってみたいのがPWA asset generatorです。 PWA asset generatorの使い方 PWA asset generatorを実行します。画像やSVGファイルを指定するだけです。 $ pwa-asset-generator new-org-logo.png 16:24:49 getSplashScreenMetaData Initialising puppeteer to load latest splash screen

オブジェクト指向のハードコアは2019年5月25日にゼロベースサロンで行われたイベントです。「オブジェクト指向」というキーワードについて、プログラミング、デザイン、哲学などの分野を横断しつつ知的な議論ができました。記録映像は必見。 企画意図／招待状 この研究会の企画意図については、私が送った招待状を見ていただくのが早いでしょう： いくつか異なる分野で「オブジェクト指向」がキーワードとして注目されています。昨年からGUIデザインの分野では「オブジェクト指向ユーザーインターフェイス」(OOUI)の議論がホットです。ソフトウェア開発の分野では、数年前からオブジェクト指向の見直しとしての「ドメイン駆動設計」(DDD)が広まっています（※原著である英語版から日本語への翻訳は数年遅れています）。さらには「オブジェクト指向存在論」(OOO)も思想業界でブームになっています。 これはもうオブジェクト指向の

本の内容を全22この記事に分け、2021年3月8日から毎日公開し（平日のみ）、4月6日には本の全200ページの内容すべてが公開される予定です。なぜ1冊まるごと全文を公開してしまうのか、なぜ小分けにして公開するのか、についてこの記事の最後に背景や経緯を書いています。興味があればぜひ。 この記事は1番目の記事になるので「はじめに」と「もくじ」を掲載しています。この次の記事から本文であるパート1に進んでいきます。 尚、本の内容をそのまま掲載しているため「次のページを見てください」のような、この記事においては意味をなさない表現も残っていますが、ご了承ください。 ではさっそくどうぞ。 注）もともとこの記事は「会計の地図」というタイトルでこの本の原型になったアイデア段階のものを紹介した記事でした。「会計の地図」と検索すると検索結果1位に表示されていたこともあり、今回、本の全文公開の最初の記事としてアッ

JAMstackってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成 JAMstackは、「JavaScript」「APIs」「Markup」の3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。いち早くJAMstackを利用してWebサイトを作成した、寺川直宏さんと風間雅也さんにJAMstackについて聞きました。 JAMstackという言葉をご存知でしょうか。JAMstackは、「JavaScript」「APIs」「Markup」という3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。パフォーマンスの改善、セキュリティの担保、スケーラビリティの確保が見込めるため、フロントエンド界隈で、大きな注目を集めています。 しかしまだ登場したばかりの概念ゆえ、実例も少なく、理解しにくい面もあります。そこで、いち早くJAMstackでWebサイトを

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

より良いデザインを生むために 私はこれまでデザインコンサルティングを行う中で「一度出来上がったものを変えるには多大な労力がかかる」と感じてきました。 同じような状況に何度か遭遇するうちに徐々に「トレーニングプログラムが必要かもしれない」と思うようになりました。 トレーニングというのは少し遠回りなものに感じましたが、より良いデザインを生むための土台を作ってみるチャレンジを始めることにしました。 出来上がったのはミニマムなトレーニング、「OOUI トレーニング」ですが今回はその裏側をご紹介します。 背景 世の中は新規のプロダクトよりも既存のプロダクトが多く、私もいくつかの既存アプリケーションの改善の支援に関わることがありました。その中で様々な理由で新しく作る方が負荷が少ないと感じることがありました。 デザインチームのマインドや知識が既存アプリケーションを前提としているとゼロから OOUI のデ

はじめに さっぶ。どうも、だーやまんです。 この記事は、本番環境でやらかしちゃった人 Advent Calendar 2019 - Qiitaの11日目の記事です。 これは、中途半端な知識でサービスを運用していた結果、タイトル通りの大失敗をしてしまったお話です。個人開発での出来事なので、業務で起きたことかと胃薬を握られていた方はご安心ください。 語るのもすごい恥ずかしいレベルですが、戒めのために晒しておきます。 この記事を読んでほしい人 初めてインターネット上にサービスを公開しようとしている人 喋太郎の利用者様(この場をお借りして、改めてお詫び申し上げます。本当に申し訳ございませんでした。) 背景とか Discord読み上げBot 「喋太郎」にてやらかしました www.dayaman.work 利用者が約10万人 さくらのVPSにてAppサーバ2台、DBサーバ1台で運用 各サーバの死活監視

一休.com レストランを開発している所澤です。この記事は一休.comアドベントカレンダーの10日目の記事です。 先日、一休.comレストランの管理画面をリニューアルしました。 この記事ではその際にAPIの実装方法として採用したGraphQLについてフロントエンド視点で利点や使い所について述べます。 GraphQLについて以下の記事がわかりやすかったです。 「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ - エンジニアHub｜若手Webエンジニアのキャリアを考える！ 短いまとめ 新しくAPIサーバーを書くなら是非GraphQLで！ というくらい良かった Apolloのエコシステムに乗り切らなくてもいい。ふつうのRESTfulなAPIサーバーの代わりに、くらいの気軽さでGraphQLを採用してもいい プロジェクトの概要 今回リニューアルした一休.comレ