個人開発・ポートフォリオ作成をする方に贈る いくらプロダクトが素晴らしいとしても、一見してダサいデザインだと、ユーザーは使う気がなくなってしまう。 でも、今からデザインの勉強をするのは面倒だし、そこまでこだわりがあるわけでもない。 Q. 簡単に及第点のデザインにできるサービスとかないんですか？ A. あります。 ということで、デザインのことはよくわからなくても、簡単にそれっぽくできるサービスをまとめました。 個人的には、「それっぽさ」の大部分はページレイアウトと画像、「こなれ感」は配色とフォントによって構成されていると思っています。 また、私はケチなのでここで紹介しているものは、すべて無料で使えるサービスです（課金プランはある）。 書かないこと 細かい使い方 大体有名なので、使い方はggれば出てきます。 ライセンスなどの情報 特に素材系は規約などを確認の上で使ってください。 あくまでも、こ

はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作成するための

日本のオンライン海賊版の歴史をふり返ると、時代時代にさまざまなトレンドがあった。Warezに始まりNapster、WinMX、Winny、Share、BitTorrentなどのP2Pファイル共有、YouTubeやニコニコ動画などのストリーミングプラットフォーム、そしてMegauploadやRapidshare、Rapidgator、Uploadedなどのサイバーロッカーへ。 日本でも昨年10月にリンクサイト「はるか夢の址」の運営者や投稿者が摘発され、サイバーロッカーへの注目（というか圧力）が高まっている。ただ、海賊版の世界を観察していると、サイバーロッカー型の海賊版はすでに過去のものになりつつある。たとえば、サイバーロッカー自体の人気は2012年のMegauploadの閉鎖前後にピークアウトし、根強い人気のBitTorrentですら下降の一途を辿っている。 Rapidshare、Megau

INSANELY FAST Qiitaを読んでる人なら https://dev.to をほとんどの人が見たはず。見てない人は見てきてください、速すぎて驚くはず。またmizchiさんがdev.toに書いた なぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか - dev.to を見た人も多いと思う。個人的にHeroku, Railsを採用してここまで爆速なサイトを構築出来ていることは今までの常識を覆す衝撃な出来事だった。こんな新しい発見をもたらしてくれたdev.toには本当に感謝してる。自分もこんなサイト作ってみたいなと思ってdev.toのことを色々調べてて少し知見がたまったので共有してみます。 この記事はOkinawa.rb Advent Calendar 2017 7日目の記事です。 Twitterやってるのでよかったらフォローしてください🙋‍♀️ @saboyut

最初にいっておく。これは負け惜しみだ。 SPAとPWAの現状 自分は日本でReactの勝手エヴァンジェリストみたいなことをやっていて、SPAの重めのコンテンツをよく作ってるからか、「お前らフロントエンドを物事をややこしくして、重いページを量産してウェブを劣化させてるじゃないか！」みたいな批判を、名指しでよく受ける。なんで僕にいうかわからないけど、React = SPA みたいなイメージでスケープゴートにされてるんだろう。それはまあいい。 自分の仕事でSPA技術を使うところは、ちゃんと必要性もあるし理由も説明できる。ただ、やはり近年の複雑化/重量化について思うところはあるので、逆に振って AMP/PWA という選択肢を持っておきたくて、正直言うと依頼されたR&Dの仕事でもあったんだけど、一通り覚えた。なんだけど、今のところ仕事で使うタイミングがない。 PWA技術を仕事で使えなかった理由として

It makes me smile when someone raves about how fast this website loads, because that's no accident. We put a lot of effort into making it so. It is the sort of thing that usually goes unnoticed, but when your readers are developers, there's a better chance they notice and appreciate it. I have written about this in the past, but it's worth re-examining because these ideas are always evolving. From

企業サイトをはじめ、コマース、アプリ、メディア、ブログなど、さまざまなUIデザイン用のアイコンが無料でダウンロードできるOrion Icon Libraryを紹介します。 その数はなんと4,500種類以上！ 豊富なデザインに加え、カスタマイズにも対応しており、ストロークを鋭角や角丸にしたり、太さを変更したり、カラーを変更することもできます。

AbemaTV Developer Conference 2016 http://developer.abema.io/

Webアプリにリアルタイムの双方向通信が必要な場合、WebSocketを選ぶのは自然なことだと思います。では、どのツールでWebSocketサーバを構築すべきでしょうか。パフォーマンスは重要ですが、開発のプロセスも見過ごしてはなりません。パフォーマンスを基準にするだけでなく、開発のしやすさも考慮に入れるべきでしょう。今回の大合戦では、Clojure、C++、Elixir、Go、NodeJS、Rubyのそれぞれの言語によって慣用的な手法で実装されたシンプルなWebSocketサーバを比較したいと思います。 テスト内容 サーバに実装するのは、 echo と broadcast の2つのメッセージのみを扱う非常に単純なプロトコルです。echoは送信クライアントに返され、ブロードキャストは全ての接続クライアントに送信されます。そしてブロードキャストが完了すると、結果メッセージが送信者に返されます。

世界一かわいくてかしこくてかっこいい我が家のムスコさん、いよいよ来年から小学生。わりとよくある話だけれど、おばあちゃんがランドセルを買ってくれることになりました。 ヨメさんのサジェストで見に行ったのは「土屋鞄のランドセル」。なるほどしっかりした作りとトラディショナルなデザイン。大人がいいと思う要素を備えています。 この投稿をInstagramで見る Hiromu Shioya(@kwappa)がシェアした投稿 ショールームで実物を確認し、7/1 10時からのネット販売で予約することに。その結果… www.itmedia.co.jp なんということでしょう。 それでもシステム屋としての知識と経験を活用し、11時半ごろには予約をゲットすることができました（スマホから）。あとは現物が届くのを待つだけなので、この騒動についてWebシステムの視点から考えてみることにします。 問題はどこにあったのか

どうも、まさとらん（@0310lan）です。 今回は、面倒な登録手続きやトークンなどが一切不要で、今すぐ利用できる便利な「Web API」を厳選してご紹介しようと思います。 これらのAPIを使うことで、Web制作がちょっと便利になったり、独自性のあるユニークなサービスを構築できるようになるでしょう。 また、簡単に扱えることから、「Web APIを使って何か作ってみたい…」と思っている初心者の方にもオススメですよ！ ■「Web API」の使い方！ 今回ご紹介する「API」は、いずれも「JSONP」形式でデータが取得できるので、普通のJavaScriptだけで試すことが出来ます。 以下のコードを、HTMLファイルに記述するか、新規にJSファイルを作って読み込むようにしましょう。 var script = document.createElement('script'); script.src

Coiney窓口をリリースしました。Coiney（スマートフォンやタブレットを使ったクレジットカード決済サービス）のサポートに特化したアプリです。 盛り過ぎ注意数年前のアプリケーション開発は、アプリのインストールというハードルによって、ブラウザで完結するWebアプリケーションが主流でした。しかし、最近はユーザーの学習によってアプリのインストールのハードルが下がりました。そこで出てきた考え方がアンバンドリングです。 １アプリに対して１機能。盛り込まないことによって、ユーザーに対して迷いのないUI、開発者に対して開発／運用のシンプルさを提供することができます。Facebookがメッセンジャーアプリを本体から切り離したのもその一例だと考えられます。 私たちはアンバンドリングの考え方に則り、既存のアプリを決済部分にフォーカスしました。申し込み／ユーザーサポートにフォーカスしたアプリがCoiney窓

チーフエンジニアの id:Songmu です。 4月に 新人エンジニア研修を行なった のですが、その際に、「インフラを意識したアプリケーションの書き方」という講義を担当しました。そこでおこなった講義の内容について整理しながら書き起こしていきたいと思います。 インフラを意識すると何が良いか 業務でWebアプリケーションを扱うと、個人ではなかなか扱えないトラフィックであったりデータ量を扱うことになります。小規模サービスでは考えなくてよかった多くのことを考慮する必要がでてきます。なかなか体験できないことでもあるので、楽しく、やりがいもあります。 また、そういった経験を通して、インフラを意識しコードをかけるスキルを身につけることは、Webエンジニアとしては大きな強みとなります。ISUCONで優勝できるかもしれません*1。 インフラを意識すると何が良いか 〜 中規模ベンチャーの場合 そもそも、はてな

日進月歩のIT業界。毎日のように新たなニュースが飛び交い、トレンドも変わっていく動きの速い業界です。現れては消える最新技術を完璧にフォローし続けるのは不可能ですし、その必要もないかもしれません。しかし、メインストリームになったときにまったく何も知らないというのも考えものでしょう。 業界の最先端ではどんなことが起きているのか、どんな方向に向かっているのか、ざっくりと把握しているだけでもキャッチアップのスピードが変わります。IT関連のトレンドは海外発のことが多いため、先端技術の情報を収集するには英語圏のブログやメディアをチェックするのが一番です。今回は、世界の最新情報をキャッチするのにおすすめの海外ブログやメディアをまとめてご紹介します。 The Toptal Engineering Blog 出典：http://www.toptal.com/blog 世界のTOP3%に入るフリーエンジニア、

前回、簡単なDIコンテナを作ってみたので、次はこれを使ってWebフレームワークを作ってみたいと思います。 Webサーバーをつくる まず、WebフレームワークなのでHTTPサーバーが必要ですね。なので簡単なものを作ります。 とりあえずブラウザからリクエストを受け取ったら200 OKとHTMLを返すだけのサーバーです。 今回は、そこらのブラウザからアクセスできればいいや、ということで、RFCとかの仕様に準拠することは考えません。 public class Server { public static void main(String[] args) throws IOException { ServerSocket serverSoc = new ServerSocket(8989); for (;;) { Socket s = serverSoc.accept(); new Thread((