Googleスプレッドシートを瞬時にJSON形式にするWebアプリ・「Gson」
GsonはGoogleスプレッドシートのデータをURLの入力だけで瞬時にJSON形式にコンバートされたURLを返してくれるWebアプリです。 使い方は他の同様のツールと同じで、CSV形式を選択して公開設定にしてから使えば良いみたいです。URLを入力すると瞬時にJSON形式で書かれたデータのURLを返してくれます。 楽でいいんじゃないでしょうか。尚、データは送信されないそうです。 ツールを使わない方法記事内容を否定するようで若干不本意なんですが、何のツールも使うことなくJSONに変える方法です。 前述と同じようにCSVで公開したシートのURLからスプレッドシートのIDをコピーして以下のURLのID部分にペーストします。 https://spreadsheets.google.com/feeds/worksheets/スプレッドシートのID/public/basic?alt=jsonサンプルと
様々なJavaScriptライブラリやプラグインの使い方をまとめている・「Js Tutorial」
Js Tutorialは配布されているJSライブラリやjQuery等のプラグインの使い方をまとめているWebサイトです。と言っても、配布元で書かれているオプションや簡単な解説のみなのでチュートリアルとはあまり言えない印象です。それでも、ソース元やその場で確認出来る動作デモ、各ライブラリのカテゴリ分けもされているので探しものの時は便利かなぁと思います。尚、ライセンスは書かれていないので直接見に行く必要があります。 Js Tutorial
スマフォサイトにも対応可能の、インタラクティブなプロトタイプを作成する為のツールキット・「FRAMER.JS」
FRAMER.JSはスマフォサイトにも対応したプロトタイプ作成の為のフレームワークです。アニメーションを取り入れることでインタラクティブなプロトタイプを作成できる、という事を目的としているようです。使い慣れるまで少し掛かるかもしれませんが、慣れれば便利かも。 FRAMER.JS
コンテナのサイズに合わせて画像をフィットさせるスクリプト・imagefill.js
コンテナのサイズに合わせて自動的に画像をフィットさせる、というスクリプトのご紹介です。jQueryに依存しています。RWDなんかと相性良さそうですね。 コンテナに合わせてフィットさせる、というもの。似たスクリプトは既存しますので選択肢の一つとして。 サイズに応じて自動でフィットさせます。 ↑ こんな感じ。 $('.foo').imageFill();基本的にはコンテナをセレクタとして指定するだけ。 <div class="foo"> <img src="bar.png"> </div>そのコンテナの中に画像を含めます。楽でいいですね。 ライセンスはMITとGPLのデュアルライセンスとなっています。詳細は以下にて。 imagefill.js
オンラインの請求書発行システムを実装出来るPHP製のソフトウェア・FusionInvoice
ちょっと気になったので備忘録です。オンラインの請求書発行システムを構築できる、というソフトウェア。OSSで配布されていますが、ライセンスは独自のライセンスのようです。 請求書を発行するためのソフトウェア。よく見かけるWebサービスを自分の使用しているサーバーにインストールして構築できる、というものになります。フリーランサーや中小企業向けとの事です。 ↑ 管理画面です。クライアントさん別に分けたり、ラベルをつけられたり、見積もりできたりと、基本的な機能は備わっている印象でした。 ↑ スタイルはBootstrapがベースに使用されていますのでカスタマイズもしやすそうですね。「支払い済み」ページのブタのアイコンが可愛いです。 動作環境はPHP5.3以上、MySQL 4以上みたい。インストールはまだ試してませんけどインストーラーが備わっているみたいなので楽そうです。 ルートに置いた場合はhttp:
Twitter Bootstrap向けのMarkdownエディタを実装出来るスクリプト・Bootstrap Markdown
Bootstrap向けのMarkdownエディタを実装出来る、というスクリプトのご紹介です。Markdown対応のエディタで、タグ保管機能も付いています。なかなか良さそうです。 Twitter Bootstrap向けのMarkdownエディタを実装出来るスクリプト・Bootstrap Markdownです。実装も楽なので覚えて置いて損は無いかも。 Boostrapに設置可能なMarkdownエディタです。シンプルで使いやすい印象でした。 <textarea name="content" data-provide="markdown" rows="10"></textarea>textareaにカスタムデータ属性を与えればいいみたいです。 <div data-provide="markdown-editable"> <h3>foo</h3> <p>bar hoge fuga</p> </di
任意のエレメントに、サイズに応じてclassの追加/削除をするスクリプト・Responsive elements
任意のエレメントに、画面サイズに合わせて特定のclassの追加/削除を行うスクリプト・Responsive elementsのご紹介です。特定の画面サイズになるとclassが付与されるので、そのclassを使ってCSSを書きます。 前も似たようなものがあった気がしますけど・・こちらも軽量で良さそうです。classを与える事で、RWDの対応もしやすくなりそうです。尚、スクリプトはjQuery依存です。 特定のサイズで指定した要素にclassを追加してくれます。シンプルで良さそうですね。 セッティングは要素ごとにカスタムデータ属性を利用します。 <div class="foo" data-respond="start: 100px; end: 900px; interval: 50px;">これで、画面サイズにあわせてclassが付与されます。 詳細は以下よりどうぞ。 Responsive e
textareaでオートコンプリート機能を実装するjQueryプラグイン・jQuery.textcomplete
textareaでオートコンプリート機能を実装するスクリプト・jQuery.textcompleteのご紹介。デモではコメント投稿で絵文字を使う、みたいなケースが紹介されています。 textareaでオートコンプリート機能を実装する、というもの。使いどころは限られそうですが、コンテンツ次第では便利なスクリプトですね。 こういうの。上記例では絵文字を打つのにコロンで括るので、コロンを打つとオートコンプリートで候補を出してくれるようになっています。 jQueryは1.7以降を使うように、との事。 $('textarea').textcomplete(strategies);セレクタを指定して呼びだすテキストを作っていきます。 デモではコロンを正規表現で判別して事前に作ってあったテキストをオートコンプリートとして実装、アイコン付きに置換してるみたいですね。詳細はGithubに書かれています。 ラ
tableの列ごとに任意のキーワードでフィルタリングできる軽量jQueryプラグイン・Multifilter
tableから複数キーワードでフィルタリングできるjQueryのプラグイン・Multifilterのご紹介です。非圧縮でも2KB以下と、とても軽量です。大量な情報を含むtableにあると便利そうですね。 tableコンテンツのフィルタリング用スクリプトです。プラグイン自体はとっても軽量で、導入も楽なのでなかなか使いやすい気はします。 こういうの。デモを用意しました。 尚、データはなんちゃって個人情報を利用させて頂いています。 $('.foo').multifilter()使い方もシンプル。上記のようにtableを指定。 <div class='filters'> <div class='filter-container'> <input autocomplete='off' class='filter' name='名前' placeholder='名前' /> </div> <div c
フォームでユーザーにヘルプをツールチップで実装するjQueryプラグイン・jQuery FormHelp
割と需要ありそうなので備忘録ついでにご紹介。ツールチップで実装する、テキストのフォームヘルパーです。「こういう具合に入力してね」みたいなのを明示するやつ。 フォームのそれぞれの項目にヘルプを作るスクリプトです。マウスホバーやフォーカスでツールチップを出す、というもの。プラグインで実装するほどのものでも無いかもですけど、これはこれで楽そう。 動作サンプルです。HTMLを普通にマークアップするだけで自由にツールチップ内に実装できるのは楽ですね。 コード 本体とプラグインを読み込みます。 $.formHelp();コールします。 <input id="input-email" type="email"/> <span class="helptext" data-for="#input-email"> <p>ここにツールチップ</p> <hr> HTMLが自由に使えます <ul> <li>One<
Googleのスプレッドシートをデータベースのように利用出来るようにするスクリプト・Sheetsee.js
Googleのスプレッドシートをデータベースのように利用出来るようにするスクリプト・Sheetsee.jsのご紹介。シートを元にグラフや地図などを作成出来るみたいです。 スプレッドシートをDB化する、というライブラリです。利用するには他のいくつかのライブラリを併用して実装するようですね。 利用するにはいろいろと前準備が必要です。 シートの書き方もルールに沿う必要があります。 スプレッドシートは公開設定にし、Tabletop.jsでデータを取得します。 長くなるので詳細は本サイトをご確認ください。Sheetsee.jsを使った動作サンプルもあるので合わせてご覧頂ければと思います。 ライセンスはBSDとの事です。触る暇があれば触って見たいです。 Sheetsee.js
汎用性の高そうなjQueryイメージスライダー・Fotorama
よさ気だったので備忘録。jQueryで作るスライダーです。画像や動画にも対応、レスポンシブWebデザインにも対応しており、マークアップもシンプルで済みます。 なかなかいいスライダーでした。タッチイベントにも対応しているのでスマフォでも使えますね。 見た目はよくあるスライダーですが、汎用性は高い印象です。タッチイベント、レスポンシブWebデザイン、ハッシュタグ対応、動画も可能、フルスクリーン化も可能で、マークアップも画像を書けば良いだけ。 動作サンプルがいろいろ用意されています。 Sample コード<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="fotorama.js"></script>本体とプラグインとCSSを読み込みます。 <div class="fotorama"> <
WordPressのwp-config.phpで出来る事いろいろ - かちびと.net
自分用メモ。wp-config.phpの設定 で出来る事のリストです。よくある カスタマイズは、テーマファイル内 にコードを書きますが、wp-config で出来る事を知っておくのもとても 大事ですね。 普段あまり利用しないので覚えてないし、困ったときはいちいち探してるので時間をロスしないようにメモしておきます。 スニペットのメモリストですし、細かい解説は面倒なんでしません。また、「wp-configってなんだろう？」という方には全くお役に立てないと思います。 wp-config.phpで出来る事リスト 以下リストです。古いバージョンの事は視野に入れてません。 リストはCODEXのwp-config.phpの編集から抜粋しています。 ※変更前にバックアップして下さい ※自己責任でお願いします ※コード一覧は記事最下部に有ります 01. デバッグモードにする define('WP_DEBUG
CSSのみで書かれたアイコンのセット・「CIKONSS」 - かちびと.net
CIKONSSはCSSのみで書かれたアイコンのソースを配布するWebサイトです。IE8までなら同じ表示が可能のようです。アイコンの種類もそれなりにあるみたい。実用性は置いておいて、どこかでコードが役に立つかもしれないと思って備忘録。 CIKONSS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tumblrのオリジナルテーマを作成する為のHTML5製テンプレート・「tumblr boilerplate」
OSSとしても公開されている、スタイルを維持したままWebページをスクラップできるツール・「PryNotes」
ChromeやFiredoxなどのデベロッパーツールのコンソールで使えるスニペットをまとめた・「DevTools Snippets」
データベース不要でインストールも手軽に出来る、シンプルなオープンソースのCMS・Dropplets
JSONデータをtableタグに変換する・「json.human.js」
ttfフォントをWebフォント化するジェネレーター・「@font-face Generator」
