JavaScriptとCSSだけでキューブがグルグル回るアニメーションを提供するプラグインを紹介します。 HexaFlip ■四角の色の変更 サンプルのdemo.cssの以下の行を変更すると表面の色が変わります。 54行目〜73行目まで #hexaflip-demo1 .hexaflip-cube > div:nth-child(1n+1), #hexaflip-demo2 .hexaflip-cube > div:nth-child(1n+1) { background-color: #3366FF; color: #FFF; } #hexaflip-demo1 .hexaflip-cube > div:nth-child(2n+2), #hexaflip-demo2 .hexaflip-cube > div:nth-child(2n+2) { background-color: #00
JavaScriptのalertやconfirmなどのダイアログ表示をした時、文字列の改行をする方法です。 以下のように【\n】を入れることで文章を改行することができます。以下のように記述します。¥nじゃなくて\nというところに注意です。
右上や左下からにょっきり通知エリアでてきて通知をしてくれる実装を簡単にできるプラグインを紹介します。ajaxと組わせることで、画面をリロードさせることなく通知をすることができます。 ユーザが画面遷移しなくても情報の通知ができるのでユーザビリティの向上に繋がると思います。
フォーム入力のシステムを作っていると、郵便番号と住所を入れる場面が多々あると思います。郵便番号入れているのに、住所を入れるの面倒くさいです。 郵便番号からある程度住所を補完してくれると非常にユーザビリティが向上します。そんな機能を簡単に実装することができるjQueryプラグインの紹介です。 ■郵便番号→住所へ変換してくれるjQueryプラグイン【jpostal】 GitHub上にプロジェクトが存在しています。動作デモはこちらです。 利点として、github上で郵便番号と住所の関連情報のjsonを管理してくれているので、サーバ上に大量の郵便番号→住所のjson的な物を持っておかなくても良いです。住所の更新も自動となります。 サンプルスクリプトは以下のとおりです。とても簡単に実装することができます。 <html> <head> <script src="//ajax.aspnetcdn.com
■長いドロップダウンリストのユーザビリティ向上のために たくさんデータが存在するドロップダウンリストは下に長くなってしまい、選択するのが大変になってしまいます。ユーザビリティも低下してしまいがちです。そんな悩みを解決するために、テキストリアに文字を入力するとある程度ドロップダウンリストの項目を動的に絞り込めるサンプルを書きました。 テキストエリアに文字列を入れると、そのテキストが含まれている選択肢のみ表示されるようになります。 以下、サンプルコードです。デモはこちらです。 <html> <head> <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // まずは対
GoogleMapにピンを打つスクリプトを書いてみました。地図上にピンを打つウェブシステムなどを作る時の参考になるかと思います。 動作サンプルです ピンに画像を指定することも可能です。画像を設定することで、ピンが画像に置き換わります。 以下、スクリプトサンプルです。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <div id="map" style="width: 600px; height: 600px;"></div> <script type="text/javascript"> // 地図の初期化 var map = new google.maps.Map(document.getElementById("map"), { zoom: 2
■triggerでイベントを発生させる 例えば、ドロップダウンリストを操作した時に発生するchangeイベントを発生させたいときは、以下のように記述すると発生します。 以下の様なドロップダウンリストがあるとします。 <select name="hogehoge" id="hogehogehogehoge"> <option value="0" selected="selected">未定</option> <option value="1">山形県</option> <option value="2">福島県</option> <option value="3">新潟県</option> <option value="4">東京都</option> </select> 以下の様に記述すると、【ドロップダウンリストが変更された】ことになります。 $('#hogehogehogehoge').
jQueryのajax機能を使って、ファイルなどをPOSTする時の書き方サンプルです。対象IDを記述したformタグからactionの中身を取得して、POSTしています。 // 情報をajaxでPOST function dataSubmit(formId, callback) { var postUrl = $(formId).attr('action'); form = $(formId); fd = new FormData(form[0]); // ajax通信 $.ajax({ url: postUrl, type:'POST', data: fd, processData: false, contentType: false, timeout:10000, success: function(data) { alert('登録完了しました'); eval(callback);
チェックボックスのなかで、チェックされているフォームの値だけを、jQueryを使って取得する方法です。 以下の様なHTMLを用意します。 <label for="test1" class="checkbox"> <input type="checkbox" name="data[hogehoge][]" value="checked1" id="test1"> checkbox1 </label> <label for="test2" class="checkbox"> <input type="checkbox" name="data[hogehoge][]" value="checked2" id="test1"> checkbox2 </label> <label for="test3" class="checkbox"> <input type="checkbox" name="d
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 使い分ける対応していないIE8以下には古いjqueryを読み込ませます <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。オトギアでフロントエンジニアをやってます。atsumoです。 今回は、現在オトギアで使用中のフレームワークAngularJSのお話を少しさせていただければと思います。 ※ AngularJSのバージョンに関してはオトギアで使用中のバージョンである、1.2.16をベースに書かせていただきます。AngularJSとは https://angularjs.org/ Googleとコミュニティによって開発されているオープンソースのMV*系のJavaScriptフレームワークです。 同じような種類のフレームワークとして、Backbone.jsやKn
こんにちは。PR TIMESフロント・エンジニアの山田です。 弊社ではAjaxを使ったサイトやサービスも多く運営しています。 さて、そのAjaxですがページ遷移なしにコンテンツを切り替える場合、当然ながらそのままではブラウザのURLも変わりません。これではユーザーが直接読み込み先にアクセスしたり、ブラウザのBACKボタンで前に戻ったりできないので不便です。そんな時に使えるのが、Hisotry API。これはブラウザの履歴をJavascriptから管理、操作できる便利なAPIです。 まず以下の4つは以前からあり、古いブラウザでも動作します。 history.back();//表示した履歴の1つ前のページにもどる history.go(4);//表示した履歴の4つ前のページにもどる history.go(2);//表示した履歴の2つ先のページに進む history.forward();//表示
こんにちは、a-knowです。 今回も前回に同じく、AngularJSの話題です。 表題の件で、最初は下記のように記述していたのですが、 var parameter = {}; parameter.piyo = 'abc'; parameter.moko = 'xyz'; $http({ method : 'POST', url : '/api/hogeFuga', params: parameter }).success(function(data, status, headers, config) { //成功 }).error(function(data, status, headers, config) { //失敗 }); これだと、リクエストURLが「http://a-know-home.appspot.com/api/hogeFuga?piyo=abc&moko=xyz」で「
Private content!This content has been marked as private by the uploader.
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 最近、こういった記事が世間をにぎわせている。こりゃエヴァの話なんてしてる場合じゃねぇ！と思ってさくっとこの辺の事情を理解するために必要なことをまとめてみる。 Railsが時代に合わなくなってきた Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 昔ながらの「片手間に書くJavaScript」の限界 GoogleやTwitterでも実現できないのだから使うな問題 この話は、どの地点の何の話をしているのかよくわからないのです。現在ではかなりステップバック＆改善が行われ、Safari自体のクラッシュはアプ
Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 - Qiita この記事は、全体的に自分の業務以外の評価基準やトレンドを知らないんだなという感じで、わざわざ付き合うと精神的に消耗する感じがした。ただ、それが彼らの本職でない以上、自分もこの結論に至るのは仕方ないと感じている部分はある。 真の問題は、自分がレガシーなJavaScriptを書いているという自覚がない人間が、ここ数年の技術トレンドから乖離したコードを書き続けることで他のエンジニアやエコシステムそのものに悪影響を及ぼしているケースが散見されている。一行書く毎にグローバル汚染するスクリプトを見せられてもメンテ出来んと言われても、はいそうですねとしか言えないし、そういう人に最近のライブラリを触らせると遅くなるというのは、画面全体を一つのMustacheテンプレートにしてBackbone.Modelのパラメー
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 結論: Javascriptの乱用をやめるのが一番。 はじめに書いておきますがしょうもない話です。 結論、開発者としてはどのような方向性でやるべきか、を書いています。 JS多い時代でのフレームワークの根本的な問題云々のことは書いてません。 さて、現状、モバイルにおいて、Javascriptでまともに動くものを作ることは難しいです。 Twitterから引き抜いた超優秀なWebエンジニアを多数抱えるMediumですら、未だにモバイルで多数のバグを抱えています。 超優秀なエンジニアを世界一抱えているであろうGoogleのGmailですら、モバ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く