フロントエンド全然わからないマンが、ちょっとでも見た目のいいWebサービスを作ろうとしてやったこと - Qiita
はじめに サーバーサイドプログラミングを勉強していると、自分でWebサービスを作りたいという気持ちがわいてくるものです（私はそうでした）。しかし、ここで大きな問題が立ちはだかります。どんなにすごい機能をつけても、いい感じのデザインのWebサービスでないとそもそも使ってもらえないのです。 試しに、QiitaのトップページのCSSを無効にしてみました。使える機能は変わらないはずなのに、全く使う気が起きなくなりますね。 しかしそうは言っても、フロントエンドの経験がほとんどないとどうすれば見た目をいい感じにできるかがわかりません。今回は、ちょっとでも見た目のいいWebサービスを作るために、そんな状況の私がやってみたことをまとめました。 (この記事は、あくまで私が試行錯誤した結果をまとめたものであり、その結果出来上がったサービスの見た目の良さを保証するものではありません) 書いている人のプロフィール
PWAが来るって言っているエンジニアは今すぐ辞めろ
PWAとかいうhtml5のリブランドが技術者界隈で騒いでるが、こんなの受け入れられないだろ。 PWAの実物見た？触った？？ instagramのPWAが最高〜！ネイティブと見分けつかない！！とかほざいているグー○ルのエバンジェリストだかエンジニアが騒いでいたので触ってみたのだが、 オワコンであった。 ネイティブと見分けつかないんだったら本当にエンジニア辞めたほうがいいよ。 まず、タイムライン上で複数投稿があった時にスワイプで切り替えられない。 なんと左右をタップするのである。 HTMLを操作してる感満載のガクガクの感じ。 ユーザーってこういう些細なガクガクに敏感だよね。マーケット感ある人ならわかるよね。 そんでもってストーリーズ。 もう最低。 動画が自動再生しないの。止まるは止まるは。もう何なの？？？って感じ。 こんなの受け入れられないでしょ。 カメラは直接起動できないし、フィルターも少な
意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
Webパフォーマンス管理の基本 1 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Webパフォーマンスはパフォーマンスエンジニアリングの1つの分野 Webパフォーマンス管理は、Webサイトの非機能要求の性能や可用性を扱います。 専門用語では、コンピュータの登場と時期を同じくして登場したパフォーマンスエンジニアリングという分野に属します。 パフォーマンスエンジニアリング パフォーマンスエンジニアリングとは、Wikipediaでは以下のように記載されています。 Performance engineering encompasses the techniques applied during a systems
画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！
フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" > <img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' /> </div> <button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button> #img01:-webkit-full-screen { width: 80%; background-color: rgba(
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方 酒巻瑞穂（html5jエンタープライズ部） 現在エンタープライズシステムの開発現場では、シングルページアプリケーション（SPA: 単一のWebページで構成されているWebアプリケーションのこと）アーキテクチャの採用が模索されるなど、根本的な開発パラダイムにおいて大きな変化が起きようとしています（全体的にどのような変化があるかはエキスパートNo59の佐川夫美雄さんの書かれた「JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例」によくまとまっています）。 こうした変化の一部を支えているのが、JavaScriptによるMVCフレームワークです。数あるフレームワークの中で、実際にどのフレームワークを採用するかというのは、開発コストだけではなく学習・運用コストにも関わる、非常に大きな
HTML FormにPUT/DELTEは必要なのか、あるいはJSer界の分断 #桜JS - teppeis blog
先日、都内某所で開催された#桜JSに参加したので、個人の日記レベルの感想を書いてみる。 #桜JS - Togetterまとめ 桜JSでご飯を食べながらLT大会をした | Web scratch 細かいことはazuさんのまとめを見てもらうとして、個人的におもしろかったのがHTML FormのPUT/DELETEについての議論。 なぜ html の form は PUT / DELETE をサポートしないのか？ - Block Rockin’ Codes Jxckさんの経緯まとめを踏まえて、じゃあこれからHTML FormにPUT/DELETEを追加する必要あるの？っていう点で意見が割れた。 個人的には、この話を聞いたとき、確かに仕様としては欠けてる感じがするけど、いまさら実装されても自分はForm PUT/DELETE使うことはないだろうなと思っていた。理由は、FormでPUT/DELETE
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜AI-enhanced description Koji Ishimoto gives a presentation on front-end engineering. He defines a front-end engineer's responsibilities as including JavaScript, version control with Git, modular code, browser developer tools, command line, templating, CSS preprocessors, testing, automation, code quality and manuals. He discusses common front-end tools, mana
使いこなせばもしや爆速！？ここ最近助けられたチートシート色々を厳選してご紹介！ | バンクーバーのうぇぶ屋
さて、以前このブログではチートシートに関する記事を書かせて頂きました。もう1年以上前の記事になるんですねー。本当時間が経つのは早い物です…。 無くても良いけど、あったら意外と便利なチートシート。得に初心者の間はチートシートと睨めっこしながら色々な技術なりアプリなりと向かい合う事も僕は少なくありません。 しかし、当然チートシート関連もアップデートし続けた方が良い物。いつまでも古いチートシートばかり見ていたら、折角の新機能や便利ツールの存在に気づかず、ぬあーーーー！って成る事もあるやもしれません。 というわけで、今日はここ最近見たチートシート紹介第二弾！チートシートとして手元に置いておけば、いざというとき便利かもしれない物を、比較的新しそうな物から共有させて頂こうかなと思います！ それで行ってみましょー！ OverAPI.com | Collecting all the cheat sheet
与沢翼が作ったアフィリエイトがあるので、なんとなく登録してみた。：村上福之の「ネットとケータイと俺様」：オルタナティブ・ブログ
ぼくも秒速で256億円くらい稼ぎたい。 そう思ったら、与沢翼さんが、アフィリエイトプロバイダーを始めたようだ。FASアフィリエイトセンターというらしい。FASというのはフリーエージェントスタイルの略のようだ。 ここです。 ソース見た。文字コード、EUC-JPだ。6年ぶりくらいにみた。やはり秒速でウン億稼ぐ人は、UTF-8とか使わないんだな。 微妙にインラインCSSがお好みのようだ。font color="red"なんて、今でも使っているのはぼくだけかと思ったけど、彼も使っているようだ。なかなかやるな。 適当に登録。パスワードは確認用に２回入れるというUIはここでは採用してないようだ。 秒速でウン億円稼ぐので、２回入力するヒマはないらしい。 登録したら、確認フォームも、「確認メールを送りました」も何もなく、いきなり、ログインフォームが出た。秒速でウン億円稼ぐので、時間節約のためか、不毛なメッ
AngularJS 入門
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
Web系新卒っていうかゲーム開発者一年目が去年読んだ技術書 & ライブラリ - mizchi log
カタ氏(@hotchemi)が意識高い記事書いてたので、自分もまとめてみる。 文系学部生がSIerに入社してから読んだ本メモ - ギークに憧れて http://hotchemi.hateblo.jp/entry/2013/04/01/000844 自分Web系っていうかHTML5+Unity+AS3 のゲームガッツリ系+Webもやるって感じなので、最近の自己認識としてWebっていうよりはゲームプログラマな気がしている。 JSが多いのはHTML5ゲームの技術調査とかしてたからです。 書籍 ７つの言語 ７つの世界 作者: Bruce A. Tate,まつもとゆきひろ,田和勝出版社/メーカー: オーム社発売日: 2011/07/23メディア: 単行本（ソフトカバー）購入: 9人 クリック: 230回この商品を含むブログ (65件) を見る一部情報が古いが、ClojureやIoについて書かれた貴重
http://inputxoutput.com/html-doctype/
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
CSSだけで簡単に吹き出しを作成する方法4つ！
こんにちは、橋本です。 今日はCSSだけでお手軽に吹き出しを作る方法をご紹介したいと思います。 今回ご紹介するサンプルは4つ 一般的な三角の吹き出し 一般的な三角の吹き出し（ボーダー付き） ぽわわーんとした吹き出し 丸い（曲線の）吹き出し 4つのサンプルの実行結果は、ここで確認できます。 IE9以上とIE以外のブラウザであればちゃんと表示されるかと思います。 IE8以下はborder-radiusが使用出来ないため、サンプル3とサンプル4がちゃんと表示されません。 それでは1つ1つ見て行きましょう。 1.一般的な三角の吹き出し まずはソースから。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapp
2014年にはWebアプリの「オフラインファースト」が流行するのではないか？
先週2月18日に都内で開催された「第36回HTML5とか勉強会」。テーマは「2013年、Web開発の進化を探る」でした。 そこで「2014年頃にはネットに接続しなくても使えるオフラインWebアプリケーションが流行するのではないか」と話したのが、html5j.orgの世話人でもある白石俊平氏。白石氏が解説する「オフラインファースト」は、これからのWebアプリケーションのひとつの方向性が示されていると思われます。 その講演の内容をダイジェストで紹介します。 オフラインファーストの思想と実践 html5j.org世話人の白石俊平氏。 オフラインファーストとは、オフラインを最初に考えてWebサイトを、Webアプリケーションを作ろうという思想のことです。 で、オフラインファーストって、モバイルファーストという言葉に似ています。モバイルファーストというのは2010年に登場した言葉で、これは去年、とにか
Toward Firefox OS
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
もう、Webはブラウザという制約に縛られなくていい ─ ＠IT
えーじ 2012/7/10 10年前、旅行先で道に迷わず目的地に辿り着くのがこんなに簡単になるなんて思わなかった。スマホとHTML5が、Webを自由に解き放つ まずは、食事のシチュエーションというUXの話から 唐突ですが、あなたはレストランでアルバイトをしたことがありますか？ 経験のある方なら、分かるかもしれませんが、レストランでアルバイトしていると、賄いで食事を出してもらえる場合があります。もちろん、お店によるので、一概にいえませんが、ちょっとしたファミレスでも、通常、顧客に出すものとほぼ同じ料理を食べられます。 そのとき、味はどうだったでしょう？ 1000円以上の価値があるものを無料で食べられるのだから、店によっては、実にうらやましい話だろうと思いきや、筆者の場合、そうでもないという感想を持った経験があります。 確かに、同じ料理なのですが、いわゆるバックヤードと呼ばれる従業員専用の、お
0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-
私の周りでwebデザインが出来る人ってあんまりいません。でも「webデザインってどうやるのー？」とか「私もやってみたいんだけど…」とかの声はよく聞きます。皆興味はあるのに”webデザインは難しい”と思って始められないんじゃないでしょうか。そんなこれからwebデザインを始めたいビギナーさんに向けてHTMLの基本・基礎をまとめてみます。真新しいことは特にないほんとに基礎です〜＞＜ by：fweez まずはじめに とりあえず用意するもの2つ HTMLの基本 HTMLとは？ 1.DOCTYPEの宣言 2.基本的なタグ 3.<body>の文書構造 CSSの基本 CSSとは？ 1.CSSの読み込み方法 2.指定パターン 3.marginとpaddingの違い 4.ブロック要素とインライン要素 応用してwebページを作ってみる まずはじめに 一口にwebデザインといっても色々なことがあると思うのですが大
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
大規模 JavaScript その設計と実装と現実