Sketchでアイコンフォントを手軽に使えるようにするプラグイン・「sketch-iconfont」sketch-iconfontはSketchでアイコンフォントを手軽に使えるようにする為のプラグインです。Font AwesomeやIon icons等に対応してるそうです。尚、使いたいアイコンフォントはOSにインストールされている必要があるとの事。アイコンフォントを多用する方は時間短縮に繋がるかなと思います。本プラグインはMITライセンスのもと、OSSとして公開されています。 sketch-iconfont
YoutubeやVimeoの動画を背景に指定できるjQueryプラグイン・OKFocus video
YoutubeやVimeoの動画を手軽に背景指定できる、というスクリプトのご紹介。jQueryに依存しています。既に同等のものが存在しますが、使いやすそうだったので備忘録。 動画を手軽に背景指定出来る、というもの。 動作サンプルです。 背景なので重ねたレイヤーの背景を透過すればマスクっぽく出来ますね。 <script src='jquery.js'></script> <script src='okvideo.js'></script>本体とスクリプトを読み込みます。 $(function(){ $.okvideo({ source: 'http://vimeo.com/*****', volume: 0 }) });VimeoまたはYoutubeの動画のURLを貼るだけ。これで背景に動画が流れます。ミュートはvolumeを0に指定します。 他にもオプションいろいろ。詳細は以下でご確認下さ
Google Mapで任意の場所の周囲にある施設をマーカーで表示するjQueryプラグイン・WhatsNearby
Google Mapで、任意のポイントと、そのポイントの周囲にある施設をマーカーで表示出来る、というスクリプトです。範囲の距離の指定や施設の種類、中心地に設定したマーカーなども設定出来るようになっています。 Google Mapの任意の場所の周囲にある施設をマーカー表示する、というもの。うまく説明出来ませんが語彙がアレなのでご了承下さい。 以下動作サンプルです。 下北沢駅周辺の半径200メートル内のカフェを表示させました。マーカーをクリックすればお店の情報がポップアップします。 $("#foo").whatsnearby({ zoom:17, width:"100%", address: "下北沢", placesRadius: 200, placesTypes: [ 'cafe' ] });セッティングは上記のような感じ。placesRadiusで指定場所から半径～メートル内にある、pl
tableをJSONデータにコンバートするjQueryプラグイン・Table-to-JSON
table要素をJSONデータに変換して取得出来るようにする、というスクリプト。jQueryに依存しています。どこかで利用させてもらうかもしれないので今のうちにメモ（と言いつつ、いつも忘れますけど） tableタグ内のデータをJSONに変換してくれます。複雑な構造のtableでも上手く変換してくれるかはまだ調べてません。 tableをJSONに、というもの。用途は限られるけど便利かもしれない。 動作サンプルです。 コード<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="jquery.tabletojson.min.js"></script>本体とプラグインを読み込みます。 var table = $('table').tableToJSON();で、セレクタにそのtableを指定し
学生向けに作られた国産プログラミング学習サイト・コーディング道場
たまたま見つけたのでご紹介。プログラミング学習サイトです。学生さんの就職活動の支援サイトとして作られたそうですよ。現在はPHPとRubyが学べるみたいです。 学生さん向けの学習サイト。コーディングの楽しさを知ってもらうことで、『エンジニアとして活躍したい』と考える方を支援したい、との事です。機能面では特別、学生さん向け、という感じはありませんでしたが、希望者にはインターン先の紹介や就職までのフォローアップもされているそうです。 実際にコードを書きながら学べる、というもの。問題に解答後は、正解/不正解のタグが表示されますので再挑戦する際も分かりやすい印象です。 問題を作ることも出来ます。問題作成ページでは正誤の判定、最初に表示したい文言の設定を行います。 アカウントはTwitterやFacebookのアカウントでも作成可能です。気軽でいいですね。 今はこういった学習サイトも沢山増えましたが、
PCサイトではタブによる切り替え、スマフォ等ではアコーディオンで実装できるスクリプト・Easy-Responsive-Tabs-to-Accordion - かちびと.net
必要になりそうだったのでメモ。通常のPCサイトではタブ、スマフォ等の画面の狭いデバイスではアコーディオンで実装するスクリプトのご紹介です。jQuery依存になります。 Easy-Responsive-Tabs-to-AccordionはレスポンシブWebデザイン対応のWebサイトでタブコンテンツを使いやすくするライブラリです。アコーディオンの方がみやすくタップしやすいケースもあるので覚えておくと良いかも知れません。とはいえ先発ライブラリも確かあったはずなので使いやすいほうで。 動作サンプルです。直接見に行って実装エリアをリサイズすれば確認出来ると思います。 コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <sc
ソーシャルコーディングが可能なオンラインIDE・「FriendCode」 - かちびと.net
FriendCodeはブラウザで他のユーザーと共有しながら使えるオンラインのIDEです。プライベートなリポジトリも持てるみたい。アカウントはFacebookやGithubでログイン出来ます。他にもいろいろ。結構高機能ですね。 FriendCode
アイコンを表示させる際にSVGスプライトとPNGのどちらが重いかをテストした動作サンプル - かちびと.net
SVGで書いたアイコンとPNGとで、どちらが重いかを調べた動作サンプルがあったので備忘録としてメモします。当然と言えば当然なんですけど、実際に見てみるとなんとも言えない気分になります・・ Codepenで良い動作サンプルがあったのでメモ。 PNG vs SVG for sprites Check out this Pen! ここに貼り付ける上手く動いて無さそうな・・実際にCodepenで見たほうが良さそうです。尚、使っているSVGはこちら、PNGはこちらです。 サンプルを見た限りでは今あるブラウザではかなりパフォーマンスに影響が出てしまうようですね。SVGは凄く便利ですけど、まだ実用段階としては時期早尚という印象です。使いどころ次第なんでしょうけど・・ 少し仕事が立て込んでるのでメモだけ。サンプルのコードは以下でどうぞ。 PNG vs SVG for sprites
動画やGoogleマップにも対応した軽量なモーダルウィンドウを実装するjQueryプラグイン・Pop Easy - かちびと.net
使いやすそうなモーダルウィンドウのスクリプトがあったので備忘録。VimeoやGoogleマップにも対応しており、ファイル自体も圧縮版で2KB程度と軽量なのも嬉しいですね。 モーダルウィンドウ実装用のスクリプトです。jQueryに依存します。 使いやすそうなモーダルウィンドウです。 スタイルもカスタマイズしやすそう。 $('.modalLink').modal({ trigger: '.modalLink', olay:'div.overlay', modals:'div.modal', animationEffect: 'slidedown', animationSpeed: 400, moveModalSpeed: 'slow', background: '00c2ff', opacity: 0.8, openOnLoad: false, docClose: true, closeByE
自身のポートフォリオ用Webサイトを手軽に作成出来るWebサービス・Dunked - かちびと.net
ポートフォリオを作成出来る、というWebサービス・Dunkedのご紹介です。レスポンシブWebデザインにも対応していますので、出先からスマフォやタブレット等で自分の作品を相手に見せることも出来ますね。 ポートフォリオ用のWebサイトを作れるサービス。この手のは他にもありますがシンプルで見やすかったので備忘録的に。 ポートフォリオ作成サービス。無料で利用できて、スマフォやタブレットでもレイアウトを崩すことなく表示可能です。また、Retinaディスプレイにも最適化されるそうです。 アップロードやスタイルの変更も簡単に出来そうです。 手軽で必要最低限の機能も備わってる印象でした。結構いいかもしれない。 Dunked
商用でも無料の、合字を利用してアイコンを実装するWebフォント・MONO SOCIAL ICONS FONT - かちびと.net
合字を利用してアイコンを表現できるWebフォント・MONO SOCIAL ICONS FONTのご紹介です。Open Font License(OFL)なので商用でも無料で利用する事が出来ます。 合字とCSSを利用して、特定の文字列でアイコンを表示させます。 サークル状やスクエアタイプも用意されています。CSSのtext-renderingやfont-smoothingを利用し、特定の文字列でアイコンを表示させるようにしてあるみたい。 @font-face { font-family: 'Mono Social Icons Font'; src: url('MonoSocialIconsFont-1.00.eot'); src: url('MonoSocialIconsFont-1.00.eot?#iefix') format('embedded-opentype'), url('Mono
テーブル上にあるマウスの位置を表示させる - かちびと.net
Result テーブル上のマウスの位置を表示する jQuery $("table tr td").mouseenter(function () { //ポインタ追加 $(this).css("cursor", "pointer"); //ユーザーへの表記は+1する var col = $(this).closest("tr td").prevAll("tr td").length += 1; var row = $(this).closest("tr").prevAll("tr").length; //テーブル上のマウスの位置を取得して現在地を表示する $('#result').html("上から<b>" + row + "</b>番目、左から<b>" + col + "</b>番目にいます"); }); css table { border: 1px solid #DFDFDF; bac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGをインラインに展開し、CSSでスタイル出来るようにするJSライブラリ・「deSVG」
tableの幅をドラッグでリサイズ出来るようにするスクリプト・jQuery Resizable Column - かちびと.net
Sketchのファイルをアーカイブしている・「SketchMine」 - かちびと.net
BootstrapなどのフレームワークもサポートのWin/Mac対応オーサリングソフトウェア・「Pingendo」 - かちびと.net
LessやSass、CoffeescriptなどをコンパイルできるWindows用ソフトウェア・「Prepros」 - かちびと.net
Adobe製のレスポンシブ対応UIライブラリ・「Topcoat」 - かちびと.net
Webフォントとしても使えるMetroスタイルのアイコンセット・「Metrize Icons」 - かちびと.net
SassのコードをCSSに即時変換・「SassMeister」 - かちびと.net