CODEPREP | プログラムを書いて動かしながら学ぶ実践型のプログラミング学習サービスCODEPREPはオンラインプログラミング学習サービスです。1日10分プログラムを書くことで「毎日こつこつプログラムを書く習慣」と「作ったものを動かす体験」を提供し、プログラミング学習の「継続」をサポートしていきます。そうして、一人でも多くのユーザにプログラミングの楽しさを感じてもらうことをサポートしてまいります。
NAVERまとめに見る遅延ロードのすすめ « NAVER Engineers' Blog
あけましておめでとうございます。NAVERまとめのフロントエンドを担当している縣です。初詣で引いた大吉のおみくじを握りしめながら今年も張り切っていこうと思います。 今回はJavaScriptの遅延ロードの仕組みをNAVERまとめに導入した際のお話を紹介します。 遅延ロードの検討 昨年NAVERまとめのまとめ閲覧ページや、まとめ編集ページでのJavaScriptファイルの読み込みを遅延ロード化する作業をしました。元々はページ読み込み時に全て読み込ませていましたが、JavaScriptファイルが巨大になってきてパース・実行に時間がかかるようになったことから遅延ロードを検討することになりました。 遅延ロードの利点というとJavaScriptファイルの読み込み・実行によるブラウザのレンダリング停止を防ぐのはもちろんですが、どのファイルがいつどこで必要になるかを明確にすることもでき、依存関係を動的
どんなイベントが設定されているか一目で分かる·Visual Event MOONGIFT
Visual Eventはイベントが設定されているDOMをビジュアル化するライブラリです。 最近のWebサイト開発においてJavaScriptを使わないということは殆どなくなりました。jQueryなどを使って様々なイベントを設定しているサイトも多いでしょう。そこで使ってみたいのがVisual Eventです。 実行しました。色がついた部分がイベントを設定しているところです。 フローティングでアクションの内容が分かります。 Yahoo! Japanで実行しました。意外と色々なアクションが設定されています。 表示の切り替え系が多いようです。 Visual Eventを使うとjQueryで設定したり、onClickで指定したりしたアクションが一目で分かるようになります。jQueryで開発中に設定したイベントが正しく実装されているかどうか確認するのにも使えそうです。 Visual EventはJa
タブやアコーディオン、パララックスなどを実装出来るjQueryベースのUIツールキット・jKit - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 jQueryベースのUIツールキット・jKit のご紹介です。タブやアコーディオン などの良く使われるものから、簡易的 なパララックスやバリデーション、ズ ーマーなどなど多機能なUIキットとな っています。 2013年になりました。喪中により新年の御挨拶を控えさせて戴きます。皆様に取って本年が充実した年でありますようお祈りいたします。 さて、今日はUIキットのご紹介。jQueryベースとなっています。 jQuery UIでいいじゃんと思う方も多そうですけど、選択肢があるに越した事はありません。 ずらっと並んでいます。機能は42種とかなりの数です。 使い方は基本的には他のプラグインと変わりありません。コアとjKitを読み込んでセッティングします。 DOM要素にrel属
[JS]派手な演出は無し！レスポンシブ対応のレイアウトを素早く構築するスクリプト -jquery.columns
サイズを変更するとアニメーションでパネルが移動するなどの派手な演出は一切無しで、レスポンシブ対応のレイアウトを素早く提供するjQueryのプラグインを紹介します。 jquery.columns -GitHub jquery.columnsのデモ jquery.columnsの使い方 jquery.columnsのデモ 対応ブラウザは、IE9/10, Firefox, Chrome, Safari, Operaです。 まずは、デスクトップサイズとして幅1,200pxでの表示から。 デモページ：幅480pxで表示 jquery.columnsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.
2冊目の著書 – やさしくはじめる WebデザイナーのためのjQueryの学校 – あとがき
この度、マイナビさんから、私にとって2冊目の著書 「やさしくはじめる WebデザイナーのためのjQuery学校」が発売になりました！ この本は「HTML + CSS は分かるけど、jQuery ってよく分からない …」という人に読んでいただけたら … と思って書きました。jQuery って何？というところから始まって、基本的な使い方、コードの書き方など、基本的なことはもちろん、初心者の頃につまづきそうなポイントに重点を置きました。 1. 監修：西畑一馬さん、イラスト：狭間句美さん 今回 jQuery の本を執筆するにあたって、Web制作の現場で使う jQueryデザイン入門 の著者でもある、to-R の西畑一馬さんに監修していただきました。 私からしてみたら、西畑さんは jQuery の神様みたいな存在 … そんな人に監修していただけて、私自身もとても勉強になりましたし、読者の皆さんにお届
[jQuery Mobile]役立つコード集とつまづきやすいポイント | コリ
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
フッターに記載するコピーライトの年表記を自動更新する方法
今回はとっても小ネタです。 たいがい、どこのサイトでもフッターに入れているコピーライト表記ってありますよね。 形式としては© 開始年-現在年 Name All rights Reserved.というのが多いかなと思います。この現在年を自動で更新する方法を紹介します。 Photo:Large copyright sign made of jigsaw puzzle pieces By Horia Varlan 本来的なコピーライト表記 いろいろなサイトを見ていると、上述した表記例が多く見られますが、実のところコピーライト表記は以下の記述で十分だったりします。 © 開始年 Name 現在年とかAll rights Reserved.とかは、正直必要ない文言なんですね。 それどころか、現在カンボジア以外の国はベルヌ条約を締結して、無方式主義が採用されているので、カンボジアでの著作権保護対策さえ考
css3とjavascriptを利用する際に頻繁使用 webkitAnimationEndとwebkitTransitionEnd
css3ではアニメーションを設定することが可能となっております。 アニメーションの設定の方法はkeyframeを設定したアニメ、transitionを設定したアニメなどがございます。 transitionアニメーションに関しては以下の記事を参照してください。 css3 transitionアニメーション https://www.webcyou.com/?p=1937 これらをJavascriptと連携させることによって様々な表現をすることが可能になってきます。 その際、良く利用するのが、webkitAnimationEndとwebkitTransitionEndのイベントとなっております。 webkitAnimationEndとwebkitTransitionEndは、それぞれアニメーションとトランジションが終わった時に起きるイベントで 以下の様にして取得することができます。 elemen
<!--:JA-->「デザイナーもJavaScript覚えるべきだよ」について<!--:-->
Web やアプリのデザイナーか「技術にしばられないでデザインを考えていく」コミュニティ。 月1回の定例MTGと年に数回のデザイン中心ハッカソンなどをしています。 先日、Facebookでぼやりとつぶやいたのですが、「デザイナーもJavaScript覚えるべきだよ」ということについて、思うことを素直に書いてみます。 2012年12月8日に開催されたCSS Nite in OSAKA, Vol.34でわたしは微力ながら第二会場の進行をしていました。 この日のセッション内容については、これからのWeb系の仕事まわりでは、なんとなく各専門家はいても、WebならWeb系全般の一般教養みたいなのはおさえておかないと、実際仕事につながらないよねーみたいな雰囲気でした。 たしかにそうなんです。 でも思うのは、「デザイナーもJavaScript覚えるべきだよ」と軽々しく言うのはちょっと違うと思うのです
CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説
CSSでもJavaScriptでもできるけどどちらを使おうか、CSSとJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS & JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで：JavaScriptからCSSを遠ざける ユーザエクスペリエンスを犠牲にしないで使い分ける CSSとJavaScriptの使い分けの大切なポイント はじめに JavaScriptには数多くのライブラリ、jQuery, Prototype, Node.js, Backbone.js, Mustacheなどあり、非常に人気が高いです。これらは実際に非常に多く利用されており、時間をかければもっとよい方法があるかもしれないところでもそれらを使ってしま
その場でデータを編集。BootstrapやjQuery UIに対応した·X-editable MOONGIFT
X-editableはBoostrapやjQuery/jQuery UIで使えるIn-place Editorです。 表示されている内容を編集する際にその場ですぐに編集できるようにするのがIn-place Editorです。それをBootstrap、jQuery UIなどに対応させたのがX-editableになります。 こんな感じでポップアップで編集できます。 エラー表示にも対応。 カレンダーでの入力。 選択式も可能です。 インラインで編集もできます。 こちらはjQuery UI版。 この場合も選択式などが使えます。 X-editableは単純な文字列入力の他に、選択やテキストエリアでの入力にも対応しています。入力チェックも可能で、エラーの際にそのまま表示を残せます。純粋なjQueryにも対応しているのでWebサービスに組み込んでみるのはいかがでしょう。 X-editableはJavaSc
ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」:phpspot開発日誌
Heyoffline.js ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」 フレームワークレスで動いて、onOfflineとかonOnlineとかのイベントハンドラを設定して、オフライン、オンライン時に処理を実行できるみたい。 スマートフォンなんかで、何かを入力してしまっていて、送信ボタンを押したらサーバがオフラインですっていうのは避けたいところなのでこうした仕組みで送信ボタンのアクティブ状態を変更するのも１つの手ですね 家や会社のパソコンは常時接続でオフラインの心配はなくなった、とおもいきやスマートフォンの電波が悪い状態や地下鉄、といったことを考えるとこういう仕組みは必要かもですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」
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
jQueryの$()が多機能すぎる件について。5種類も仕事があるよ。（軽めのjQuery Advent Calendar 2012 – 01日目） | Ginpen.com
軽めのjQuery Advent Calendar 2012 – 01日目 jQueryってあるじゃないですか。便利ですよね。いろんなところで紹介されてるっていうかもう普通に使われてると思うんですけど。 jQuery() APIについてはこちら。 jQuery() – jQuery API jQuery(expression, context) – jQuery 日本語リファレンス jQuery(html, [ownerDocument]) – jQuery 日本語リファレンス jQuery(callback) – jQuery 日本語リファレンス jQuery(elements) – jQuery 日本語リファレンス jQueryと$は同じものなので、jQuery()と$()は同じです。これ、実は関数なんですよ。 というわけで、以下使い方。 5種類の使い方 セレクター : $('#tar
たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS
開発者泣かせの問題児ブラウザ、Internet Explorerですが、IE5.5、IE6、IE7、IE8をモダンブラウザの挙動にする神JSがGoogle Codeで配布されていました。 とりま、 attripのデザイン崩れはこれで解決できました！ 使い方は簡単！下記のコードを貼り付ければOK！ まじ仏。 「IE9.js」は、IEを普通のモダンブラウザの挙動にするJSです。IE5、IE6でも透過PNGが使えるようになります。 「css3-mediaqueries.js」は、IEでCSS3 Media Queriesを使えるようにするJS。レスポンシブデザインのサイトをIEでも見れるようにします。 ちなみに、border-radiusや、box-shadow はできませんでした。 あと、IEでの見え方をチェックする方法はこちら↓↓ IE9環境でIE6/IE7/IE8/IE9表示する方法(共存
インストールするだけ! お手軽サイト高速化ツールGoogle mod_pagespeedはスゴかった | 初代編集長ブログ―安田英久
どれぐらいスゴいかというと、「サーバーにインストールするだけで、あとは設定ファイルをちょちょっといじれば、かなり高速化できちゃう」というぐらいスゴいのです。しかも、どんなサイトでも、どんなCMSを使っていても「インストールするだけ」。 Webサイトを高速化すると、ユーザーに優しいし、場合によっては検索結果での順位にも良い影響が出るかもしれない……それはわかっていても、なかなか本格的にサイトを高速化するのは難しいものです。 サーバー側の高速化に加えて、HTMLのつくりや画像のファイルサイズ最適化、さらにはCSSを調整しての画像スプライト化やCSS/JSファイルの結合・最適化によるブラウザとサーバーの通信本数削減などなど、実はやらなきゃいけないことがたくさん。 グーグルの提供するmod_pagespeedは、そうしたことの、かなりの部分を自動的に行うものです。 mod_pagespeedはこん
JavaScript製のショッピングカートシステム・simpleCart(js) - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 JSだけで作れるショッピングカート システム・simpleCart(js)のご紹介。 作れる、と書いてますけどまだ触って 無いです。便利そうだったので備忘録 的に記事にして見ます。簡単なもの ならこういうライトなもので済ませ たいですね・・ 時間が無くてデモを少し触っただけなのでセキュリティ面での安全性なんかは未確認です。OSSですが利用前にご自身でチェックして下さい。 JS製のショッピングカート。Mootools、jQuery、またはPrototypeに依存するライブラリです。JS+localStorageで作ってるっぽいです。ライトに使えて良さそうですね。※安全なら チェックアウトはPaypalやGoogleチェックアウトに対応しています。ソースをチラッと見たら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
deconcepter.jp