1990年代初頭から記者としてまた起業家として30年以上にわたりIT業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア(スペイン)の元日本編集長を経て現在に至る。
![現行ブラウザで高度な3D表現を実現するJavaScriptライブラリ「Sprite3D.js」 【増田(@maskin)真樹】 | TechWave(テックウェーブ)](https://cdn-ak-scissors.b.st-hatena.com/image/square/f0e30f575dd9cf293c7146bcc9c922c0b885ec68/height=288;version=1;width=512/https%3A%2F%2Ftechwave.jp%2Fimages_inbox%2F2016%2F05%2Fb185f3e9-s.png)
2011年6月11日土曜日 JavaScriptがネイティブアプリを飲み込む日 2003年1月、某通信キャリア主催のiアプリコンテストで僕のチームが優勝した。 コンピュータサイエンス方面の大学四年生で、暗号技術関連の研究で修士課程に進むつもりだったけど、人間性や態度に問題があって、僕はラボを追放されていた。 就職活動は全くしてなくて、もうすぐ卒業という状況だったけど、コンテスト優勝実績のおかげで携帯コンテンツ業界にうまく潜り込めた。 その後、携帯端末上で動作するアプリをひたすら書きまくった。 2004年も2005年も、携帯JAVAアプリの仕事はたくさんあった。 猫も杓子もどのサイトにもアプリ、差別化するにはとりあえずアプリ、というぐらい業界がヒートアップしていた時期もあったと記憶している。 今ではどうなったかというと、フィーチャーフォン(ガラケー)の世界はHTMLとFLASHが
スマートフォンを含む最近のブラウザでは、戻るボタンで前のページに戻った際に、JavaScriptも含めて前回の最後の状態を復元します(Back Forward Cacheと呼ばれます)。これはとても便利なのですが、ページを作成する立場からすれば、余計なお世話であることもあります。 Back Forward Cacheの無効化はとても簡単に実現できます。ページの中にonunloadを書くだけです。 <!DOCTYPE html> <html><head><title>onunload test</title> <script> window.onunload = function() {}; window.onload = function() { var count = 0; var loop = function() { document.getElementById("num").in
Windows 8がどのようなOSになるのか、マイクロソフトは始めてその詳細を同社のWebサイトの記事「Previewing ‘Windows 8’」で開示し、動画でのデモンストレーションも公表しました。 Previewing ‘Windows 8’: Article by Julie Larson-Green, corporate vice president, Windows Experience. 多くのメディアでは、タイル形式の新しいタッチユーザーインターフェイスに注目していますが、Windows 8の注目すべき特徴の中の1つとして、HTML5とJavaScriptに対応することが明らかにされています。 Web-connected and Web-powered apps built using HTML5 and JavaScript that have access to th
グーグルは、Google Appsのプログラミング言語「Google Apps Script」に、ドラッグ&ドロップでユーザーインターフェイスを自由に構築できる「GUI Builder」機能を追加したと、Google I/O 2011のセッション「Developing Apps, Add Ins and More with Google Apps Script」で明らかにしました。 GUI Builderは無料でGoogleドキュメントを利用しているユーザーでも利用可能になっています。Googleドキュメントから任意のスプレッドシートを開き、[ツール]メニューから[スクリプトエディタ]を選択。起動したスクリプトエディタの[ファイル]メニューの[ユーザーインターフェイスを構築…」を選択すると、GUI Builderが起動します。 左側のオブジェクト一覧から、ボタンやラベル、テキストボックス、
画像スライダーに関することならお任せ!なjQueryプラグイン「Slider Kit... 次の記事 ≫:かなりいい感じのWordPressテーマ20 Allan Jardine | Reflections | Visual Event ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」。 JavaScript で開発していて、jQuery等の各種フレームワークや、on〜 を使ってイベントを埋め込むことは多いですね。 後になって、どこにイベントがあるのかをすぐ見える化し、どのような処理が記述されているのか、確認することのできるブックマークのご紹介です。 当サイトにはそれほどイベントが組み込まれていませんので、Yahoo! Japanのトップページで試してみます。 ブックマークレットを起動すると、グレーアウトされ、エレメントの上
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です。 <
jStatはJavaScriptで作られた統計解析ライブラリ。Canvasタグにデータをプロットする。 jStatはJavaScript/jQuery製のオープンソース・ソフトウェア。単純に一覧化された数値では分からない情報も、データをビジュアル化すると見えているものがある。トレンドや偏差が見えると、次の手や分析する上でのきっかけが掴めるようになる。 二つのデータを描画 統計のビジュアル化をする解析言語としてはMATLABやRが有名だ。しかしそうした言語を覚えないとデータのビジュアル化ができないのは面倒だ。Webブラウザ上でもっと手軽にグラフを描くソフトウェアとしてjStatを紹介しよう。 jStatでは多様な統計解析を行うライブラリだ。描画にCanvasを使っているのでHTML5をサポートしたモダンなWebブラウザがサポート対象になっている。またjQueryを使っている。線で描画すること
スマートフォンサイトの設計・デザイン、HTML5+CSS3による基本的なマークアップについて前回までに解説してきました。今回はページ内の要素にリンクを設定してスマートフォンサイトを仕上げます。 ページ内リンクを張る 今回制作しているスマートフォンサイトは、ページ内の各コーナーに移動できるナビゲーション(ジャンプボタン)を設置しています。まずはジャンプボタンにページ内リンクを設定しましょう。ページ内リンクは、PCサイトと同様、リンク先の要素にID属性を振り、a要素を次のように記述します。 <ul class="clearfix"> <li><a href="#access">アクセス</a></li> <li><a href="#tel">電話</a></li> <li><a href="#mail">メール</a></li> </ul> ボタン全体にリンクを貼る ページ内リンクを設定したサ
scrapiでは「カスタマイズ」ページから自分のサイトのHTMLを自由に編集する事ができます。javascriptやflashでも制限なく書けます。それはセキュリティ上大丈夫なのか、という話。 ログインや記事の編集などは www.scrapi.jp ドメイン上で行うようになっています。cookieはドメインwww.scrapi.jpで保持しています。ユーザページは [ユーザ名].scrapi.jp ドメインになっていて、カスタマイズしたHTMLはここで表示されます。そのため、ユーザページからは閲覧者の認証情報は得られません。右下にお気に入りなどのメニューが出るのですが、これは www.scrapi.jp ドメインのページを iframe で表示しているので、ユーザページのHTMLに書かれたjavascriptからは参照できません。 以上のことから、ユーザが自分のページでjavascript
user-agentを参照せずに、IE6, 7, 8, 9の各バージョンを判定するスクリプトを紹介します。 var ie = (function(){ var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i'); while ( div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0] ); return v > 4 ? v : undef; }());
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 (写真はゆうすけべーさんです) この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
App Engine上のアプリでは利用者の体感待ち時間を短くするため、JSPを使わずにAjaxで実装することがあります。この方法はOpenID認証(Federated Login)でも有効です。 web.xmlのsecurity-constraintで認証をチェックする方法を以前紹介しましたが、この方法ではサーブレットを経由してログイン画面に遷移するまでに待ち時間が発生してしまいます。 代わりにクライアント側で認証をチェックすることで、ログイン画面に遷移するまでの待ち時間を省けます。クライアント側で認証をチェックするには、JavaScriptで ACSID というクッキー*1の有無を確認します。 (図の1) JavaScriptは認証Cookieの有無を確認します。初期状態では認証Cookieを持っていないので、ログインフォームを表示します。 $.extend({ /** * ログイン済み
EditableGrid - Make your HTML tables editable 値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」。 ベタ書きのテーブルタグや、XMLを読み込んでテーブルにすることも可能です。 カラムに型を定義することが出来て、編集時は単純なテキストエリアはもちろんですが、ドロップダウンメニューから選べるようにすることも出来ます。 テーブルヘッダーをクリックすればソートされます。 1から実装しようとするとかなり大変そうですが、ライブラリで比較的簡単に複雑でリッチなテーブルが実現出来ますね。 関連エントリ jQueryベースの多機能グリッドテーブル「DataTables」 jQueryでリッチなグリッドを実装「jqGrid」
テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど高性能な上、超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか? jQuery plugin: Easy Accordion デモページ [ad#ad-2] Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴ったアコーディオンを簡単に実装可能。 自動スライド、手動スライドの切り替えが可能。 同一ページに複数のアコーディオンを配置可能。 初期表示に任意のスライドを指定可能。 画像を使用しないで設置可能。 カスタマイズが容易(高さ・幅・ボーダー・背景画像など) アクセシブルで、SEOにもフレンドリー。 さまざまな
最近使ってたりするJavaScript関係のツールまとめてみた。 主にWebサービスです。 Global is the new private JavaScriptライブラリの名前空間汚染をチェックするツール。 元々載ってるもの以外でも*Analyze your own scripts!*から調査したいライブラリを追加できる。 jsFiddle ブラウザ上で HTML / CSS / JavaScript の実行結果を表示できる。 Embedコードもあるので、ブログにjsやCSSなどを載っけるのに便利。 エディタ機能も整形、シンタックスハイライトしてくれるので使いやすい。 HTML5のコードを使うにはInfoからDTDを変更してから使う。 類似:MooShell Gist – GitHub gistです。コードスニペット共有サービスです。 Greasemonkey貼るときgist fill
mixiチェックのチェックボタンを設置 mixiチェックのチェックボタンを設置してみました。(参考:mixiチェックとは?)FacebookのLike Button(いいねボタン)のmixi版のような感じです。 設置方法 mixi Developer Centerのmixiチェックに設置方法が書かれていますが、設置には「mixi チェックキー」が必要のようです。 mixi チェックキーの取得 チェックキーの取得にはデベロッパー登録が必要で、mixi Developer Centerでデベロッパー登録ができます。 個人の場合はmixiアカウントとメール認証が出来る携帯電話が必要です。 デベロッパー登録が終了したら、mixi Developer Centerの右上のログインリンクからダッシュボードに移動し、mixi プラグインに新規登録からチェックボタンを設置するサイトを登録します。URL許可
TOP > WebDesign > CSS、javascriptで実現するタブインターフェイス集「30 CSS and Javascript Tabs Solutions」 数多くの情報をまとめて、限り有るスペースを有効活用することができるタブインターフェイス、情報量の多いサイトで主に利用されていますが、今回紹介するのはCSS、javascriptで実現するタブインターフェイスを集めたエントリー「30 CSS and Javascript Tabs Solutions」です。 Sweet Tabbed Navigation Bar using CSS3 デザイン的に凝ったものから、jQueryやCSS3を使って印象的に見せるものまで、様々なタブインターフェイスが紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Sweet
2010年09月09日20:30 カテゴリLightweight Languages Ajax - gjslintをブラウザーで 利用できるようにしてみた。 「Google JavaScript Style Guide」に沿ってチェックしてくれる、グーグル製JavaScript文法チェッカー − Publickey Closure LinterはPythonで書かれたツールで、コマンドラインから利用します。Demo: Source var x = 10 var y=20; for(var i = 0;i < 10; i++ ) { x += i; y -= i; } var z = [10, 20,]; x = y + z[0] + 10; gjslint says: fixjsstyle says: fixed js: Client: まあシンプル。 /* depends on jQue
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く