2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けるこ
[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ（vh）の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー
![[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a5cf0a3bb9540d4d9f77cfb193ce39e28e90836/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080401-02.png)
JavaScriptだけでTrello風タスク管理ボードを開発できるライブラリ「jKanban」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、簡単なJavaScriptコードだけでTrello風の「タスク管理ボード」を開発することができるライブラリのご紹介です！ 非常にカスタマイズ性が高く、自分好みのタスク管理アプリを構築したい人などには最適でしょう。 コードも簡単で初心者の方もすぐに理解できると思うので、ぜひ参考にしてみてください！ 【 jKanban 】 ■「jKanban」の使い方 それでは、まず最初に「jKanban」を利用するための準備から始めていきましょう！ 必要になるのは専用の「JS / CSS」ライブラリで、GitHubからそれぞれ取得して読み込むだけなのでお手軽です。 これらのライブラリは次のようにHTMLへ追記しておけば準備完了です。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>j
とりあえず試してみたいって方のための phina.js 入門 | phiary
phina.js Advent Calendar 2015 - Qiita 8日目のエントリーです. 1日目 本日 JavaScript ゲームライブラリ『phina.js』をリリースしました! | phiary 2日目 ManagerSceneでゲームの流れを管理しよう | daishi blog 3日目 ゲーム開発 - 気鋭の新JSゲームライブラリ「phina.js」の概要を自分なりにまとめてみた - Qiita 4日目 【phina.js】Gridクラスを使いこなそう - Qiita 5日目 phina.js で Webフォント を使ってみるよ！ - Qiita 6日目 [phina.js] Tweenerを使いこなそう! [Tweener 基本編] - Qiita 7日目 [phina.js] サンプルから覚えるphina.js - Qiita このブログでお馴染みの とりあえず試
ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」:phpspot開発日誌
Home - jQuery.smoothState.js ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」 WEBページというと画面遷移で一旦画面がクリアされて再描画されるため、アプリっぽい体験にすることは通常難しいですが、こちらのプラグインを使って、よりアプリっぽいWEBページ作りが出来ます。 ページ遷移後はURLもa.html→b.htmlのように変わるため、ブックマークやSEO的にも問題のないWEBページ作りに役立てられます 関連エントリ ページ遷移を意識させないアニメーションによるページ切り替え効果実装 モダンでかっこいいページ遷移アニメーションサンプル
jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」（実装解説つき）
jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」を紹介します。 jQuery hashchangeプラグイン １．機能 Ajaxを使って切り替えたページについては、通常、ブラウザの「戻る」「進む」が使えません。 が、hashchangeプラグインを利用すれば、Ajaxを使って切り替えたページについてもブラウザの「戻る」「進む」が有効になります。 例えば下の図の①～⑤のページ遷移で、通常は「戻る」「進め」ボタンで②～④の遷移は行われませんが、hashchangeプラグインを使えば②～④のページ遷移も実現できます。 具体的な仕組みですが、まず基本的なJavaScriptの動作として、フラグメント（「index.html#abc」の「#abc」）を使ってページを切り替えた場合、フラグメント「#abc」が「location.hash」に
jQueryはNGと言われた時の便利なメソッド - Qiita
とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。（※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります） 更新 addClass,removeClassを修正致しました。 元記事 下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッド イベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if
スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
Class構文について - JS.next
概要 待ち焦がれた人も多いことだろう。ES2015の一番の目玉機能とも言えるクラス構文が、ついにV8でサポートされた。 Class構文は、『関数（コンストラクタ）定義』＋『.prototypeへのメソッド定義』の糖衣構文である。 JSで今まで様々に工夫されてきたクラスの書き方を、綺麗に統一してくれる可能性を秘めている。 クラスを作る 従来、Catクラスを作ろうとした場合このように書いてきた。 function Cat(name) { this.name = name } Cat.prototype.meow = function () { alert( this.name + 'はミャオと鳴きました' ) } しかしこの書き方だとどうしても、コンストラクタとメソッドの定義が分離されているため、クラスとしてまとまりがなく分かりづらく感じる。 メソッドが増えてきた時も、Cat.prototyp
Webページの読み込み速度（表示速度）が遅いときの改善方法 | Webマーケティングブログ｜Webコンサルタント石田ヤス彦.
実は、今日は、ここからが本題だったりします。 画像の圧縮と是非併せて使ってもらいたいのが、jQueryプラグイン『Lazy Load』。 jQuery（ジェイクエリー）とは、JavaScript（ジャヴァスクリプト）ライブラリの1つ。 JavaScriptは、文字や画像などにさまざまな「動き」がつけられる言語です。まあ、とりあえず、難しいことは置いておきましょう。 『Lazy Load』をWebサイトに組み込むと、画像を一気に読み込まず、スクロールに合わせて読み込むようになります。 ページの表示と同時に画像をすべて読み込まないので、読み込み速度が短縮されるのです。 最近、いろいろなWebサイトで見かけるようになってきました。 ちなみに、このブログでも Lazy Load を組み込んでいるのですが、わかりますかね？？ わかりづらければ、こっちのサイトの方が顕著にわかるかもしれません。 それで
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
Safariのポップアップウインドウを開かない件です。 | yabuchany.com blog
以前、聞かれて「すいません。わかりません。」って言ってしまった事なんですが。 Safariのポップアップウインドウを開かないにチェックを入れていてもFlashからポップアップを開くようにする方法 がわかりましたので自分の為にメモします。 ＊「GRAM | グラム」さんの記事に「Opening External Links in new window from AS3」というのが紹介されていました。 それを参考にして、AS2で「Safari」とそれ以外のブラウザで分岐させ「Safari」の場合はgetURLを、それ以外のブラウザはExternalInterface.calを使うのを作ってみました。 ＊_rootにbtn_mcと言う名前のMovieClipを置きタイムラインの1フレーム目にScriptを書いてる場合の例。 import flash.external.ExternalInterf
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
jQueryとAjaxで作るスムーズページング (1/3)
Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」（Paging）と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON（JavaScript Object Notation）、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン
複数のJavaScriptファイルを簡単にマージできるオンラインサービス「JMerge」
ウェブサイトのパフォーマンスを向上させるテクニックの1つに、HTTPリクエスト数を減らす方法があります。 複数のJavaScriptファイルを1つにまとめるのもその1つですが、複数のファイルを1つにまとめる作業はちょっと面倒です。 が、本エントリーで紹介するオンラインサービス「JMerge」を利用すれば、ウェブサイトで利用している複数のJavaScriptファイルを簡単にマージすることができます。 JMerge ページ内にマージしたくないJavaScriptファイルがある場合も、簡単に除外できます。 使い方 フォームの「URL:」に、ウェブサイトのURLを入力して「Continue」をクリック。 ウェブサイトで使われているJavaScriptファイルを上から順番に検索し、一覧として表示します。ここに表示されているファイルがマージ候補になります。 表示されたURLをクリックすれば、マージした
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://plus.appgiga.jp/masatolan/2015/07/29/56567/
Loading...
https://design-spice.com/2012/06/13/responsive-web-design-image/