JavaScriptのアラートを手軽に綺麗に表示するプラグイン『SweetAlert』が良さげ - あのねノート。
2014-10-03 JavaScriptのアラートを手軽に綺麗に表示するプラグイン『SweetAlert』が良さげ まとめ JavaScriptのアラートは古臭い？ JavaScriptのalert()関数は、エラーやメッセージを伝える手段として開発者としては便利です。ただビジュアル的にどうでしょうか。多くの訪問者はこれを見ると何らかの古臭さを感じるはずです。(ブラウザももうほんの少しだけかっこよく表示してもいい気がする。) SweetAlertで解決 大抵のサイトは新しさを出したい(はず)。そこで『SweetAlert』を使いましょう。『SweetAlert』はアラートをかっこ良く見せるJavaScriptプラグインです。 使い方 <script src="lib/sweet-alert.min.js"></script> <link rel="stylesheet" type="te
【JavaScript】Math.random().toString(36).slice(-8) で簡易パスワード生成 at softelメモ
問題 JavaScriptで、ランダムな文字列を簡単に作るには。 解答例 こんな方法がある。 Math.random().toString(36).slice(-8); Math.random() でランダムな数値ができる（例: 0.5914055700523515） Math.random().toString(36) で、よくあるブラウザでは36進数になる（0-9a-zの36文字で表現）（例: “0.xf3d86djs5o”） Math.random().toString(36).slice(-8) で、後ろから8文字を使う（例: “d86djs5o”） → 以前はOperaでは動きが少し違ったようだが、今は他のブラウザと同じように動くようだ（Opera11で確認）。 参考 Math.random().toString(36).slice(-8) で簡易パスワード生成。 — TOYAM
Capybara-Webkit＋Cucumber＋Sinon.JSでJavaScriptのテストはここまで変わる
Capybara-Webkit＋Cucumber＋Sinon.JSでJavaScriptのテストはここまで変わる：フレームワークで実践！ JavaScriptテスト入門（5）（1/3 ページ） しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載。今回は、RubyでWebKitをヘッドレス化するフレームワーク、受け入れテストの記述が日本語でできるツール、スタブやモック、スパイが使えるライブラリを組み合わせたテスト方法などを紹介。 Capybara-WebkitとCucumberとSinon.JSを利用したJavaScriptのテスト 本連載の最終回となる今回は、これまでの連載のようなJavaScriptのロジックを単体テストするのではなく、Webブラウザ上の操作と、それによって動作
AngularJSをこれからはじめてみようかな？という人のための記事まとめ | バシャログ。
暖房器具のチョイスを迷いまくっているminamiです。 Google製のJavaScript MVC（MVVM）フレームワーク、AngularJS 1.2 がリリースされました。最近にわかに盛り上がってきている（気がする）ので、ここ最近自分で読んで参考になった導入記事やチュートリアル関係をまとめてみました。 導入記事 JavaScript MVCフレームワーク「AngularJS 1.2」リリース。要望の多かったアニメーション機能が追加、脆弱なコードを制限するモードも AngularJS 1.2の機能、主なアップデート内容について 新・三大JavaScriptフレームワークの実践(Backbone.js Knockout.js Angular.js) Backbone.js、Knockout.jsとも比較。この3つのフレームワークはどの局面でどれを使うか迷っている人も多いと思うので参考にな
reveal.js - The HTML Presentation Framework
Hello Therereveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical SlidesSlides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1Nested slides are useful for adding additional detail underneath a high level horizontal slide. Basement Level 2That's it, time
AngularJS + TypeScript でリッチなフォームを作ってみる - パンダのメモ帳
前回（AngularJS で Hello World）に引き続き AngularJS + TypeScript による簡単なアプリケーションを書いてみました。 今回は AngularJS を使ったフォームの例です。 AngularJS のみで、比較的簡単にリッチなフォームが作成できることがわかるんじゃないかなぁと思います。 まえおき TypeScript で書いてます。 AngularJS のバージョンは2013年2月現在の最新安定版である 1.0.4 を使用します。 自動受け入れテスト（E2E Test）は面倒なので省略しました。 ソースコードについて なお、今回のソースコード一式も GitHub で公開しています。 また、こちらで実際に動作を確認することもできます。 解説 前回解説した内容についてはなるべく割愛します。 form 要素 <form id="signupForm" nam
APIと少しのjQueryコードでGoogle Mapの地図の色を変更する
Google MapのデザインをjQueryで変更する為のメモ書き。Google Map APIとjQueryでGoogle Mapの色合いを変更し、オリジナルのマーカーを付けてみます。こうする事で、既存デザインに合わせたGoogle Mapが出来ます。 今後必要になりそうだったので調べ物をしたついでにメモ書きです。デザインを変更、というと語弊がありますけど、好みの色に変えてみます。 ゴール↓ こんな感じのをjQueryでやろう、みたいな内容です。特に目新しい情報では無いですが。 なんかシャドウ変になっちゃった・・色やマーカーだけでもWebサイトで使用している色にあわせれば地図だけ浮いてしまうような事も無くなるんじゃないかなと思います。 ジオコーディングリクエスト<script type='text/javascript' src='http://ajax.googleapis.com/a
flickGal - jQueryプラグイン | stakamura
$(function(){ $(".yourElement").flickGal(); }); iPhoneでフリックギャラリーを実装するプラグインを作ってみました。 Androidの友達が「多分動いてる」と言っていました。PCでもそこそこ動きます。 iPhoneのtouchEventなどに関して、nogunoguさんの記事を大変参考にさせていただきました。というか完全にnogunoguさんの研究のおかげです。感謝でございます。 デモ こちらをご覧ください。→ view demo ※iPhone向けのページです。Androidでも動くらしいです。PCでもそこそこ動きます。 確認環境： iPhone3G v4.2.1 Safari, iPad v4.2.1 Safari ダウンロード コミットの仕方なんか変かも知れません。 ダウンロード (GitHub) 圧縮版はだいたい3KBくらいです
iScroll 4 – Matteo Spinelli's Cubiq.org
iScroll finally received a complete rewrite. Now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability. Download Screencast Live Demo GitHub Forum Project info Last code update: 2012.07.14 – v4.2 Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webk
サイボウズで学んだこと - IT戦記
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 （写真はゆうすけべーさんです） この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
新年だしJavaScript始めてみませんか？ | Ginpen.com
※この記事は旧ブログから移動してきたものです。 明けましておめでとうございます。 先日はPHPの紹介記事に則る形でJavaScriptの紹介をしたのですが、こちらは最初からJavaScript視点です。これから始めたい方が「とりあえず触ってみる」のを目的に紹介をしてみたいと思います。 JavaScriptって何さ？ 言語の歴史だとか特徴だとかはwikipediaの記事あたりをご覧頂くとして。 一言で言えば、現在最も敷居の低いプログラミング言語です。 準備が簡単 一般的なパソコンを買ってくればすぐ作れる 何かを特別にインストールしなくていい お金もかからない WindowsでもMacintoshでもLinuxでも構わない 先駆者が多い リファレンスやサンプルなどの情報が多い 情報はそれなりに洗練されている 簡単に書ける CやJavaにある程度似た、よくある文法 Cの#include <std
/packer/で難読化された又は一行Javascriptのソースを見る方法 - toriimiyukkiの日記
「javascript packer」で検索して一番最初に出てくるサイトが /packer/で難読化されたJavaScriptコードをきれいに元に戻す術 - code:x http://code.xenophy.com/?p=868 これ。というのもどうなんでしょう。みんなソース見たいんですかね。 今日はpackerで難読化されたコードや一行Javascriptのソースを見るサービスを紹介したいと思います。 Online javascript beautifier http://jsbeautifier.org/ 次に一行ソースコードを見やすくインデントを自動でしてくれるのがこのサイト。 しかも、packer易読化も同時に出来ちゃう！ これもドデカなテキストボックスにソースコードを貼りつけて[beautify]ボタンを押せば、さっとインデントを行ってくれます。 また、オプションもちょっと豊
/packer/で難読化されたJavaScriptコードをきれいに元に戻す術
ども、小堤です。 やっぱり技術検証してると帰れません・・・まぁもうすぐ帰りますが・・。 さて、題名にあるとおりです。 最近僕は/packer/は使わないのですが、まだ/packer/で難読化されたコードをよく目にします。 これ、以外と戻らなかったりするんですよ。eval()で実行させることが多いんですが、evalを、alertや、document.writeに変更すれば、ある程度戻るんですが、そのまま動くコードではなかったりするんですね。これをきれいに整形するまでの手順をメモします。 FireBugを使って、evalをデコンパイルする。 jsbeautifierを使って整形する。 まぁ逆に言えばこれだけですが、知っているか知らないかは大きいかもです。 FireBugは1.4以上が必要です、まぁUPDATE普通にするともうんで最新版でいけます。 スクリプトタブに、「evalソースをデコンパイ
NIKE FREE VOICE
NIKEアスリートたちのFREEなアクション、FREEなメッセージ。ぐにゃぐにゃ曲がるトレーニングシューズ「NIKE FREE」の魅力をアスリートたちが語る。店舗によってお取り扱いしているモデルが異なります。 詳しくはお近くのお取り扱い店舗、またはナイキお客様相談室までお問合せください。 NIKE原宿 〒150-0001 東京都渋谷区神宮前1-13-12 電話番号：03-6438-9203 ナイキストア吉祥寺 〒180-0004 東京都武蔵野市吉祥寺本町2-16-15 電話番号：0422-28-0833 ナイキストア成田エアポート 〒282-8601 千葉県成田市古込1-1成田国際空港 第2旅客ターミナルビル本館4階M4078 電話番号：0476-30-1450 ナイキストア軽井沢 〒389-0102 長野県北佐久郡軽井沢町大字軽井沢字中谷地 1178-798軽井沢プリンス
iPhone向けwebアプリを作ってみる-タッチイベント、ジェスチャーイベントに関するまとめ-
こんにちは。普段からiPhoneを愛用している橋本です。 最近、「せっかくiPhone持ってるんだし、iPhone向けのアプリ作ってみようかしら？」と思い立ったのですが、iPhoneのネイティブアプリを作るには、"Objective-C"と、"cocoa Touch"というiPhone/ipodTouch向けのフレームワークを理解する必要があり、また、自分で開発したアプリを実機に入れて動かしてみるには、そこそこの費用と各種手続きが必要だったり（iPhoneエミュレータ上で動かす分には問題ないのですが…）と、何かと大変です。 「何かもっと手軽にiPhone特有の機能を活かしたアプリを作る方法はないかなぁ。。」と考え、思い立ったのがWebアプリ。Webアプリなら、今までの知識＋αでアプリを作成することが出来るのではないかと。そこで、今回から数回に渡ってiPhoneとjavascriptを使って
JavaScript開発にalertを使っている人必見！ログ出力ライブラリ「Blackbird」 | Web活メモ帳
JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。 出力したいメッセージを指定するだけできれいに整形して表示してくれます。 例えば、以下のようなJavaScriptを実行してみます。 log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' ); ↑すると、こんな感じで素敵に表示してくれちゃいます。 アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。 使い方 使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。 <
GET送信によるパラメータの受け渡し｜window.locationオブジェクト｜JavaScript/DOM｜PHP & JavaScript Room
他のページへ入力内容を渡す searchプロパティ使用 unknown searchプロパティを使用して、送信先画面にパラメータから受取った情報をフォームに書き出す例です。 フォームの入力状態を送信先のフォームに確認用として表示するのに便利です。 オブジェクト名windowは省略可。 <script type="text/javascript"> /* パラメータを渡す側 */ function send() { var name=""; var sex=""; var favorite=""; /* 名前(コード変換) */ if (document.form1.name.value!=""){ name=escape(document.form1.name.value); } /* 性別 */ if(document.form1.sex[0].checked){ sex=escape(
[JS]Firefox 2/3, Safariも判別する1行のスクリプト | コリス
昨日紹介した「わずか「12文字」でIEを判別するスクリプト」に続いて、Firefox 2/3, Safariを判別する1行のスクリプトをThe Spannerから紹介します。
『javascriptで超簡単にブラウザのIE判別をする方法』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ DETECTING IE IN 12 BYTES IE='\v'=='v' たったのこれだけでIEかIEでないかを判別できる。 他のブラウザの判別方法 DETECTING BROWSERS JAVASCRIPT HACKS //Firefox detector 2/3 by DoctorDan FF=/a/[-1]=='a' //Firefox 3 by me:- FF3=(function x(){})[-5]=='x' //Firefox 2 by me:- FF2=(function x(){})[-6]=='x' //IE detector I
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CssUserAgent (cssua.js)