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

よく新しいフレームワークを学ぶにはTodoアプリを作ってみるのがよい、と言われる。実際、Todoアプリを様々なフレームワークで作ってみたサンプルをまとめたサイトもあったりする。 ところが、実際に業務で作るようなアプリケーションはTodoアプリの範疇を超えている。とくにSPAにもなると、画面遷移やWebAPI連携、大規模な状態管理などなどの条件が増えるので、Todoアプリを作っているときには考慮できていなかった大変さが出てくる。 そこで参考になるのが RealWorld example apps と呼ばれるプロジェクト 端的に言うと、TodoMVCの大規模版。 規定のスペックに沿って、様々なウェブフレームワークで作られたアプリケーションのリポジトリがリストアップされている。 スペックについて "Conduit" is a social blogging site (i.e. a Medium

mozaic bootcampというhttps://t.co/OfP8vuZTkfリスナーのための4日間通し勉強会に参加中。2日目の今日はkeep-aliveからのちょっとHTTP2、これからCookieの話— にんじんくん (@ninjinkun) 2019年4月29日 mozaic bootcampとは？ mozaic.fmリスナー向けの勉強会。mozaic.fmはJxck氏が主催するPodcastで、Web標準やブラウザ、プロトコルなどWeb技術をターゲットにしており、自分も愛聴している。 今回行われたbootcampはゴールデンウィークの4日間を使い、「Webを正しく理解し、正しく使う」ことを目的として行われた。 参加者はざっくり言うとそこそこ経験のあるWebエンジニアが6名、主催のJxck氏、mozaic.fmでお馴染みの矢倉氏の計8名。参加にあたってはビデオ通話による選考もあっ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 株式会社ゆめみでフロントエンジニアをやっています。 弊社の制度として10%ルール 1 というものがあり、 その制度でいつも私が行うのは、身の回りに発生している不便なこと・不満に思っていることをプロダクトで解決できるかチャレンジしています。 そのプロダクト造りにたくさんのリソースは割くことはできない。 限られた時間でコミットするためには爆速的な開発が不可欠です。 そこで、僕が爆速開発を行うために心がけていることを共有したいと思います。 作ったプロダクト この話をする上で例があったほうがわかりやすいと思うので、直近で作ったものをご

どうも、まさとらん（@0310lan）です！ 今回は、Googleのスプレッドシートを利用して誰でも手軽にPWAアプリを開発して公開することができるサービスをご紹介します！ スプレッドシートにデータを準備するだけなので、エンジニア以外の方でも簡単にアプリ開発を楽しむことができます。多彩な機能をグラフィカルなGUIで追加していくことも可能なので、ご興味のある方はぜひ参考にしてみてください！ 【 Glide 】 ■「Glide」の使い方 それでは、まず最初にGlideをどのように使っていけばよいのかを見ていきましょう！ サイトにアクセスしたら【Sign Up】ボタンをクリックして無償のユーザー登録を済ませておきます。 GlideはGoogleのスプレッドシートを利用するので、自分のGoogleアカウントから簡単にログインできるようになっています。 ログインが完了すると自分専用のダッシュボードが

ページ数： 256ページ 電子版フォーマット： PDF 製本版： B5変形・モノクロ（カラー11ページ） 発売日： 2019年4月8日 読むと身につく「本当の」UIデザイン力！ この本の序文を読む なぜ、今、UI（ユーザーインターフェイス）デザインの本を出そうと思ったのか。きっかけは2つあります。 1つは、外部で UI デザインの講師を務める中で感じた「UI デザインを体系的に学ぶための本が少ない」という課題感でした。 特に、スマートフォンアプリケーションなどのデジタルプロダクトをデザインするため に必要な基礎知識や考え方がまとまっている本が必要だと感じました。 もう1つは「知り合いで良いUIデザイナーいませんか?」「仕事の依頼はたくさん届くんだけどUIデザイナーの数が足りなくて......」といった周りの声です。 （肌

こんにちは。 私は現在クリエイティブディベロッパーという、フロントエンド＋WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのものを作っています。ほとんどtwitterにあげてるので、興味がある方はぜひ見てみてください。 最近ツイッターのDMでどうやってthree.jsを勉強すればいいかアドバイスが欲しいというのをもらうことが多くなってきたんですが、この質問に答えるのは難しいなと感じています。 人によって得意不得意があるし、始めようと思った時点でどのくらいプログラミングや数学に精通しているか人それぞれすぎて、これがベストな勉強法！これをやれば誰でも大丈夫とは言えないです。 この記事では、私が初心者レベルか

The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js A tutorial that explores the basics of creating animated 3D scenes using Three.js. Today, we are going to create a simple 3D flying plane using Three.js, a 3D library that makes WebGL simpler. WebGL is a pretty unknown world for many developers because of the complexity and syntax of GLSL. But With Three.js, 3D in the browser be

はじめに 最近GCPでWebサービスを立ち上げたので、そのときに実施したことをメモとして残しておきます。 今回はGCEで Debian + Nginx + Railsで環境を作りました。 ドメイン取得以外は終始無料で進めるための努力をしました。 また、今回はRailsアプリケーションを作成することは目的としていませんので、そこについてはあまり触れません。 やったこと GCEでインスタンスを立ち上げる アカウント作成時に貰える無料トライアル枠とは別に、無料で利用できるリソースがあります。 Always Free と呼ばれていて、GCEの場合は以下の要件を満たすインスタンスのみ永久に無料でインスタンスを立てることができます。 リージョンをus-*1から選択する 1つのf1-micro VM インスタンス 30GB以内 の永続ストレージ ※無料対象リージョンはus-*1のみというご指摘を受けまし

認証というのは面倒なもので、利用者に余計な手間を掛けさせてアクティブ率を下げたくないと日夜工夫を凝らす我々にとっては、やり玉に上がりやすいテーマであると思います。要するに、ユーザーをログアウトさせたくないわけです。さて、どうしましょう？ 生魚おじさん、都元です。今月の魚はアジです！アジを食べましょう。 さて、認証というのは面倒なもので、利用者に余計な手間を掛けさせてアクティブ率を下げたくないと日夜工夫を凝らす我々にとっては、やり玉に上がりやすいテーマであると思います。要するに、ユーザーをログアウトさせたくないわけです。 例えば Facebook や Twitter のページはいつ訪問しても自分のアカウントでログイン状態になっています。 最後にログインしたのはいつでしたっけ？ 覚えていませんよね？ これがおそらく皆さんの理想です。 セッションによるログイン ログインには通常、Cookie を

どうも、まさとらん（@0310lan）です！ 今回はGitHubと連携してソースコードをさまざまな用途に活用できる便利なWebサービスを厳選してご紹介しようと思います。 特にWeb開発を便利にしてくれるサービスを中心に、GitHubだけでどこまで作業効率を向上できるのかをぜひ確認してみてください！ なお、paizaラーニングでは「Git入門編」講座を公開しています。そちらも合わせてチェックしてみてください。 ■GitHubをフル装備のクラウドIDEに変えるサービス！ 【 Gitpod 】 GitHubに置いているリポジトリのソースコードを統合型のクラウドIDEで自由に編集できるサービスが「Gitpod」です。 TheiaをベースにしたVS Codeライクなコードエディタで、豊富な機能と拡張性を備えておりプログラミングに最適なIDEの一つと言えるでしょう。 使い方は簡単で、リポジトリのページ

という形式のコミットメッセージを生成するようにしました。(もちろん絵文字もない、コミット内容の具体的な理由もない要約だけのコミットメッセージもここでは作れます) 要約については、Githubのファイル欄に表示されたりするためここは日本語英語が入り混じっていると汚いなと思ったので英語統一にしました コミット内容の具体的な理由については英語が望ましいですが、 具体的な理由を書く必要がある (要約より、英語力が必要であり内容が様々であるためテンプレートもあまり機能しない) Githubのファイル欄や、git log --onelineコマンドで表示されない 以上の理由から日本語でも問題ないのかなと思います。 具体的な使い方 基本的には上記のgifのように実際に使っていただければわかると思います。 まずフォームについて簡単に説明すると Emoji: コミットカテゴリを絵文字で表したもの Verb:

商用でも無料で利用できる1,000種類のアイコンが3つのスタイル、そしてPhotoshoop用・Adobe XD用・Sketch用・Figma用・inVision用、そしてSVGまで完備されたMaterial Icons Libraryを紹介します。 一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います。 Material Icons Library ラインセスはApache License Version 2.0で、個人でも商用でも無料で利用できます。 アイコンはMaterial Designを踏襲しており、全部で1,000種類のアイテムが揃っています。スタイルは角丸・アウトライン、ツートーンの3種類。合計すると、3,000種類以上になります。 アイコンの特徴 フォーマットは、Photoshop, Adobe XD, Sketch, Figma, inVision

今日Dockerなどのコンテナ技術は広く普及し、GCP・Azure・AWSがマネージドサービスをリリースしたことなどからも、コンテナオーケストレーションエンジンとしてはKubernetesがデファクトスタンダードだと言えます。 本講演ではKubernetesが必要な理由・機能及びコンセプト・解決できる…

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 2019/1/14にCNCF(Cloud Native Computing Foundation)のブログに、以下の記事がポストされていました。 9 Kubernetes Security Best Practices Everyone Must Follow： https://www.cncf.io/blog/2019/01/14/9-kubernetes-security-best-practices-everyone-must-follow/ このブログ記事のタイトルを直訳すると「みんなが守るべき9つのKubernete

2012年くらいから使っているが、一貫していいと思い続けているkeroxp.icon2018/8/1

どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ

※こちらの記事が「先月もっとも多く読まれたノート」の一つに入りました。ありがとうございます！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 ✔︎この記事の内容 実務、学習のため問わず、Web制作をするに当たって便利なツールと使いかたをご紹介します3年ほど独学でWebサービスを作り運用したり、フリーランスとしてお客さまのサイトを作る中で、様々なツールを見つけました。 初心者の方ほどこうした作業効率が上がるツールを知っていた方がいいと思うのですが、周りにエンジニアがいないため情報が流れてこなかっ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 昨日1/28にVue, Vuex, Vue Routerを使って、SPA対応のポートフォリオサイトを自作しました！ここまで形になったこと、本当に嬉しかったです。 自作ポートフォリオサイト もともと1週間でVue.jsを使ったポートフォリオを作った記事をみて、「すげぇ…自分もVueでポートフォリオサイト作成を第一目標にしよ！」と思ったんですね。 それで、Vueでの自作ポートフォリオサイトを１つの目標にしたんですが、想像以上に私には難しく１ヶ月くらいかかりました(^p^) あと、２回ほど心が折れました(^p^) そんな過去の私のようにVue

ボストン・レッドソックスの皆さん、世界一おめでとうございます！*1 野球ってほんと面白いですね、こんばんは野球エンジニアです.*2 このエントリーでは楽しい野球技術、Vue.jsとDjango（Django REST Framework、以下DRFと略す）の話をサクッと書きたいと思います. なお、このエントリーは先日開催されたPyLadies Tokyo - 4周年記念パーティのLTでやったことの自分メモをブログにしたものです.*3 元ネタ PyLadies Tokyo - 4周年記念パーティのLTで話した内容がベースです. speakerdeck.com DjangoとVue.jsそしてOhtani-San - Pythonで二刀流しよう #PyLadiesTokyo 4周年 TL;DR 複数カテゴリのデータをSPA + REST APIで扱うなら、最初からHATEOAS（Hyperme