http://で始まる文字を自動リンクしよう
【jQueryのプラグインを作ろう！】 第8回「http://で始まる文字を自動リンクしよう」 ＊これはascii.jpで連載した記事の続きです。このため、このページを読む前にあらかじめascii.jpで連載した記事をお読み下さい。 text : 古籏一浩 ■URLがあれば自動リンク ページ内にhttp://www.openspc2.org/などのURLがある場合、自動的にリンクしてくれると便利です。そこで、今回は文章内にhttp://で始まる文字列があればURLとみなして自動的にリンクするプラグインを作成しましょう。 ■正規表現で置換 今回はURLを自動的にリンクに置換します。このような場合、JavaScriptの正規表現を使うと簡単に処理できます。JavaScriptでの正規表現の置換処理を行うのはreplace()です。最初のパラメータに検索したい正規表現を、2番目のパラメータに置換
【JavaScript】 文字列切り出し（slice, substr, substring）の違い - のんびり猫プログラマの日常
引っ越し前のサイトから移植しました。 文字列の切り出しっていつも迷うよね。 実際にスクリプトを動かして確認してみよう。 slice 文字列.slice(開始位置 [,終了位置] ) 開始位置と終了位置を指定。終了位置は省略可能。 省略すると最後まで切り出す。 終了位置は、末尾が0になる。 開始位置をマイナス値にすると、後からの桁数になる（右端のみ切り出せる）。 <例> str.slice(3); //"3456789" str.slice(-2); //"89" str.slice(3, -1)); //"345678" var str = "0123456789"; str.slice( , ); strの内容 : 結果 substr 文字列.substr(開始位置 [,切り出す長さ] ) 開始位置と切り出す長さを指定。長さは省略可能。 省略すると最後まで切り出す。 開始位置をマイナス値
unshift, shift, pop, pushが混乱するので、絵で整理した - maeharinの日記
配列の追加・取り出しに関する4つのメソッド（unshift, shift, pop, push）がいつも混乱するので絵で整理した。 絵にすれば覚えられそう！いちお練習のため、自分がよく使うRuby, PHP, JavaScriptでコードも書いた。 ・いずれの言語においても上記4つのメソッドは似たような名前で存在しており、用途も同じ。 ・いずれの言語のいずれのメソッドも破壊的メソッド。 ・言語、バージョンによってメソッドの返り値は異なる。 という具合だった。 Ruby ruby 1.9.2 # unshift a = [1, 2, 3] b = a.unshift 0 p a #[0, 1, 2, 3] p b #[0, 1, 2, 3] # shift a = [1, 2, 3] b = a.shift p a #[2, 3] p b #1 # pop a = [1, 2, 3] b =
jQueryのDeferredとPromise - tkawachi Blog
JavaScript(というか CoffeeScript)って90年代にブラウザ上で使われていた頃のイメージが拭えず、どうも気持ち悪くて逃げて回ってたんですが、事情があって最近は渋々書いてます。 JavaScripterの皆様にとっては何を今更だとは思いますが jQuery.Deferredを使って楽しい非同期生活を送る方法 を読んで Deferred 便利だな、と思ったので理解したところをメモしておきます。 利用シーン $.get() ってエラーハンドリングできないのか。使えないなー。と思ったとき 複数の AJAX リクエスト(などの非同期処理)を同時に開始して、全部終わったら何かしたいとき。 Deferred object キーになるのは Deferred object です。 状態 Deferred object は状態を持ちます。状態は３つのうちいずれか。 未解決(unresolv
軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog
Vue.jsは軽量なMVVMライブラリ。 vue.js http://vuejs.org/ 使ってみた感じ、かなり手触りがよいので、紹介する。 概要 handlebars風のテンプレートを書いて、DOMを展開する。普通のテンプレートエンジンと違い、$dataアクセッサを通じて値を書き換えることで、テンプレート展開後も値が同期する(!!!)。 一言で言うと軽量Angular。コード読んだ感じ、内部的にもAngularから大量にコードを持ってきた痕跡がある。$watchとdirective定義がキモなのは同じ。 とはいっても、軽量なのは使う側のAPI側だけで、内部実装はそれなりに重い。APIを軽量にすることで、Angularのデメリットである学習コスト部分を限りなく削ることを目標にしているんじゃないだろうか。 大雑把な使い方 テンプレートを書く。対応するデータ構造を書く。{foo: 'bar'
JavaScriptで配列から要素を削除する方法まとめ
JavaScriptで配列から要素を削除する方法まとめ公開日: 2015-02-13この記事では、JavaScriptを使って、文字列の先頭と末尾、指定位置など、様々な条件を付けて配列から要素を削除する方法を紹介します。目次サンプルコードちょこっとメモサンプルコード
Bower入門(応用編) - from scratch
Bower入門(応用編) さて、応用編を書いていきます。 基礎編ではBowerのインストールとライブラリ管理する上での基本的なコマンドを紹介しました。 応用編ではBowerのライブラリを管理する上で利用するべきツールやライブラリを公開する上で心がけるべきことについて書いていきます。 少し長いのでサマリ Bowerを管理する上で利用すると良いツール：grunt-bower-taskがオススメです ライブラリを公開する上で心がけること、その1：mainとignoreをちゃんと書きましょう ライブラリを公開する上で心がけること、その2：ちゃんとgit tagを使ってバージョン管理しましょう Bowerからインストールしたライブラリを利用する場合 前回の基礎編で少し書きましたが、おさらいすると、Bowerはあくまでパッケージマネージャなので、インストールしてもフォルダ構造までは変えてくれません。
Bower入門(基礎編) - from scratch
Bower入門 これから Bower について書いてきます。Bowerの使い方から実際に使う上で考慮することまで含めて書きます。 長くなりそうなので単に使うだけの基礎編とモジュールを作る上で気をつけることをまとめた応用編に分けて書きます。 Bower とは Twitter社が作ったフロントエンド用のパッケージマネージャです。 Java で言う Maven、 Ruby で言う gem、 Perl で言う cpan のようなものです。 Node.jsには npm と呼ばれるパッケージマネージャがありますが、それに強く影響を受けています。 パッケージマネージャを利用することでライブラリを自分で管理する必要がなくなり、管理するファイルの数を減らすことができます。 また、パッケージマネージャを利用することでライブラリのバージョン管理をしやすくなります。 さらに自分のライブラリを Bower comp
phiary
前回 nvm を使った Node.js, npm のインストール方法 について紹介しました. 今回は Node.js のパッケージ管理ツール npm の使い方と packcage.json の活用方法について紹介します. npm の使い方をマスターすれば, 自作の Node.js パッケージを 公開したり, Node.js を使ったプロジェクトをキレイに管理できます. ぜひ参考にしてください. npm ってなに? npm とは Node Package Manager の略で Node で 作られたパッケージモジュールを管理するためのツールです. 基本 Node.js をインストールすれば一緒にインストールされます. ターミナル or コマンドプロンプトで $npm -v を実行するとバージョンが表示されるのが分かるかと思います. Python でいう easy_install, もしくは
Post by @outofmem
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>Marked in the browser</title> <script src="lib/marked.js"></script> </head> <body> <div id="content"></div> <script> document.getElementById('content').innerHTML = marked('# Marked in browser\n\nRendered by **marked**.'); </script> </body> </html> <!DOCTYPE html PUBLIC ""> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="
React.jsではなくRiot.jsを採用した話、運用中サービス『GAMY』でリニューアル - Qiita
今回、ゲーム攻略コミュニティ『GAMY』というサービスでRiot.jsを採用しました。 知る限りでRiot.jsで実装されたサイトの中でも最大規模のサービスだと思います。 これまではjQueryとjQueryプラグインを使っていましたが、デザインのリニューアルを機に、全部書き換えることにしました。 ドキュメントも兼ねてアウトプットしていきます。 Riot.jsとは Riot.jsは今流行りのReact.jsに似た仕組みを持っている、それで非常に軽量なJavaScriptライブラリーです。 最近GitHubのリポジトリが**/muut/riotjsから/riot/riot**にお引っ越しして、これからがより注目なライブラリーです。 詳しくはこちら↓ Riot公式 Riot.js 2.0 情報まとめ GitHub 捨てることを前提としたライブラリー選定 最初は今ブームの２大フレームワークとなっ
Ractive.js入門 - lxyuma BLOG
これは、jsCafe18で話したSlideです。 概要 これから、「Ractive.js」という js上でReactiveなUIを とてもsimpleにbuildするためのlibraryの話をします 目次 reactive programming ractive.js 他のframeworkとの比較 Backboneに入れてみる そもそもReactive Programmingとは？ 古くは、2003年頃から日本のblogでも幾つか言及されてる模様 去年、更に色々と動きが出てきた。 2013/7 ガートナーの2013年のreportで扱われてる 2013/9 リアクティブマニフェストが出た。これ訳されてる方がいた。 2013/9 infoQの記事見ると大体の流れや概要が分かる バズりと意味の広がり なんか徐々にバズり感がある 他のバズりワード(cloud等)と同じように意味が広義に、より抽
[Javascript]Ractive.jsでシンプルにDOM操作をする | DevelopersIO
Ractive.js Ractive.jsは、インタラクティブなDOM操作を行うためのライブラリです。 データバインディングやDOM更新を簡単に行うことができます。 最近のJavascriptフレームワークを使えば、そういったことはだいたいできますが、 Ractive.jsはとても軽量かつ覚えることも少ないので、すぐに使い始めることができます。 今回はここでやっているように、Ractive.jsを動かしてみましょう。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.5 セットアップ&動作確認 セットアップはとても簡単です。 ここからRactive.jsをダウンロードします。 そしてサンプル用index.htmlを作成し、次のように記述しましょう。 <!doctype html> <html lang='ja'> <head> <meta char
今すぐ使えるRactive.js入門 - Qiita
Ractive.jsとは http://www.ractivejs.org/ データバインドに特化したjsライブラリです。 状態監視にVirtualDomの概念を用いているため、挙動が軽く高速です。 実装をテンプレートと、それを監視するRactiveモデルに分離することで、デザインとロジックの分離を実現できます。 モデル設定の記述が直感的かつシンプルで、初見の開発者でも何となく実装を理解できることが強みです。 またテンプレートに必要最低限のロジックを備えているため、複雑なオブジェクトの展開も難なく行うことが出来ます。 Vue.jsほど対応ブラウザに偏りがなく、Angular.jsほど巨大ではない、 データバインドを手軽に取り入れたい際に非常に便利なライブラリです。 Knockout.jsとは立ち位置が似ているので、記法が好みな方を選べばいいのではないかと個人的には思っています。 対応ブラウ
Ractive.js の紹介 — KaoriYa
HTML の DOM 操作を良い感じで隠蔽してくれる Ractive.js というライブラリを紹介します。 本記事は VirtualDOM Advent Calendar 2014 の13日目の記事です。 VirtualDOM といえば React だ、と言わんばかりの流れですが、本記事では敢えて Ractive.js を取り上げます。Ractive.js が VirtualDOM かって? 確かめてみましょう。 良し、大丈夫。VirtualDOMです。 Ractive.js とは? Ractive.js は本家サイトの説明を借りれば、テンプレートドリブンなUIライブラリです。なんのこっちゃわからないでしょうね。 まずVirtualDOMのメリットとは 生のDOMを直接操作しなくても、JavaScriptのオブジェクトだけを操作すれば、上手いこと自動的に書き換えてくれる ことだと言えます。
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
require()とは何か？何が便利なのか - Qiita
などとついていますが、このrequire()ってよくわからない。 具体的には、 どうやって使えばいいの？ 普通にscriptタグで読み込む場合とどう違うの？ 「require」でググっても英和辞典とかしかでないんだけど！ ということでざっと調べてみました。 require()とは何か？ commonJS 以下、要約 そもそもの発端は、「Javascriptって良いよね。ブラウザ以外（ServerSide）でも使おうぜ」ということからだったらしいです。 しかし、scriptタグで読み込むこと前提だったので、HTMLがない（レンダリングエンジンがない）場合に外部ライブラリを参照する方法がない。。。 （さらに言えば、FileやNetwork、標準入出力など色々と不便。） これじゃ困るということで、ServerSideの標準仕様を定めたのがcommonJS。 その中で外部ライブラリを参照する方法が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js - The Progressive JavaScript Framework | Vue.js
http://knsv.github.io/mermaid/
噂のRactive.jsをKnockout.jsと比べてみた - Qiita
