Node.js・・・、のインストールではまる人も多いはずだ。 そこで（というわけでもないだろうが）登場したのがRunnableだ。 このサイトではブラウザ上でNode.jsの開発ができるようだ。 インストール不要で、ちゃちゃっとコードを書いて「Run」すればいいだけなのでお手軽だ。 Node.js以外の言語にもこれから対応していくとのことなので楽しみですな。
ブラウザ上でNode.jsの開発が出来る『Runnable』 | 100SHIKI
Node.js・・・、のインストールではまる人も多いはずだ。 そこで（というわけでもないだろうが）登場したのがRunnableだ。 このサイトではブラウザ上でNode.jsの開発ができるようだ。 インストール不要で、ちゃちゃっとコードを書いて「Run」すればいいだけなのでお手軽だ。 Node.js以外の言語にもこれから対応していくとのことなので楽しみですな。
tjun月１日記
コロナウイルスが流行する前の2020年1月上旬、中国の杭州に行ってきたのでその記録を書いておく。 はじめに 自分はこれが中国へ行くの5回目。それなりに慣れている方だと思うけど、中国人と一緒に行ったほうが圧倒的に楽です。 数年前にキャッシュレスが普及して、その後も規制が変わったりして行くたびに状況が変わっています。なので、ここで書いてあることは半年後には参考にならないかも。 事前にやっておくこと WeChatPayのアカウントを作る、可能なら本人確認とチャージをやっておく Alipayのアカウントを作って、可能なら本人確認とチャージをやっておく 中国で使える香港SIMを買う WeChatPayとAlipayのアカウントは、外国人でも作れるときと作れないときがある。またお金もチャージできるときとできないときがある。 事前にググってできるかどうか試しておくのが重要。 また、中国はいわゆるGrea
[JS]クルマのメーターのようなアニメーションが気持ちいい、ゲージが変化するスクリプト -Gauge.js
使うシーンは限られると思いますが、アニメーションが気持ちよかったのでご紹介。 ゲージと数字が連動して、クルマのメーターのようなアニメーションです。 Gauge.js -GitHub Gauge.jsの特徴 Gauge.jsのデモ Gauge.jsの使い方 Gauge.jsの特徴 アニメーションでゲージが変化します。 HTML5 Canvasを使ってJavaScript/CoffeScriptで作成。 画像や外部スタイルシートファイルは無し。 jQueryはサポートしてますが、特に必要ありません。 さまざまな設定が可能。 MITライセンス。 対応ブラウザ Chrome Safari 3.2+ Firefox 3.5+ IE 9 Opera 10.6+ Mobile Safari (iOS 3.2+) Android 2.3+ Gauge.jsのデモ デモでは右のオプションを変更すると、直ちに
ネット上のことばに、デザインに、JavaScriptに著作権はあるのか？：読者の皆さんへ | ライフハッカー・ジャパン
インターネットが著作権のあり方を大きく変えたのは、今さら言うまでもないでしょう。 ネット上では誰もが発信者になれて、SNSではぼくらがアップした写真が、動画が、文章がシェアされている。一部が、あるいはすべてが抜き出され、まとめサイトに引用されている。こうした光景はもはや当たり前ですが、ならばレビューサイトに投稿したコメントは誰のものなんだ。さらに制作者に目を転じれば、ウェブデザインは、フォントは、コードは、どうなんだ。 いま、改めてこんなブログ記事をポストするのには理由があって、折しも今日（12月6日）、某社サイトとあまりにも酷似したデザイン・挙動をする別会社のサイトがあると話題になったからでした。オープンソースやクリエイティブ・コモンズは決して新しすぎる概念ではありませんし、すでに世に出たものに自分なりの工夫を施すのは、"ハック"の精神ともいえるでしょう。 そして以上に挙げた例はいずれも
同心円を重ねたパターンを生成できるオンラインジェネレーター - Concentrics
Concentrics ジェネレーターはHTML5 CanvasとJavaScriptで作成されており、簡単な操作でさまざまなパターンが生成できます。
JavaScriptの変数のスコープをきちんと理解しているかクイズで確認してみよう -Javascript Scope Quiz
JavaScriptの変数のスコープをきちんと理解しているかクイズで確認してみよう -Javascript Scope Quiz
[JS]指定した要素を抽出して、自動でページ内アンカーのナビゲーションを設置するスクリプト -MagicNav.js
ナビゲーションを抽出 ページ内の移動は、アニメーションを伴ってスクロールします。 MagicNav.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="magicnav.js"></script> Step 2: HTML デモではdl要素でFAQが実装されています。 dl, ulなどに限らず、hxの見出しなどでも構いません。 <h3>FAQ</h3> <dl> <div id="commercial" title="commercial"><dt><strong>よくある質問</strong></dt> <dd><p>回答</p></dd
[JS]アラートやコンファームなどの通知ダイアログとユーザーのアクションを表示するパネルも簡単に実装するスクリプト -alertifyjs
アラートやコンファームやプロンプトの通知ダイアログ、ユーザーがOKやCancelをクリックしたことを伝えるパネルを簡単に実装できるスタンドアローンのスクリプトを紹介します。 alertifyjs alertifyjs -GitHub alertifyjsの特徴 alertifyjsのデモ alertifyjsの使い方 alertifyjsの特徴 alertifyjsは簡単にカスタマイズができる通知システムを実装できるJavaScriptです。 alert, confirm, promptの全通知ダイアログはフルカスタマイズが可能。 通知システムもカスタマイズが可能。 OKとCancelの両方のボタンにコールバックに対応。 ダイアログを連携させることも可能。 alertifyjsのデモ promptの通知ダイアログと通知システムを表示 alertifyjsの使い方 Step 1: 外部ファイ
[JS]エイプリルフール用のネタをあなたのブログに仕込むスクリプト -Fool.js
ウェブページを逆さまにしたり、傾けたり、クリック禁止にしたりなど、ちょっとしたイタズラをブログなどに仕込むjQueryのプラグインを紹介します。 Fool.jsの「Pranks」にイタズラの一覧があります Pranksの各アイテムをクリックすると、次のイタズラを実行します。 fallingScrollbar スクロールバーの消失 rick リック・アストリーの動画をスクリーン外で再生 hiddenVideos 意味不明な動画を再生 vanishingElements 任意の要素を消失 questionTime 米のアニメスポンジ・ボブのテーマソングを歌う upsideDown ページ表示を逆さまに h4xx0r ページを編集可能に wonky ページを傾ける flash ページをチカチカ表示 crashAndBurn エンドレスなループを実行 ※ブラウザクラッシュっぽいけど、実行しないよう
Facebook風の無限スクロールが作れるinfinite scroll｜こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。（編集部） 「infinite scroll」は、スクロールしてページ下部まで移動すると、次のページを自動的に読み込んで表示するjQueryプラグインです。 インフィニティスクロールという機能でTwitterのタイムラインや、Facebookのフィードでも採用されており、ユーザーが手動でページ送りする手間を軽減します。 WordPressのブログ記事や、ECサイトの商品ページ、またギャラリーサイトなどで効果的な表現になりそうですね。 step1 jQueryプラグインの読み込み jQuery本体をjQuery
[JS]スマフォ・タブレットでの利用を前提に作られたタブを実装するスクリプト -Tabby
Demo: 垂直型のタブ タブレットやデスクトップなどの広いスクリーンでは垂直型で右側にコンテンツが表示され、小さいスクリーンでは水平型に表示されます。 Tabbyの使い方 ステップは2つです。 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトとjQueryをbodyの下あたりに記述します。 <head> ... <link rel="stylesheet" href="tabby.css" type="text/css"> </head> <body> ... <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script src="tabby.js"></script> </body> Step 2: HTML HTMLはデモをベースに紹介します。 Demo: ベーシックタイプ
[JS]わずか1KBでインディ・ジョーンズの雰囲気が楽しめるスクリプト -Strange crystals
インディ・ジョーンズの「魔宮の伝説」でのトロッコで坑道を滑走するシーンを再現したような1KBのスクリプトを紹介します。 キャプチャは静止画ですが、アニメーションで描画されます！ 下り坂の下に光りが JavaScript スクリプトは他のスクリプト無しで、1KBで作成されています。 _="b.bgColor=X=Y=H=I=J=E=Q=U=V=0;T=[l=1];C=(c.width=c.h_=innerH_)/2;setInterval(function(<code> i=H;i<X+1�;H=++i</code>(s=�8j)�(D=i/80�P=D&1�-Q+(Q=�5$K=OD�(K+2+(�5))%3-1,B=OD>9�!B��kW=1@*�-1�E�F=(s<160)-(s>639��=[I�J,J�K,U�V,V=P*E,O�(L=��-2j)*L^3)/1���,�95];i
JavaScript書くときに便利なVimプラギン集 - Life goes on
この記事はVim Advent Calendar 2012の52日目の記事です。 前回の記事はasion_mさんのフロントエンジニアがちょっと幸せになるかもしれないプラグイン作ってます。でした。 良い具合に、フロントエンドのお話続きになっており「流れがキタ！」などと浮かれていたところ、はてなブログが0時から8時まで長時間のメンテに入っており泣きたい気分で一杯になっています。 気を取り直して、エントリを書いていきたいと思います。 さて、自分は一応JavaScriptを書くことで(または書かない事で)オマンマを食べさせていただいてる訳ですが、そういえばあんまりJavaScript書く環境についてブログに書いてないなーと思い、自分が使ってるJavaScript関連のプラギンと設定なんかを紹介していこうと思います。 もちろん、「これは常識でしょpgr」などというものが多数含まれていることは予想され
Sinatra っぽく簡単に JS で Dispatch できる micro_dispatcher.js のご紹介 - tokuhirom's blog
Sinatra っぽく簡単に JS で Dispatch できる micro_dispatcher.js のご紹介 https://github.com/tokuhirom/micro_dispatcher.js javascript 用のシンプルな Dispatcher にはいくつかあるが、どうも満足いくシンプルな実装がなかったのでつくった(というか Caym というオレオレ JS Framework の中にうまっていたものをとりだした)。 特徴としては、 Dispatcher だけのシンプルな実装(本体はやや冗長にかいていて、40行程度) sinatra 的なシンプルな記法 といったところでしょうか。 使い方は以下のとおり。 var dispatcher = new MicroDispatcher() dispatcher.register('/', function () { })
C言語より高速なJavaScriptによるバイナリ操作が話題 | gihyo.jp
JavaScriptなどのスクリプト言語は動作が遅く、最適なパフォーマンスを得るにはC/C++で実装しなければならないという常識に挑んだ講演が国内外で大きな話題になっています。 題材になったのはベルリンの開発者、Felix Geisendorfer氏によるNode.jsからMySQLに接続するためのバインディングの実装です。Node.jsからMySQLへ接続するためのバインディングはJavaScriptだけで実装されているもの、Cで実装されたライブラリ（libmysql）を使ったもの、MySQLからフォークしたデータベース、MariaDBのライブラリを使ったものなど複数が存在しています。 Felix氏はあくまでJavaScriptのみによる実装で、C言語で実装されたライブラリを使ったバインディングを越えるパフォーマンスの実現に挑戦しました。次々に登場するライブラリの高いパフォーマンスを見る
Canvas APIの基礎
もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
スムーズなアニメーションが格好いい、埋め込み型プレゼンテーション·Presenteer.js MOONGIFT
Presenteer.jsはページ内の一部をクリックで動作するプレゼンテーションにするライブラリです。 Web上で動くスライドライブラリは多数あります。大抵プレゼンテーションを前提に大画面で表示されるものですが、Presenteer.jsはちょっと違います。Webサイト内に埋め込んでサービスを紹介したりするのに使えるプレゼンテーションライブラリです。 この中央部、水色の部分がプレゼンテーション部です。 クリックで内容が切り替わりますが、そのダイナミックな動きが目を引きます。 こんな感じで文字のローテーションも可能です。 スライダー風にも使えます。 デモ動画です。格好いい動きが分かるかと思います。 Presenteer.jsの魅力は何と言ってもスムーズなアニメーションにあると言えるでしょう。クリックするたびに異なるアニメーションが起こるので目を奪われます。テキスト主体のプレゼンテーションにな
様々なフォーマットにも対応可能な、美しい年表コンテンツを実装できるjQueryプラグイン・Timeline - かちびと.net
珍しいので一応メモ。年表を作れる jQueryプラグインです。見た目も 綺麗なんですが、スプレッドシート や、JSON形式にも対応出来るので どこかで使えるかも、と思いました。 機能も申し分ありません。 多用するようなものでもありませんが、スプレッドシートの情報を読み込むのは面白いですね。 綺麗です。上にコンテンツ、下に年表があって、ツールチップ形式でタイムラインが形成されます。ツールチップをクリックするとスライドが動く、というインターフェース。 年表は伸縮できますので見難い、というストレスも感じさせません。また、広がる時のアニメーションもスムーズで気持ちいいです。 全画面にしたり、GoogleスプレッドシートやJSON形式のデータを読み込んでタイムライン化する事も可能みたいです。この点は結構便利では無いかと。 Sample コード <script type='text/javascrip
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
