今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> JavaScript スクリプトではスマートフォン用にdiv要素で「Menu」を加え、それがクリックされるとアニメーションでスライドします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき
昨日実装したcoding()ハンドラは、少し大袈裟かもしれないけど、実は自分の中では長年の夢だった。 on coding(obj) try if obj's class = text then "\"" & obj & "\"" else if obj's class = list or obj's class = record then obj as number else obj as text end if on error msg try "require \"jcode\";$KCODE=\"u\";/\\{.*\\}/=~" & quoted form of msg & ";puts($&);" --rubyコード do shell script "ruby -e " & quoted form of result --シェルコード on error --do shell sc
日記の容量の制限で溢れてしまったので、9月26日から分割した。 ログイン情報取得.scpt Safariで表示中のページからログイン情報を取得して、保存する。 set BS to load script POSIX file ((do shell script "dirname " & quoted form of ((path to me)'s POSIX path)) & "/_login_base.scpt") tell BS authenticate("●入力された情報を保存します。" & return) set new_record to record_from(url_key() & ":" & input_tag_json()) if new_record as list = {{}} then error number -128 --強制終了 try openssl_dec
なにゆえに、金融機関のWebサイトは、あれほどまでに自動ログインを阻害する作りなのか？なにゆえに、シンプルなIDとパスワード方式ではダメなのか？中でも、ゆうちょダイレクトは難攻不落である。 お客さま番号の3分割入力。 ログインパスワードの別ページ入力。 初回のアクセスについては、2段階の合い言葉の要求。 なにゆえに、そこまで面倒な手続きを要求するのか？その手続きによって、果たして、どれほどセキュリティが向上しているのか？*1IDを3分割しようが、パスワードを別のページで入力しようが、根本的には二つの値の一致を確認する方式に変わりはなく、ただ、ただ、毎回の面倒な手続きが負担になっている。いまどき自動ログインができないなんて、不便過ぎる...。しかも、お客さま番号は13桁もある。覚えられん。その不便さに苛立って、IDを付箋に書き込んでディスプレイの枠に貼り付けてしまい、逆にセキュリティが低下す
iPhoneアプリのようなリッチなUIをブラウザで実現！Web 2.0 Touchが凄すぎる！ 2011年8月25日 in iPhone, Web Web 2.0 Touchは、WebKitエンジン上で動作するJavaScriptライブラリです。 2011/8/22に公開されたばかりの模様。 iPhoneアプリのようなリッチなUIをブラウザでも簡単に作ることができます。 iPhone・iPad・Androidに対応しています。 どんな動きが出来るのか、これを見ると一目瞭然です。 アニメーション 上下左右のフリップ(画面が反転する動き)、ポップイン、ポップアウト、上下左右のスライドが出来ます。 テーブル表示 お馴染みのテーブル表示もこの通り。角丸タイプのテーブルも作れるようです。 ボタンやタブ表示、吹き出し タブ表示は便利な機能ですが、自分ではとても作れないところなので、需要ありそう
<a name="top" href="#footer">下に移動</a> [コンテンツ] <a href="#footer">下に移動</a> [コンテンツ] <a name="footer" href="#top">上に移動</a> リンク先を#footerに設定すると「name="footer"」と書かれたリンクまで移動するという感じになります。 この例の場合、上2つのリンクは一番下のリンクまで、一番下のリンクは一番上のリンクまで移動します。 難点といえば、リンクがあるところにしか移動できない点でしょうか。 ページの量が多くなったときの目次など様々な場面でに使えそうです。 name属性はweb標準ではない ところで、リンクでのname属性はweb標準ではありません。ただ、このままでも問題なく動きます。 将来的なことも考えてweb標準に則りたいという場合は、nameの代わりにidを使い
え、JavaScript ちょっと知ってるけど私も Titanium できるの？ できますとも。あなたにもできますとも。 えーっと、詳細な VPS ネタを披露するには明らかに知識が乏しい、僕です。 Titanium mobile の関連記事が増えてきて興味を持ったヒトも多くなってきた感じで非常にうれしいですね〜。もっともっとユーザーが増えてテクニックやソースが公開されて、苦労なしに知識が得られるようになれば、、、とか考えてる次第であります。はい。 さて、Titanium mobile は JavaScript で開発できると言っても、web サイトでよく行う DOM の操作なんかできないし、Window や Navigator 、それに Document なんてオブジェクトは存在しません。もし JavaScript を知らないヒトが Titanium mobile で開発しようとして、よく
初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 どうもこんにちは、フレッシュさに定評のない新入社員のtek_kocです。 初めてのお仕事として「Titanium Mobileでアプリを試しにつくってみる」というのを担当していました。 JavaScriptはあまり使ったことがないですし、そもそもMacもほとんど触ったことがなかったので苦戦するかと思いましたが、２週間ほどでとりあえず形になるところまでできました。Titanium Mobileすごいです。 ということで、Titanium Mobileで試しにアプリ開発をしてみた感想を書いてみました。 そもそもTitanium Mobileとは？ Titanium Mobileとは、Appcelerator社によるスマートフォン対応アプリケーションの開発環境です。 iPhoneやiPad、Androidを
PhantomJS ってコマンドラインツールがありまして、 JavaScript で DOM いじくったりなんかいろいろできるんですが、 QtWebKit ベースなのが気に食わないんです。 Mac で使うぶんには Cocoa と WebKit.framework でどうにかなるだろと。 というわけで Cocoa に移植してみました：no title mattn さんが webkitgtk+ で実装されたものが SpecterJS って名前だったのでこっちは GespenstJS にしてみました。ドイツゴです。 Xcode でビルドすると gespenstjs ってバイナリができるので phantomjs と同じように使えます。 あるいはビルド済みのバイナリをどうぞ。
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
※前置き長いです。本題はここから。 9/6 ごろから 9/9 にかけて、TwitMgr (閉鎖済) と Splitwit (閉鎖済) の OAuth 認証が正しく動作しなくなってしまっていました。 これらは、JavaScript で Twitter API を扱うライブラリとして、TwitAPI.js を使っており、それがうまく動作していなかったのです。で、原因を追ったところ、JavaScript 側ではなく、OAuth 認証を肩代わりするプロキシサーバである taj-proxy 側に問題があることがわかったので、今回はそれを直したときの話です。 そもそも、taj-proxy は、開発当初 GAE/j 上でうまく Twitter OAuth 認証を扱えるライブラリがなかった (と思っていた) ため、OAuth 認証部分をすべて独自実装してました。Twitter 側の何らかの実装の変更により
http://github.com/tily/js-eeepub JavaScript で ePub を読むだけじゃなくて作成できたら面白いだろうなと思って、勉強も兼ねて jugyo さんの EeePub を JavaScript に移植してみた。 不完全なところが色々あるし、もっと便利にできそうな気がするんだけど、だいぶ飽きてきたんで一旦 github で公開してみる。 zip.js と xmlbuilder.js に依存している。あと、JSSpec でスペックを書いてみた。スペックに書いてるまんまだけど、こんな感じで使う。 var easy = new EeePub.Easy({ title:'sample', creator:'tily', identifiers:'http://example.com/book/foo', uid:'http://example.com/book/
2010 年 4 月 21 日 anchor iTunesAppからアイコン画像を取り出す方法 iPhone、iPod Touchのアプリを紹介しているサイトさんは皆さん普通にやっていることなので、いまさらなTipsなのかもしれないが、iTunesAppとして配布されるアプリのアイコンデータを取り出す方法を。 通常のMac用アプリならアプリ本体を「パッケージを開く」で開いて中のリソースフォルダの中の「icns.icns」というファイルを取り出すとか、アプリ本体をコピーしてプレビューのメニューから「クリップボードから新規作成」とかの方法で簡単にアイコンファイルを取り出せるのだが、iTunesAppはiPhone独特の障害があってこの方法が使えない。 iTunesAppは「.ipa」という独自の拡張子を持っていて、バンドルの方法がMacアプリとは違う。 またその中身にあるpngのアイコンファイ
はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 （マンガは、左上から右下へと読みます） プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ
四角を書いてみよう <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Sample</title> </head> <body> <script src="raphael.js"></script> <script> var paper = Raphael(0, 0, 500, 500); paper.rect(0, 0, 20, 20); </script> </body> </html> サンプル 四角に色を付けてみよう <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Sample</title> </head> <body> <script src="raphael.js"></script> <script> var paper = Raphael(
HTML＋JavaScriptでiPhone/Androidアプリを作れるTitanium Mobileとは：Web技術でネイティブアプリを作れるTitanium（1）（1/3 ページ） iPad/iPhone VS Androidに戸惑っているWebデザイナ／開発者のために、Web技術でネイティブアプリを作れるオープンソースの開発ツールを紹介し、その利点や使い方を連載で解説します iPad/iPhone VS Androidに戸惑っていませんか？ 2010年1月5日、グーグルがAndroid 2.1を搭載した「Nexus One」を発表しました（参考：Google、Android 2.1搭載の“スーパーフォン”「Nexus One」を発表）。高精細なディスプレイや高速なプロセッサによる快適な動作など、iPhoneのライバルとしての存在感が話題になりました。また1月21日には、NTTドコモ
twitter facebook hatena google pocket CSSのtext-shadowとJavaScriptを利用してテキストの影を非常に印象的にするテクニックです。 ※サポートブラウザはSafari、FF3.5、Operaなどです。 via：CSS text-shadow Fun sponsors 使用方法 まずはテキストを書きます。 <div id="text-shadow-box"> <div class="wall"> <p id="tsb-text">影を付けたいテキスト</p> <div></div> </div> <div id="tsb-spot"></div> </div> 上記を記述したら、CSSを以下のようにします。 <style type="text/css" media="all"> #text-shadow-box { position: r
Due to recent changes in the twitter API auth policy, the current version of twitter.js does not work. I am actively working on a solution, but can't say much more than that right now. If I do find a decent solution, you shouldn't need to change anything as twitter.js will inherit the latest code automatically. Hotlink from Google <script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
