Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を
あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック - ICS MEDIA
アニメーションはゲームだけではなく、ウェブサイトやウェブアプリのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションに対して苦手意識を持っている方も少なくないのではないでしょうか。今回は私が普段トゥイーンアニメーションを作る時に使っている、簡単に「いい感じ」に仕上げるズルいテクニックを紹介します。 本記事で扱うのはトゥイーンと言われるアニメーションの種類です。これは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせる技術。具体的にはCSS TransitionやjQueryのanimate()関数、Adobe Animate CCのトゥイーン機能のことを指します。 本記事のデモはCreateJSで作成していますが、CSS3やjQueryなど他のテクニックでも応用できる内容となって
ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
丁寧な「要件定義」がWebディレクターの武器になる！進め方やコツを解説
Webディレクターの毎日は、協力的でものわかりのいいクライアントとスムーズにやりとりしながら、クオリティの高い制作物を完成させていく…なんて順風満帆なことばかりではありません。むしろ「クライアントの要望がどんどん増えて困った」「言った、言わないでモメた」「炎上した」、挙句の果てに、スタッフは徹夜でボロボロ、お金も請求できなかった…そんなトラブルの数々に頭を抱えることのほうが多いかもしれません。 しかし、『失敗しないWeb制作 プロジェクト監理のタテマエと実践』（ワークスコーポレーション）の著者・みどりかわえみこさんによると、トラブルを避けながら制作物のクオリティを上げるためには、「きちんと要件定義を行う」こと重要とのこと。要件定義をしたことがない人も、してはいるけど本当に必要なのかイマイチ分からないという人も、今一度要件定義について学んでみましょう。 目次 今さら聞けない!?イロハのイ～そ
PHP初心者が仕事で躓いた4つの罠 - pixiv inside [archive]
こちらはピクシブ株式会社 Advent Calendar 2015の2日目の記事です。 こんにちは。Vimエンジニアの kana です。 さて、皆さんもご存知の通り、WebサービスのpixivにはPHPが使用されています: PHPについては様々な噂を聞き及んでいた為、 これまでPHPとは関わらないように注意して過ごしてきましたが、 pixiv.netの開発ではPHPを避けて通ることは出来ません。 仕方なくPHPを使うことになる訳ですが、 実際に使ってみると……これが予想していた以上に様々な方向から毎日新鮮な驚きを届けてくれます。 今回は実際に遭遇したPHP初心者が躓くポイントを幾つか紹介しようと思います。 switch の中で continue したら switch の直後に飛ぶ 大量のデータをループでぶん回して処理するのはよくある話です。 その中で特定の種類のデータについては処理をスキッ
![PHP初心者が仕事で躓いた4つの罠 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d2307a635e19c1c1fe2e28b504dc3b580db0c7e/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fka-nacht%2F20151202%2F20151202201442.png)
JavaScriptユーザエージェント判別・判定
Updated 2015.11.24 / Published 2015.04.02 新しいFirefox OSやWindows Phoneを含めた2015年現在のユーザエージェントを判定し分岐処理を行う手順をご紹介します。OSや機種毎の処理を行っていくには、もはや無理がありますので、タブレットかスマートフォンかを判別することのみにフィーチャーしています。 ユーザエージェント情報に依存して、分岐処理を行うと、常に付きまとう悩みの種が新しいOSの登場です。今年もすでにauからFirefox OSを搭載したスマートフォンであるFx0が新たに登場し、次いで日本国内でもWindows Phoneが発売されることが決まっており、ユーザエージェント情報に依存して処理を行っている部分は相次いで見直しを迫られることになりますので、以下、ご参考に活用いただければと思います。 var _ua = (functi
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
趣味プログラミングの勧め：仕事しながら1週間で作ったサービスを紹介してみる - 今日学んだこと
2019/1/1追記：メンテの気力もなくなり、でもサーバー代はかかっており・・・という状況なのでクローズしました １週間ほどブログの更新をサボっていたんですが、何をしていたかというと新しいWebサービス作ってました。 作ったもの http://www.programmerprofile.net/ ソースも公開しちゃうよ！ nakazye/ProgrammerProfile · GitHub 何コレ？ プログラマーのツイッターアカウントを言語毎に並べ立てるサービスです。コンセプトだったり作ったきっかけだったり諸々あるんですが、それは正式リリース時にとっておきます（Topに書いてある通り、まだα版の位置づけ） 趣味プログラミングのススメ ここからが本題。 デザインが酷いとか、コードが投げやりとか、色々意見はあるかと思うんですが、一応動いてます。 コレ、2/1(日)の23時から開発始めたので、休
Google がまだ Flash を使っているサービスでみる脱 Flash の難しさ - てっく煮ブログ
Flash, HTML5スマートフォンの普及が進む中、iPhone には Flash が搭載されず、Android 版 Flash は開発停止になるなど、遅かれ早かれ Web 上から Flash が消えていき、リッチな表現は HTML5 に置き換わっていくことは確実となりました。「これからは HTML5 だ」という印象を世間に強く与えたのが、2009 年の Google I/O でした。Google I/O 2009 レポート グーグルが賭けるHTML 5の未来 − ＠ITGoogle はそれ以降、多くのサービスに HTML5 を取り入れてきました。しかし、いまだに Flash を利用しているサービスがいくつかあります。この記事では HTML5 化していない、または、できていない 5 つの Google のサービスを通してどのこで Flash が使われているのかなぜ Flash が使われて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
オシャレエロサイトをリリースして、10万PV/日を捌くためにやったこと - 彼女からは、おいちゃんと呼ばれています