Vpassアプリとは iPhoneは、Apple Inc.の商標です。 iPhoneの商標は、アイホン株式会社のライセンスにもとづき使用されています。 Android は、Google LLC の商標です。 Vpassアプリとは Apple のロゴは、Apple Inc. の商標です。 App Store は、 Apple Inc. のサービスマークです。 Google Play および Google Play ロゴは、Google LLC の商標です。

今週はスマートフォンサイトの実装を行いました。その中で、スマートフォンサイトではよく見られる、ボタンを押すとメニューが開閉する仕組みの実装がありました。実装後にiOSのVoiceOverを利用して動作を確かめたのですが、他のサイトを見ると上手く開閉することが出来ないメニューボタンがいくつか見つかりました。どのような問題が見られたか等をまとめてみたいと思います。 上手く開閉できないボタンの例 いずれもVoiceOverをオンにして操作した場合の問題です。VoiceOverがオフの場合は、問題なく操作できました。 なお、会社名・サイト名を上げていますが、上手く動作しなかったことを伝えたいだけで、他意はありませんので念のため。 1. JavaScriptの不具合? ※追記(2014年12月15日):再度確認したところ、問題なく動作するようでした。 味の素様のウェブサイトにあるメニューの開閉ボタン
IE11がWindows7などでも使えるようになって、早2ヶ月を過ぎようとしております。 ちらほらと今迄動いていたJSのプログラムが動かない・動作が不安定など色々と問題が発生しているようですが、みなさんはいかがでしょうか。 特にIE11からユーザーエージェントも変更となりUAでプログラムのフローを制御している場合などは必ず問題が発生するのではないでしょうか。 ロジックもIE11からIE10からかなり変わっておりjavascriptの動作に関しても大幅に変わっています。 IE11の大きな変更点としてまとめると 1 ユーザーエージェントの変更 2 JavaScriptで取得可能なブラウザー名の変更 3 ドキュメントモード(描画エンジン)の変更 ではないでしょうか。 1 ユーザーエージェントの変更
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 先日、「ヤフーvsクラスメソッド iOS 炎の7番勝負」という勉強会を開催しました。 http://connpass.com/event/5159/ おそらく業界初となる対決形式の勉強会で、7つのテーマで各5分のLTを行いました。 1人5分の持ち時間では説明しきれない部分もありましたので、 補足スライドも含めてヤフー側全セッションの発表資料をすべて公開します! ▼発表を見逃した方はUstアーカイブをぜひご覧ください! Ustream前編://www.ustream.tv/recorded/44215492 Ustream中編://www.ustream.tv/recorded/44217060 Ustream後編://www.us
※ 追記: id:TokyoIncidents さん"補足"の誤字修正しました、ありがとうございます!! これからYeomanに関して説明していきます。 Yeoman自体が何者なのかよくわかっていない人も多いと思います。また、ある程度Yeomanの概要は知っているので、generatorの作り方が知りたい、という方もいると思います。今回は三部構成で、yeomanを使う話、yeomanのgeneratorを作る話、最後にyeomanのAPIに関して説明していきます。今回は第一部のyeomanを使う話について説明します。 Yeomanとは Google社が作成した総合開発ツール群です、「ヨーマン」と呼びます。公式サイトには MODERN WORKFLOWS FOR MODERN WEBAPPS (モダンWEBアプリケーションのためのモダンワークフロー) と記述されています。 Yeomanを使う
『JavaScript Ninjaの極意』を読んでいて気になったこと。予めことわっておきますが、書評とかそういうのではありません。 「3.2.1 スコープと関数」で、JavaScriptの変数と関数のスコープについて解説されているのですが、これは間違いなのではないでしょうかと。例として次のようなコード片で解説されております。 function outer() { var a = 1; function inner() {} var b = 2; if (a == 1) { var c = 3; } } outer(); このコード例に対して、次のようなテストを上記コード例の各ステップに挿入して実行します。 assert(true, "何らかの記述的なテキスト"); assert(typeof outer==='function', "outer()はスコープ内にある"); assert(t
Remodal クールに実装できるレスポンシブなモーダルダイアログ「Remodal」 レスポンシブ対応のモーダル表示ライブラリもちらほら出てきていますが、こちらは、モバイル表示時にモーダルっぽさをなくした全面表示というのがカッコよく新しいライブラリです。 PC版はこれまで同様のモーダル表示。表示がフラットで若干モダン スマホの場合は全画面表示。なんかこの方がカッコいい気がします。 別にフローティングなエフェクトは画面の無駄ですし必要ないという所が合理的で表示もクール。 関連エントリ CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 シンプル&軽量なモーダルダイアログ実装jQueryプラグイン「portBox」 何でも埋め込めてカッコいいモーダ
はじめに この記事は、 JavaScript/ES6 promisesについてを理解するために読んだ方がよいと思われる記事やスライド等を紹介しています。 PromisesやDeferredといった言葉を非同期処理の話などで聞いた事があるかもしれませんが、 現在Promisesは次のECMAScriptの言語仕様として策定が進められています。 ECMAScript Language Specification ECMA-262 6th Edition – DRAFT domenic/promises-unwrapping まだES6は策定段階ですが、既にPromisesについてはpolyfillとして利用できるライブラリ等もあり、また他のライブラリ内でもjQuery.Deferred()やAngularの$q等類似する実装が存在します。 そのため、Generators等に比べると今すぐ使える
お疲れ様です、デザイナーのモモコです。 私がメンバー写真に使っている(`・ω・´)クッションが思った以上に縦に細くて個人的にツボった今日この頃です。 今回は入力フォームを実装する際に入れておくとちょっと便利になるJavaScriptのプラグインを4つご紹介します。 jQuery Label Better http://www.thepetedesign.com/demos/label_better_demo.html form部品にフォーカスを当てるとplaceholderがふわっと上に移動するプラグイン。 全体的に動きのあるWebサイトを作るときには活躍してくれそうです。 formatter.js http://firstopinion.github.io/formatter.js/ 電話番号やクレジットカード番号など、パターンのある数列を1つのform部品内で扱えるようになるプラグイン
AngularJSのコントローラ 前回はとりあえずAngularJSを動かしてみました。今回からもう少し詳細に踏み込んで使ってみます。 今回はAngularJSのコントローラをつかってみましょう。 AngularJSにおいてコントローラ(Controller)とは、モデルとビューを操作するためのコンポーネントで、 実態はAngularJSのスコープオブジェクト($scope)を引数として使用する、JavaScriptのオブジェクトです。 では次に、コントローラのシンプルな例をみてみましょう。 ちなみに、今回使用した動作環境は以下のとおりです。 次のサンプルを動かすため、AngularJSが動作する環境をつくっておきましょう。 前回作成したangular-seedを使うと楽です。 OS : MacOS X 10.9 node.js : 0.10.24 Git : 1.8.3.4 scopeに
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
CSS3で簡単! スマホ向けWebページのスクロールを激派手にできるstroll.jsとは:HTML5アプリ作ろうぜ!(9)(1/2 ページ) オープンソースのJavaScriptライブラリ「stroll.js」について、概要と使い方を紹介します。CSS3のアニメーションを駆使しているので動きが軽く、スマホ向けWebページのスクロールに派手なエフェクトを簡単に追加できます。 最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していく本連載「HTML5アプリ作ろうぜ!」。今回紹介するのは「stroll.js」です。 CSS3のアニメーションを駆使するstroll.jsとは stroll.jsはオープンソース(ライセンスMIT)のスマートフォン用スクロールライブラリ(JavaScr
[対象: 上級] この記事では、非常に華麗な無限スクロールを実装しているサイトを紹介します。 美しく、見やすい、SEOも考慮できた QUARTZ の無限スクロール そのサイトは、ニュースメディアサイトの QUARTZ です。 「百聞は一見にしかず」で、実際に QUARTZ に訪問して見てください。 注目してほしいのはブラウザに表示されるURLです。 無限スクロールで下がっていくと、今あなたが見ている記事に対応したURLに自動的に切り替わります。 下方向だけでなく上に戻ればまたそれに対応してURLが変わります。 titleタグももちろん切り替わります。 個別のURLをブラウザのアドレスバーに入れれば、直接そのコンテンツを閲覧できます。 そして、そこから無限スクロールが始まります。 記事に与えられた個別のURLは、そのURLできちんとGoogleにインデックスされています。 Mozのランドもイ
TOP > plugin > クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」 魅力的なwebサイトを実現させるためには、他にはないデザインや動きを取り入れることで、より理想に近づけることができます。今回はそんな魅力的な動きを実装できるフリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」を紹介したいと思います。 (Drop) そのまま利用しても、自分のデザインと組み合わせて使っても、クリエイティブなwebサイトを作り出せるプラグインがまとめられています。 詳しくは以下 scrollReveal.js スクロールするとバーの動きを楽しむことができるプラグイン。個性的なデザインのサイトに仕上げたい時におすすめ。 leas
Q Q is a data language. For now, it is limited to a data definition language (DDL). Think "JSON/XML schema", but the correct way. Q comes with a dedicated type system for defining data and a theory, called information contracts, for interoperability with programming and data exchange languages. Examples Validating Coercing Suppose we want to capture information about a medical diagnosis for some p
Web 開発や拡張機能開発で JavaScript のコードを書いていると、誰もが一度は次のようなことで悩むかと思います。 ブロックスコープと名前空間 (グローバル変数汚染の回避) 読み書きしやすくデバッグしやすいコードスタイル コールバック関数と this オブジェクトの取り扱い デバッグ方法とデバッグ支援モジュール 非同期処理の書き方 いずれも解決方法は人によって様々で、これが常にベストと言えるものがなさそうですが、私なりにそれぞれ検討したことなどを書いてみようかと思います。もっと良い方法があるとか色々皆さんのご意見やツッコミをいただければ幸いです。 JavaScript では名前空間は言語仕様でサポートされておらず、ライブラリや拡張機能などのコードを書くときにはグローバル変数の使用を最小限に抑える必要があります。先日の Mozilla 勉強会@東京 3rd でも佐藤さんと守山さんの発
JavaScriptには名前空間がないので、オブジェクトを代わりに使います。 Namespace.hoge = "ほげほげ"; Namespace.fuga = function() {}; こんな感じでオブジェクトのプロパティを追加していくことで、グローバルスコープを汚さずに済みます。 それだけではなく、JavaScriptだとグローバルスコープに宣言するよりも速いらしいです。 ただし、名前空間がcom.example.foo.barといったように長ったらしくなると、宣言が面倒になってくるのでクロージャを使って凌ぎます。 //グローバルシンボルだけは宣言しておく。(既に使用済みでもvarは問題なし) var com; //プロパティがなかったら追加する。 //すでにある場合はオブジェクトかどうか判断して例外発生させた方がいいらしい if (!com) com = {}; if (!com
はじめに JsViewsはJsRenderのテンプレートに宣言型データバインドを追加するフレームワークです。これにより、MVVM(Model‐View‐ViewModel)パターンを簡単に実装できます。 対象読者 JavaScriptデータバインドフレームワークに興味のある方 WebアプリケーションにおけるMVVMパターンに興味のある方 JavaScript、jQueryの基本を理解している方 必要な環境と準備 以下のサイトから、jsviews.jsとjQueryをダウンロードしてください。 JsViewsはJsRenderの機能を拡張するjQueryのプラグインです。JsViewsのダウンロードページでjsviews.jsをダウンロードしてください。jsviews.jsには、JsRenderとJsViewsが含まれています。 JsRender(jsrender.js)とJsViews(j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く