CoreUIはBootstrapベースのUIフレームワークです。レスポンシブな管理画面の基礎を用意してくれており、開発スピードを補うものとして公開されています。各コンポーネントも揃えられており、キレイめで見やすい印象でした。 ライセンスはMIT。 CoreUI
![Bootstrapベースで作られたオープンソースの管理画面UIフレームワーク・「CoreUI」](https://cdn-ak-scissors.b.st-hatena.com/image/square/e046ac1b6f141ce8627d4893d04896b2ea22d836/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2017%2F01%2Fcoreuui01.jpg)
JS NICEは難読化されたコードを読みやすく整形するツールです。ただ整形するだけでなく、ローカル変数の名前を変更する事も可能みたい。沢山のOSSから規則性を学習したプログラム解析技術を利用しており、適切な変数名を提案してくれる、との事です。まだあまり触っていないので何とも言えませんが・・・興味のある方は以下でお試しになってみては。 JS NICE
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script>本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{ "
Googleカレンダーで設定したイベント等に対応したカレンダー実装スクリプト・kalendarのご紹介です。勿論、普通にイベント設定も可能。jQueryに依存しています。 イベント対応のカレンダーを手軽に実装出来る、というスクリプトです。 こんな感じのカレンダーです。日付を押すとその日のイベント一覧に切り替わります。 Sample events: [ { title: "hoge", start: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, end: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, location: "huga", url: "http://example.com", color: "string" } ],イベントは上記の要領で設定すればいいみたい。 他、Google
様々なスタイルでツールチップを実装する為のJavaScriptフレームワーク・opentipのご紹介です。噴出しの形状や表示場所、Ajax対応など、状況に応じて実装する事が出来ます。 ツールチップ実装用のJSライブラリです。様々なスタイルで実装可能です。 ツールチップのJSフレームワークです。OSSとして公開されています。 複数のツールチップを一括で出すことも可能です。 <div data-ot="Shown after 2 seconds" data-ot-delay="2"></div>カスタムデータ属性でセッティングできるみたい。 new Opentip("#foobar", "Shown after 2 seconds", { delay: 2 });上記のようにAPIを使用する方法でもOKとの事。 ライセンスはMITです。詳細は以下よりどうぞ。 opentip
長いテキストを省略して表示 する、というjQueryプラグイン 、Smarttruncationのご紹介。 CSSのみでも一応は可能ですけど、 こちらはある程度応用が利くの で覚えておこうかと思います。 この手のライブラリはいくつか見かけましたけど、これは日本語でもそのまま利用出来るので一応メモ。 動作サンプル 長いテキストが省略されています。上は語尾を、下は真ん中あたりで省略。なかなか便利なのでは。 CSSのtext-overflow:ellipsis;で制御できない時に試してみてはいかがでしょう。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script src="jquery.smarttruncat
jQueryをうまく取り入れた良デザインなWebサイトを収集しているデザインギャラリー・Best jQueryのご紹介。jQueryを使用するWeb制作者さんには、インスピレーション向上だけでなく、コードやUIも参考になるかもですね。 普通にWebデザインギャラリーとしても良さそうですが、jQueryを使用している、という共通点を持っていますのでそちらの面でも参考に出来そうです。 jQueryを利用している良デザインなサイトを収集しています。AWWWARDSで見かけるようなサイトが多い印象です。 以下のようなWebサイトが紹介されています。 Tatchies EVB Nerisson 他にもいろいろ。100サイトほど紹介されています。 Webサイトのコンテンツでのカテゴリ分けしかされていないのでギャラリーの機能としては探すのに少し弱いかもですけど、選択肢の一つとしてはありじゃないかなと思い
今更ですけどLungo.jsを少し触って 見ました。Lungo.jsはHTML5+CSS3の スマートフォン向けフレームワーク です。jQueryやmootoolsなどを必要 としない非依存型のライブラリです ので覚えておいて損は無いかも。 スマフォ向けフレームワークです。GPLv3ライセンスでOSSとして公開されています。 スマフォ向けのフレームワークは相当出回っていますので珍しくないかもですけど・・触った感じはなかなか使いやすそうでした。コアファイルは非圧縮で40kbほど。 以下、公式サイトのサンプルです。 Sample スターターキット的にも使えそうです。 ↑ 実機でのスクリーンショット この手のは沢山あるので好みで選べばいいですね。詳細は以下でどうぞ。 Lungo.js
シンプルで見やすいガントチャート を描画できるjQueryのプラグイン。 以前見かけてから放置していたので 少し触って見ました。使う機会は 個人的には多くありませんけど、 覚えて置いて損はしないかと。 この手のはよく見かけますけど、今日のプラグインは個人的に使いやすい印象だったのでメモ。 こういうやつ。 サンプル作ったので宜しければご覧下さい。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src="jquery.fn.gantt.js"></script>本体とプラグイン。 $(".foo").gantt({ scale: "weeks", minScale: "weeks",
よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script> jQuery本体とプラグインを読み込みます。 $(
Google MapのデザインをjQueryで変更する為のメモ書き。Google Map APIとjQueryでGoogle Mapの色合いを変更し、オリジナルのマーカーを付けてみます。こうする事で、既存デザインに合わせたGoogle Mapが出来ます。 今後必要になりそうだったので調べ物をしたついでにメモ書きです。デザインを変更、というと語弊がありますけど、好みの色に変えてみます。 ゴール↓ こんな感じのをjQueryでやろう、みたいな内容です。特に目新しい情報では無いですが。 なんかシャドウ変になっちゃった・・色やマーカーだけでもWebサイトで使用している色にあわせれば地図だけ浮いてしまうような事も無くなるんじゃないかなと思います。 ジオコーディングリクエスト<script type='text/javascript' src='http://ajax.googleapis.com/a
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
Caroufredselという、結構人気なプラグイン があるんですが、このプラグインの開発者が 応用例をサンプルソース付きでまとめてくれ ていましたのでご紹介。1つのプラグインで ここまで出来るってちょっと凄いですね。 もう少し軽量になってくれると嬉しいんです けど・・ カルーセル系プラグインの定番的なライブラリ、Caroufredselの応用例を開発者さん本人がまとめてくれていました。もともと沢山例があったんですが、更に一歩進んだ使い方を紹介してくれています。サンプルはダウンロードできます。
暫く空いてしまいましたが、jQueryを コピペに頼らず自分で書いてみよう、 という記事。第三回目です。僕よりも 全然詳しい人のほうが多いんですが、 最近何度かデベロッパーさんの憤り の発言を目にするので多少でも貢献 出来ればと思います。 というわけで第三回目はよく見るタブメニューを書いてみましょう、というもの。 「jQueryを使ったスムースなタブメニュー – ウェビメモ」という記事をお見かけしたのですが、簡単なタブメニューですのでコピペにもプラグインにも頼らず自分で作ってみようじゃないかと、そういう趣向です。 内容は完璧に良いコードとかではなく、あくまで脱ビギナーという内容となります。ビギナーの僕が何様だみたいな話は置いといて。 分かりやすさをメインにしていますので厳密には説明が少し違う点もあるかもしれません。誤解招きそうな記述ありましたらご指摘下さい。 ゴールの確認 まず完成形を見て
jQueryのフィルターが便利なんですが、 なかなか全部把握出来ないので自分用 にまとめることにしました。マイチート みたいな記事です。フィルターはかゆい ところに手が届く便利なもので、場合 によってはコードも短く済ませること も出来るかもしれません。 というわけでフィルター一覧です。あんまり把握出来てなかったのでこの機会に全部目を通して触ってみました。機能というか、どんな感じで要素を取得出来るか、みたいな内容になります。 しっかり使いこなしてきた人間の書いてる記事じゃないので、もしかしたら解説が間違ってるかもしれません。一応公式のリファレンス見ながらやってますけどそれでも勘違いしていたらご指摘頂けると嬉しいです。 カテゴリごとにjsfiddleで全サンプルを用意してありますのでフォークしてご自身向けに変更して頂ければと思います。 Basic Filter(基本フィルタ) Sample 基
珍しいなー、と思ったのでご紹介。日本の Web制作会社さんのコーポレートサイトを 専門に収集しているWebデザインギャラリー 「魅せるWebデザイン」です。まだ数が多い 訳ではありませんが、なかなか見ないタイ プなので良い刺激になるかもですね。 こういうデザインギャラリーは珍しいですね。地域別になっているので同じ地域なら交流相手を見つけたりも出来るかも。良い刺激になりそうなギャラリーサイトかもですね。 シンプルで見やすいです。どうしても東京が多くなっちゃいますけどまだサイト開設して間も無さそうなので自社サイトに自信がある方はコンタクトを取ってみては如何でしょう。 僕もギャラリーサイトを運営していますが、一人で探すのはなかなか難しいのです。 例 福岡のcoralqualia(コーラルクオリア)さん 広島県のアクシスさん 福岡、大分のCONDENSEさん などなど。まだまだ数は少ないですけど、
あまりに情報量が多くて混乱してきたので 自分用にまとめ。リファレンスとか、ちゃんと 実践で使えるツールを自分なりに厳選して まとめておきます。どうも、あっちこっちで あれが便利とかこれが便利だとか言われる と訳が分からなくなるのでそろそろ絞らない とですね。 というわけでお遊びではなく実践に役立ってる基本的なリファレンスとか助けてくれるツールのメモなので目新しいものはありません。完全に自分用のまとめです。個人的には基礎用のサイトと、実践向けのツールやライブラリだけあればいいという感じです。 尚、css3/html5に関する情報だけを求めている&特に情報取得に急いでないならdotHTML5というサイト1つで事足りるかと思います。 ※W3Cは割愛でいいですよね チートシートとかリファレンスだけで基本的にはいい感じですかね・・ HTML5 タグリファレンス マークアップもままならないほど慣れてな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く