サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
tecuration.com
「Shuffle.js」はHTMLエレメントをレスポンシブが取り込まれたグリッド上でソート、フィルタリングを実現するjQueryプラグインです。 Shuffle.js 今作っていたWebサービスに取り入れたかったのでエントリー。異なるサイズのエレメントを含んでいてもグリッドレイアウトでソーティングしてくれます。またカテゴリによるフィルタリングも可能です。アニメーションもスムーズで良い感じ。 まずはこの状態から作成日付順にソートしてみます。 画像だけ見ても変わっているところしかわかりませんが、アニメーションがかっこいいです。 このようにフィルタリングも可能です。”Graphic Design”でフィルタリングしてみました。 それでは「Shuffle.js」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。 <script src="//cdnjs.cloudflar
「On-Scroll Animated Header」は固定ヘッダーの高さをスクロールに応じて変更します。リンク先で実装方法が紹介されています。 On-Scroll Animated Header デモページで実際に試していただきたいのですが、僕にはとても新鮮なUXでした。上記の画像の状態からスクロールしていくと、以下のようにヘッダーの高さがアニメーションで狭まります。 しっかりレスポンシブデザインも取り込まれています。メニューがタイトルの下に移動していますね。 紹介されているJavaScriptの実装方法にコメントをつけて記載しておきます。 var cbpAnimatedHeader = (function() { var docElem = document.documentElement, header = document.querySelector( '.cbp-af-heade
「jInvertScroll」は縦にスクロールさせると、横へ画面がスクロールする機能を実現するjQueryプラグインです。え?たったそれだけ?と思うかもしれません。しかしパララックスデザインにおいてとても斬新なUXを与えていると思います。 jInvertScroll パララックスデザインとは縦に長く、1カラム構成なサイトデザインのことを言います。最近よく見かけますよね。個人的にはCoineyさんのホームページが大好きです。 Coiney しかしこのプラグインを使って作るのは横に長いサイト。このような感じに横にスクロールします。斬新なUX。 それでは「jInvertScroll」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min
「Smart Table」はソート、フィルタリング、フォーマッティング、Edit、セレクトなど多機能なテーブルを実装することの出来るJSライブラリです。 Smart Table 「Smart Table」ではtableタグを一切使わず、JavaScriptのMVCフレームワークであるAngularJSによって作られたライブラリを用いることでtableを実装します。難しそうに思うかもしれませんが、まったくそんなことはありません。リンク先では実装例も丁寧に載せてくれています。今日はまずどんなtableが実装できるのかを紹介し、その後実装例を載せていきます。 「Smart Table」で実装することの出来るtableです。まずはベーシックなtable。 フォーマットかつ、ソートが出来るtable。Last Nameには小文字が入ってきても自動的に大文字変換されます。また、各カラムでデータの昇順、
僕が作ったWebサービスのmetaタグ設定をする際に学んだことなどを書いておきます。metaタグについては全くの素人だったのでどうしたものかと迷っていた時ふと思い出しました。nanapiさんがSEOに強いということを! nanapiさんがSEO対策を非常に重視されているということは以下の記事を読んで知っていました。まぁWebサービス展開されている方はみなさん重視されているのでしょうが。 nanapiが人力でやっている細かすぎるが効果的なグロースハック ユーザーのためが最強のSEO!nanapiのSEOで何をしているか metaタグというと僕にとってSEO対策のイメージが強く、じゃあnanapiさんから学べばいいんじゃないか?ということで今回の運びとなりました。短絡的ですかね。。。 で、学ぶといっても実際にしたことはnanapiさんのトップページ(http://nanapi.jp/)を”ペー
「JSON Editor Online」はブラウザ上でJSONを編集できるオンラインエディタです。JSONエディタはいくつかありますが、シンプルながら欲しい機能は揃っていて、操作しやすいUIがこのエディタの特徴です。 JSON Editor Online – view, edit and format JSON online 画面が2つに分かれていて、左がJSON、右がツリー状に並べたものです。どちら側でもデータを編集することが可能で、編集した後中央にある矢印を押すことで片側へ反映することが出来ます(上書きされてしまうので、この操作には十分注意してください)。編集の手順を紹介しておきます。 右側のツリーを編集していきます。”Action Menu”ボタンをクリックし、”Append”で行を追加しましょう。 すると”FIELD : VALUE”が表示されるので、編集しましょう。”name:
「jQuery Gridly」はオブジェクトをグリッド上に並べ、ドラッグ&ドロップによるソート、削除機能のUIを提供するjQueryプラグインです。 jQuery Gridly ちょうど今作っているWebサービスにこの手の機能が欲しかったのです。自分で実装してしまったので、時既に遅しですが。。。 こういう機能はTwitter Bootstrapなり、jQuery UIを使えば実装できるので初心者の方は勉強がてら挑戦してみるとよいです。が、既にその域を超えている方には手間ですよね。 こんな具合にドラッグ&ドロップができます。 タイルをクリックすると縦横比が2倍になり、グリッドが並び変わります。これはかっこいいエフェクトですね。 それでは「jQuery Gridly」の実装方法をご紹介します。まずは外部ファイルを読み込みます。 <script src="//ajax.googleapis.co
「bootstrap-wysihtml5」はツールバーがシンプルでとてもかっこいいwysiwygエディタをたった1行のJavaScriptで実装できるJavaScriptライブラリです。 bootstrap-wysihtml5 機能は必要最低限ですがツールバーがかっこいいです。リンクや画像のURLはモーダルウィンドウから指定できます。 それでは「bootstrap-wysihtml5」の実装方法をご紹介します。まずはjQuery、Bootstrap含む外部ファイルを読み込みます。 <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="src/bootstrap-wysihtml5.css"> <script s
「FlowType.js」はボックス幅を変更すると、その幅に応じたフォントサイズ、行間に自動調整してくれるjQueryプラグインです。 FlowType.js 久しぶりの更新になります。テック系の情報はしっかりウォッチしていたのですが、実際に試してみて記事を書く時間がありませんでした。。。しばらくそんな状態が続きそうですが、とりあえず復活第一弾は使い道がいまいち思い浮かばないこのプラグインをご紹介。 親エレメントの幅を変更すると、それに応じてフォントサイズと行間が自動調整されるというもの。 まずはこの状態。 やじるしのスライダーを操作するとこの通り。幅が広がり、応じたサイズになっています。 それでは「FlowType.js」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。 <script src="//cdnjs.cloudflare.com/ajax/libs
「OWL Carousel」はスマホからのタッチ操作や、レスポンシブデザイン、クロスブラウザ対応がされたカルーセルスライダーを実装するjQueryプラグインです。 OWL Carousel 最近は多くのプラグインがスマホからのタッチ操作に対応しつつあります。時代の流れですね。このプラグインにおいても例外ではなく、しっかりタッチ操作に対応しております。PCではドラッグが相当します。 レスポンシブデザインが取り込まれており、画面幅をかえるとページネーションも作り替えられます。例えばこの状態から画面幅を狭めると。 この通り、ページネーションの個数が2個から4個に変わっています。 そしてクロスブラウザ対応により「IE7, IE8, IE9, IE10, Chrome, Safari, Firefox, Opera, Dolphin, iPhone, iPad, Google Nexus」に対応して
結構苦戦したので、書いておこうと思います。Twitterのツイートボタンと、Facebookのシェアボタンをデフォルトの表示から、自分の好きな画像などに変更する方法です。 きっかけはFacebookのデフォルトのいいね!ボタンがあまりに重く、画面のロードに大きな影響を与えていたことです。そもそも見た目がイケてない!というわけで、Twitterボタンも含めてカスタマイズすることにしました。 まずはデフォルトのソーシャルボタンが生成出来るリンクを載せておきましょう。作り方は他のサイトさんに譲ります。 Facebook いいね!ボタン:Like Button Twitter ツイートボタン:ツイートボタン で、生成されたコードを見てみるとJavaScriptが含まれていて、その処理でiframeタグを生成して画面に表示しているんですね。どのように処理しているのか詳しくはわかっていないのですが、と
jQueryで実装しているとは思えないほど滑らかにスライドします。またスライドの種類が豊富で、縦、横、またはその組み合わせや、タブなんかも実装できます。PCではドラッグでスライドさせることが出でき来ます。 一般的な横スライドです。 1ページに複数のスライドを含ませることもできます。 横をベースに、縦スライドも含ませています。面白いですね。 こんなのも実装できます。アイコンリストが横スライドし、アイコンをタッチすると紹介文章が表示されます。 「Swiper」の基本的な横スライドの実装方法をご紹介します。まずは外部ファイルを読み込みましょう。 <link rel="stylesheet" href="idangerous.swiper-2.css"> <script src="idangerous.swiper-2.js"></script> HTMLはこのようにマークアップします。コメントを
多くのフレームワークが登場しているなか、やっぱり便利なTwitter BootStrap。これをさらに便利なものにするため機能を拡張するプラグインがありますが、それらのまとめ記事がありました。この中から個人的に使えると思ったものを20個厳選してご紹介します。 50 Must-have plugins for extending Twitter Bootstrap 1. Fuel UX チェックボックス、コンボボックス、データグリッド、ピルボックス、検索などBootstrapの機能を拡張します。 2. Jasny こちらも機能拡張を実現します。機能が豊富で、Bootstrapと組み合わせることで非常にパワフルなフレームワークとすることが出来ます。 3. Simple Lightbox サムネイル画像などを元のサイズで表示させるために使えるライトボックス。名前からもわかる通り非常にシンプルです
アイコンが欲しくて探していると、望むアイコンを見つけたのにPSD!という時ありますよね。そう思ってしまうのはPhotoshopを使えないからです。もちろん私もその一人。なのでPNGやICOを望んでいます。(PSD→PNGなどの変換ソフトもありますが、面倒。。。) というわけで、今回は流行りのフラットアイコンを提供しているサイトの中でも、PNGでダウンロード可能なものを厳選してご紹介します。 1. Batch. 丸みを帯びたデザインで、使いやすそうなアイコンです。 2. Modern UI Icons 量が豊富。Webサービス系からマップ系まで幅広いアイコンが揃っています。 3. iconmonstr 執筆時点で1,776種ものアイコンが揃っています。量が豊富なだけあってあまり見ないようなアイコンもあります。pngだけでなく、アイコンフォントにも対応。 4. Pictonic プログラミング
「dropzone.js」はドラッグ&ドロップでファイルをUploadするUIを提供するjQueryプラグインです。 dropzone.js ファイルアップローダーを実装するプラグインはたくさんありますが、「dropzone.js」の特筆すべき点はデザイン性の高さと、実装の簡単さにあります。まずそのデザインをデモ画像を通じてご紹介します。 Uploadする前はこのような状態です。 画像をドラッグ&ドロップします。するとUploadが始まります。プログレスバーが表示され、どれくらいで処理が完了するかが分かります。 画像のUploadが完了しました。このようにミニサイズの画像が表示されます。 では、「dropzone.js」の最も基本的な実装方法についてご紹介します。まずは外部ファイルを読み込みます。 <script src="dropzone.min.js"></script> HTMLはこ
このページを最初にブックマークしてみませんか?
『pp电子游戏-电子游戏巴士』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く