preタグに書いたデータをダイアグラムとしてビジュアル化するスクリプト・「Pinker.js」 | かちびと.net

2019/06/28 8 users ダイアグラム canvas canva スクリプト net

Pinker.js Pinker.jsはpreタグに書いたデータをcanvasにダイアグラムとして描いてくれるスクリプトです。 特定のルールに沿った書き方をpreタグにする事で簡易的なダイアグラムを生成できる、というもの。割と複雑なものも書けるみたいです。 以下動作サンプルです。 動作サンプル 左のpreタグのテキストを元に右のcanva... 続きを読む

JavaScript - tmlib.js ＝マインスイーパー＝ チュートリアル編（目次） - Qiita

2015/03/20 20 users マインスイーパー Qiita tmlib tmlib.js

はじめに 以前のエントリーtmlib.js ＝15パズル＝ チュートリアル編に続けとばかりに、tmlibで作ったマインスイーパーについて、作成のチュートリアルを書きたいと思います。（見た目やアルゴリズムなど若干見直しています。） 作成の基本的な部分からステップアップ形式で、実際のコードや動作サンプルを交えながら書いておりますが、15パズルのチュートリアルで触れた内容については、説明を省いているとこ... 続きを読む

tmlib.js ＝15パズル＝ チュートリアル編 - Qiita

2015/03/09 24 users Qiita tmlib tmlib.js チュートリアル 興味

はじめに このエントリーは、tmlib.jsを使った15パズル作成のチュートリアルとして、以前に６回に分けて掲載したものを、見やすくまとめたものです。 作成の基本的な部分からステップアップ形式で、実際のコードや動作サンプルを交えながら書いたつもりですので、tmlibを使ったゲーム作成に興味のある方に読んで頂けると嬉しいです。 まとめにあたり、新たに番外編を追加いたしましたので、こちらも合わせてどう... 続きを読む

YoutubeやVimeoの動画を背景に指定できるjQueryプラグイン・OKFocus video - かちびと.net

2014/07/31 55 users YouTube jQuery Vimeo script 備忘録

YoutubeやVimeoの動画を手軽に背景指定できる、というスクリプトのご紹介。jQueryに依存しています。既に同等のものが存在しますが、使いやすそうだったので備忘録。 動画を手軽に背景指定出来る、というもの。 OKFocus video 動作サンプルです。 背景なので重ねたレイヤーの背景を透過すればマスクっぽく出来ますね。 <script src='jquery.js'></script> ... 続きを読む

jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法 | BlackFlag

2014/06/10 78 users jQuery BlackFlag ウインドウサイズ 要素 方法

Webページ内に並べられた要素の高さを揃えるスクリプトサンプルや jQueryプラグインを今までもいくつか紹介してきましたが、 並べられた要素をレスポンシブ対応かつ1行ごとに高さを揃える形での スクリプトサンプルを試しに作ってみたので紹介してみます。 jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法 まずは動作サンプルから。 サンプル画面でウィンドウサイズを伸縮させてみてください... 続きを読む

複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Select - かちびと.net

2014/04/18 31 users select要素 script net 備忘録 一括選択

複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Selectのご紹介。なかなか便利そうだったので備忘録です。 複数選択可能なselectボックスを直感的な操作で手軽に選択できるようにしよう、というもの。グループ化したものも一括選択できるのが個人的には嬉しかったです。 Multiple Select 動作サンプルです。 <script... 続きを読む

tableのデータを元に、棒グラフを生成するjQueryプラグイン・TableBarChart - かちびと.net

2014/03/24 31 users table jQuery 備忘録 スクリプト 棒グラフ

tableのデータから棒グラフを自動生成するスクリプトのご紹介です。jQueryに依存します。手軽で良かったので備忘録として。 tableに記入されたデータを元にアニメーションエフェクト付きの棒グラフを自動生成する、というもの。以下、動作サンプルです。 TableBarChart tableはマークアップで、棒グラフはそのtableのデータを元に生成されています。 <script type='te... 続きを読む

初心者がモチベーション上げながらプログラミングをしてシューティング（っぽい）ゲームを1本作る！ - Λlisue's blog

2013/12/25 164 users GitHub lisue シューティング モチベーション 1本

2013-12-25 初心者がモチベーション上げながらプログラミングをしてシューティング（っぽい）ゲームを1本作る！ KawazAdventCalendar - Github 紹介ページ（動作サンプルあり） はじめに この記事はKawaz Advent Calendar 2014 のクリスマスの記事として書かれました。 この記事は「初心者がモチベーション上げながらプログラミングをしてシューティング... 続きを読む

これからはいいブクね！の時代！FBの「Like Box」ならぬ「はてブBOX」

2013/12/14 32 users Like Box いいブク Facebook 時代 イイネ

今回はちょっとネタ気味に、Facebookの「Like BOX」のはてブ版を作成してみました。はてブマンを思い出して、「イイネ」ならぬ「いいブクね！」を思い付いたのがきっかけです。せっかくだから方法を紹介します。よかったら設置してみて下さい。 Javascriptが働く環境なら動作するはずです。はてなブログに設置可能なことを確認しました。 はてブBOX 動作サンプル このページにはブックマークが付... 続きを読む

アイコンを表示させる際にSVGスプライトとPNGのどちらが重いかをテストした動作サンプル - かちびと.net

2013/06/24 17 users SVGスプライト CodePen PNG SVG pen

SVGで書いたアイコンとPNGとで、どちらが重いかを調べた動作サンプルがあったので備忘録としてメモします。当然と言えば当然なんですけど、実際に見てみるとなんとも言えない気分になります・・ Codepenで良い動作サンプルがあったのでメモ。 PNG vs SVG for sprites Check out this Pen! ここに貼り付ける上手く動いて無さそうな・・実際にCodepenで見たほうが... 続きを読む

長いテキストを「…」で省略するjQueryプラグイン・Smarttruncation - かちびと.net

2012/11/17 189 users net 長いテキスト 語尾 CSS ライブラリ

長いテキストを省略して表示 する、というjQueryプラグイン 、Smarttruncationのご紹介。 CSSのみでも一応は可能ですけど、 こちらはある程度応用が利くの で覚えておこうかと思います。 この手のライブラリはいくつか見かけましたけど、これは日本語でもそのまま利用出来るので一応メモ。 動作サンプル 長いテキストが省略されています。上は語尾を、下は真ん中あたりで省略。なかなか便利なので... 続きを読む

文章中の任意のキーワードをアニメーションしながら定期的に別のキーワードに置き換える軽量jQueryプラグイン・dynamo.js - かちびと.net

2012/05/16 32 users net 特定 用途 スピード キーワード

珍しい感じだったのでご紹介。軽く 目を惹かせる事が出来そうな感じ。 文章中の特定のキーワードを、 定期的に別のキーワードに置き換える 事が出来ます。アニメーションさせ るので部分的に目立ちそうですね。 うまく説明できないので動作サンプルをご覧頂ければと思います。 dynamo.jsサンプル スピードなども調整可能です。用途は限られますけどちょっと面白い。1~2KBと軽量なのもいいですね。 コード ... 続きを読む

jQueryによるフォームデータ取得方法のまとめ: 小粋空間

2011/07/05 71 users jQuery 小粋空間 ターゲット まとめ 本エントリー

jQueryによるフォームデータ取得方法のまとめです。 フォームデータの取得で分かりにくいのは、セレクトボックス・ラジオボタン・チェックボックスの3種類ではないかと思われます。本エントリーではこの3種類にターゲットを絞り、動作サンプルを用いて解説します。「$」は「jQuery」で記述しています。 ネットで検索したところ、まとまった記事がなかったので自作しました。なお、本エントリーに掲載している方法... 続きを読む

少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする - かちびと.net

2011/06/09 351 users jQueryコード HTMLテーブル net クリッカブル

シンプルでいいアイデアだったのでメモ。 HTMLテーブルの列そのものにリンクを 指定できるようにする、というもの。jQuery でサクッと出来るようですね。ちょっと思 いつきませんでしたけど・・テーブルまわり は使いやすさを向上したいところです。 HTMLのテーブルの列をjQueryでクリッカブルにする事で、ユーザーの利便性を上げられそうです。 動作サンプル 地名 読み方 En 詳細 その他 東京... 続きを読む

jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル - かちびと.net

2011/02/24 335 users net リスト マークアップ 備忘録 本家

自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで... 続きを読む

テキストエリアとかリサイズ可能にする JavaScript

2006/08/25 211 users リサイズ textarea テキストエリア マウスカーソル

■ テキストエリアとかリサイズ可能にする JavaScript 好評の、読み込ませるだけシリーズ の6番目。 このスクリプトを読み込ませるだけで、ウェブ上にある TEXTAREA とかその他色々好きな要素がリサイズ可能なやつに大変身。とりあえずサンプル見るのが手っ取り早いです。 実際の動作サンプル テキストエリアの右下にマウスカーソルを持っていくとカーソル形状がかわるので、そのままドラッグするとサ... 続きを読む