WordPressを使う感覚でReact製のWebサイトやアプリを運用できるOSS・「WebCrumbs」
WebCrumbs WebCrumbsはWordPressを使う感覚でReact製のWebサイトやアプリを運用できるOSSです。プロジェクトを「ReactのためのWordPress」と位置付けており、Reactアプリの為の業界標準ソリューションを目指しているそうです。 WPライク、というようにReactベースのWebサイトを直感的な管理画面で簡単に作成、管理、拡張する事が可能との事。コーディング不要の管理画面でWebサイトの様々な面を管理・制御、プラグインで機能拡張、特定のニーズに合わせたフルカスタマイズも可能となっており、完全オープンソースで提供されています。 もちろん他言語対応で既に30か国以上の方のコミュニティへの参加があるようですが、日本はまだ未参加のようなので、ご興味ある方はぜひご覧になってみては如何でしょうか。ライセンスはMITです。 WebCrumbs
クレジットカードの情報入力を支援する為のスクリプト・Skeuocard
クレジットカードの情報入力支援用に作られたスクリプトです。クレジットカードの情報入力は結構面倒だったりするのでこういった支援スクリプトは気になるところですね・・・ 支援する、とは書きましたけど、デモを触った限りでは、入力しやすくなっていると感じるかどうかは個人差が結構出そうです。もう少し改善が必要かもしれません。 クレカの番号を入力すると背景の画像が変わることで種類を明示したり、番号入力を分かりやすくしたり、みたいなやつ。動作デモとダミー番号が用意されています。 select要素が隠されていて、入力すると自動で選択されるみたいです。背景が変わるのは結構いい感じでしたが、名前と有効期限の箇所が初見で分からなかった。 名前と有効期限の入力欄はクリックで入力出来る様になります。ここは入力できる旨を明示しないと分かりにくいかも。有効期限は出来ればプルダウンにしたいですね。 <link rel="s
インタラクティブなクレジットカード入力フォームを実装するjQueryプラグイン・Card
インタラクティブなクレカ情報入力フォームを実装するスクリプトのご紹介。以前も似たようなものを紹介しましたが、こちらの方が良さそうだったので備忘録。 以前、Skeuocardというスクリプトをご紹介しましたが、こちらも同じ目的で作られたものです。 カード番号を入力すると、頭4桁を解析してカードの種類が表示されます。このスタイルもCSSのみで作っているようです。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'></script> <script src="card.js"></script>本体とプラグインを読み込みます。 $('form').card({ container: $('.foobar')})で、セッティングするだけ。 Webで
input要素に入力パターンを組み込めるjQueryプラグイン・formatter.js
地味に便利そうだったのでメモ。input要素に入力パターンを組み込める、というスクリプトです。jQueryに依存しています。ユーザーの入力の補助によさそう。 input要素に入力パターンを組み込めるスクリプトです。 クレカや電話番号などの数字の入力項目に良さそうですね。 $('#foo').formatter({ 'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}' });上記のように予めパターンを作成しておきます。 <input type="text" class="input" id="foo" maxlength="19" pattern="\d*">あとは指定したセレクタでマークアップすればパターンが適応されます。クレカ等なら、制作側はいちいち4つのinput要素を用意し、レイアウトする手間が省けて、ユーザーも別のinput要素に移動する
Google Mapで任意の場所の周囲にある施設をマーカーで表示するjQueryプラグイン・WhatsNearby
Google Mapで、任意のポイントと、そのポイントの周囲にある施設をマーカーで表示出来る、というスクリプトです。範囲の距離の指定や施設の種類、中心地に設定したマーカーなども設定出来るようになっています。 Google Mapの任意の場所の周囲にある施設をマーカー表示する、というもの。うまく説明出来ませんが語彙がアレなのでご了承下さい。 以下動作サンプルです。 下北沢駅周辺の半径200メートル内のカフェを表示させました。マーカーをクリックすればお店の情報がポップアップします。 $("#foo").whatsnearby({ zoom:17, width:"100%", address: "下北沢", placesRadius: 200, placesTypes: [ 'cafe' ] });セッティングは上記のような感じ。placesRadiusで指定場所から半径～メートル内にある、pl
jQuery Mobileのリストでデフォルトの高さのリストにサムネイルを高さ一杯に含める
ちょっと意味不明なタイトルですが。 jQuery Mobileでリストを書くときの Tipsです。昨日ちょっと個人的に話題 に上がったのでメモ的に記事にします。 最近はすっかりJQMの話題が減っていた ので丁度いいですね。 というわけで備忘録的な記事。jQuery Mobileの話です。触ったことがある方向けですかね。普通のリストの高さに合わせてサムネイルを含めます。正しい方法かどうかは知りません。 これが普通のリストです。このマークアップは以下のような感じ。 <ul data-role="listview"> <li><a href="example01.html">foo</a></li> <li><a href="example02.html">bar</a></li> </ul>listviewというルール名をdata属性に与えればリスト化します。 画像付きにしたい・・けど こう
ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき
フォームのバリデーション用jQueryプラグインいろいろ+α
個人的なメモ。普段さほど使うことが 無いので、必要な時に探すのに時間 掛からないようにまとめておきます。 沢山ある必要はさほど無いのですが、 勉強用も兼ねていろいろと数を揃えて おきました。 お問い合わせフォームのユービザリティ向上として導入されるバリデーション用のjQueryプラグインのまとめと、その他Tipsやフォームデザイン周りの情報をちょろっと。一応動作だけIE6、7でも確認しています。 exValidation 安心(?)の国産プラグインです。複雑なフォームにも対応できるのでとりあえずこれを覚えておけば安心ではないかと思います。 どんなフォームにも使えるjQueryのフォームバリデーション exValidation jquery.validate.js Validationの日本語Ver.です。シンプルなので使い勝手いいですね。日付の確認用プラグインも派生していますので合わせて。
シンプルなモーダルウィンドウ
Result jQuery//クリックイベント $("#showoverlay").click(function() { //オーバーレイ用のボックスを作成 $("body").append("<div id='overlay'></div>"); //フェードエフェクト $("#overlay").fadeTo(500, 0.7); $("#modalbox").fadeIn(500); }); //閉じる際のクリックイベント $("#close").click(function() { $("#modalbox, #overlay").fadeOut(500, function() { $("#overlay").remove(); }); }); $(window).resize(function() { //ボックスサイズ $("#modalbox").css({ top: ($(
WYSIWYGエディタを実装するjQueryプラグイン・jQuery TE
WYSIWYGを実装するjQueryのプラグイン、jQuery TEのご紹介です。WYSIWYGエディタの割に軽量との事です。触って見たいけど時間無いので備忘録的にメモ。 jQueryでWYSIWYGエディタを実装する、というもの。サイズは16KBと、WYSIWYGエディタの割には軽量なのではないかと思います・・でも、他のをあまり良く知らない。 ロゴがなんとなく公式っぽい感じがしますけど・・jQueryのアカウントのGithubには無いから違うのかな。 シンプルな設計で使いやすい印象ではあります。 ライセンスはMITとGPLのデュアルライセンスです。ドキュメントも充実していますのでチェックしてみては。 jQuery TE
jQuery+CSSで実装するナビゲーションメニュー総集編
cssやプログラミングcss+jQuery jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Do
jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた
なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ
シンプルで見やすいガントチャートを描けるjQueryプラグイン・jQuery.Gantt
シンプルで見やすいガントチャート を描画できる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",
リンク不要で商用サイトにも利用可能なフリーのアイコンセットいろいろ
商用でも使っていいよと言ってくれて いるアイコンセットのまとめです。商用 でもOKだけど、要リンクタイプのクリエ イティブコモンズライセンスや、リンク シェア等の「リンク必須」な商用可アイ コンと、あまり使う機会の無い、ソーシ ャルメディアのアイコンセット、RSSア イコンのみのセットなどは割愛しています。 個人的に実用できる、リンク不要のアイコンに絞っています。一応商用OKを確認してはいますが、さらっとしか見ていないので間違ってたら教えていただければ幸いです。また、ご利用の際はご自身でライセンスを確認してからご利用下さい。 200+ Exclusive Free Icons: “Reflection” リフレクションを与えたモノクロアイコンのセット。 ※リンクウェアでした・・・大変失礼致しました 200+ Exclusive Free Icons: “Reflection” Simpli
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate
使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。 プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。 以下動作サンプルです。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery
フォーム周りのエレメントのデザインを見やすいインターフェースに変更できるjQueryプラグイン・jNiceItと、似たようなやつ何個か
どこかで使いたいなと思ってメモ。フォーム で良く使うラジオボタンやチェックボックス などのデザインを割りと簡単に見やすいデザ インに変更できるjQueryプラグインです。 この手のプラグインは沢山あるので選択肢の 一つとして、ですが、個人的には使いやすい 印象でした。 昨日に続き、今日もフォームのスクリプト。今日はフォームデザインを変更できるやつです。IE6だけちょい崩れるけどそれ以外は共通したデザインに変更できます。 ラジオボタンとかチェックボックスを画像に置換するプラグインですかね。なので、デザインの変更は基本的に画像とCSSを少し変えるだけです。尚、画像の指定もcssで行います。 左が普通で、右がリア充ですね。シンプルでいい感じです。見た目がいいほうが愛されるんですねきっと。世知辛い世の中ですこと。 マークアップも特別なことはしなくて済むのも楽かも。デザインの変更は基本的に画像を変え
地味に使えるCSS小技のメモ&サンプル集
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード.centered { position: relative; overflow: hidden; } .centered ul { position: relative; lef
HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか
あまりに情報量が多くて混乱してきたので 自分用にまとめ。リファレンスとか、ちゃんと 実践で使えるツールを自分なりに厳選して まとめておきます。どうも、あっちこっちで あれが便利とかこれが便利だとか言われる と訳が分からなくなるのでそろそろ絞らない とですね。 というわけでお遊びではなく実践に役立ってる基本的なリファレンスとか助けてくれるツールのメモなので目新しいものはありません。完全に自分用のまとめです。個人的には基礎用のサイトと、実践向けのツールやライブラリだけあればいいという感じです。 尚、css3/html5に関する情報だけを求めている&特に情報取得に急いでないならdotHTML5というサイト1つで事足りるかと思います。 ※W3Cは割愛でいいですよね チートシートとかリファレンスだけで基本的にはいい感じですかね・・ HTML5 タグリファレンス マークアップもままならないほど慣れてな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChatGPTとBardを同じプロンプトで同時に使用し、結果を比較できるChrome拡張・「Bard GPT」
