例えば写真などを出来る限り広い画面で、余計な情報を取り払って表示したい場合があります。ゲームなどではよくある要件だと思います。今回はそんなときに利用する「フルスクリーン化」を取り上げます。 HTML5でフルスクリーン ブラウザの対応状況 PC スマホ サンプル ソースコード 解説 フルスクリーンが利用できるか調べる フルスクリーンにする フルスクリーンを解除する フルスクリーン開始/解除時のイベント ライブラリを利用する screenfull.js iPhone/Androidでもフルスクリーンにしたい metaタグ編 manifest編 素材 参考ページ HTML5でフルスクリーン ブラウザの対応状況 正直なところ鬼門ですｗ 執筆時点(2019/08)では多くのブラウザが完全に対応していないため、本番で利用するには処理の場合分けが必要になります。詳しくはCan I useを参照してくださ
![[HTML5] フルスクリーンの開始と解除 - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/726ba28867850b981960f15a48ae336532540e84/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcold-voice-b72a.comc.workers.dev%3A443%2Fhttps%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061408740%2F1701622269)
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
Hi ! I have also tested on the browserify vuejs-templates and i have the same error. I followed the README and have set up a new project using vue-cli browserify, but when i'm trying to reach the 'this' object inside vue instance method (created, beforeCompile...), it always return undefined into the console. Here is an example when i modify the script part of the App.vue file (it's the only one t
SPA でアプリケーションを作る際、angular1 の時はどうも「書かされている」感がして好きになれませんでした。x-tag を使って自前でカスタムエレメントを作っても良いのですが、それでも書かされている感がしますし、若干大げになりがちです。そんな中、angular 寄りで、かつ x-tag よりも薄い JavaScript ライブラリを tokuhirom がガシガシと作ってくれました。 GitHub - tokuhirom/sj.js Tiny javascript view for custom elements based on incremental-dom. This library supports angular1 like templating. https://github.com/tokuhirom/sj.js x-tag の様に js 一つで動きます。そしてだいた
Published 04/11/16 by sean Follow @sfioritto Grunt/Gulp npm, require.js, browserify, es6, compilers, transpilers, jasmine mocha chai, react/angular/ember, closures, prototypes. *head explodes* Web development is fun! Javascript is ... daunting. Everything else in web development clicks for you, but when you dig into Javascript it's like you're missing some big, foundational piece of knowledge that
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
こんにちは、吉田です。 アプリの開発にはテストがつきものですよね。 納品前に最終的なテストを行うのはもちろんですが、それに加えて開発中も気軽にテストを実行できる環境があれば、既存コードのリファクタリングや使用しているフレームワークのバージョンアップなども安心して行えます。 内部のロジックをクラスやメソッド単位で内側からテストするユニットテストの自動化は行われている場合も多いかと思いますが、アプリの場合は画面遷移や要素の表示・挙動が占めるウエイトもかなり大きいので、「Aのボタンを押したらBの画面に遷移し、Cという要素が表示されている」といったような外側からのテストも大事になってきます。 その辺りのテストは手動で行う場合もあるかもしれませんが、フレームワークのバージョンアップやリファクタリングのたびに手動で全ページを表示して動作確認を行うのはつらすぎる。。 外側からのテストも自動化したい・・！
こんにちは。 TypeScript Advent Calendar 23日目の記事となります。 昨日22日目はmizchiさんでした。 今日は、まだTypeScriptを使っていない人、特に、「普段JavaScriptをよく触っていて、altJSに興味はあるけど、いまいち新しい言語を覚えるほどのモチベーションはない」という人に向けて、僕がTypeScriptを使いはじめて感じたことを書いてみたいと思います。 筆者がTypeScriptを使い始めるまでのプログラミング言語遍歴 話を始める前に、まずは筆者がこれまでに使ってきたプログラミング言語を振り返ってみます。 JavaScript (2000〜現在) HSP (2001〜2003) PHP (2004〜2009) Python (2009〜現在) …というように、まともに触ったことがあって、それなりに使えるようになったプログラミング言語は
なんかブログのお蔵入り記事を見返してたら色々出てきたので見切りでリリースしておく。 今読むとなんか合わない気もするし、まぁお酒の中での与太話程度に見ておいてください。 これの話してたのは2月くらいなので一年位経過してる。。 JavaScript の科目 先日、牛角.jsという名の飲み会で、@mootohさんと@bad_at_mathさんと牛角で飲み会でした。 その飲み会で出た話題を一つ。 元々はこの話で、 バベルの塔へ向けたフロントエンド開発者の咆哮について。気持ちはよくわかる。 https://t.co/QaabnJeEVw— juske the badatmath (@bad_at_math) February 3, 2014 フロントエンジニアが持つべきスキルセットが多すぎる！！ということをHNのスレで話し合っててすごく面白く、それを肴に飲み会してました。 んで、そこから話は飛び火し
社内向け資料。自分が書いたコードを説明するために資料作る羽目になった。 昔のことはうろ覚えで雰囲気で書いてる部分もあるので、そこらへん勘弁。 古の時代(~2010) 前提としてJavaScriptは名前空間がwindowの一つしかない。 昔Prototype.jsがあった。もうみんな忘れたけどあの時期はプリミティブなオブジェクトのprototypeを生やしまくって、それが衝突しまくってprototype良くない的な雰囲気が生まれたり生まれなかったりした。 その反省があってか(歴史的に若干微妙な気がするが) jQueryは名前空間を一つに集約した。いわゆる jQueryPlugin は、jQueryのプロトタイプにヘルパを生やしまくっていた。グローバルを汚すのは駄目だけどjQueryの名前空間を汚すのはいいよね、ぐらいの考え。 jQuery非依存なライブラリは、「GoodParts」として、
2015年02月05日16:34 カテゴリ 今、クライアントサイドのJavaScriptを書く前に知っておきたいこと ~ 2014年トレンド総まとめ 皆さんこんにちは。adingoにてFluctという広告配信システムの管理画面を中心にクライアントサイドの開発を行っております、大関です。 今回は、先日、社内のエンジニア向けに開催した「2014年のJavaScriptのトレンド総まとめ」というコンセプトの勉強会の内容について紹介します。 JavaScriptトレンド総括（2014） from Tetsuharu OHZEKI それでは、スライドに書ききれなかった前提事項について、何点か補足と解説をします。 補足と解説 前提: なぜ「2014年」なのか JavaScriptを用いた開発、特にWebフロントエンドとも呼称されるクライアントサイドJSのトレンドは、非常に速いサイクルでの進化を見せて
楽すぎてどうしよう。が最初の感触。まだ3時間しか触ってないけど、もうこれでいいや感が半端ない、深夜2時です。 Angularなのか、Reactなのか、2015年が明けても毎週のように新しいJSフレームワークが出る中で、もう正直どうでもよくなってませんか? でも、これは触って楽しいはず。 Riotって何? Riotは、公式ページに A REACT- LIKE, 2.5KB USER INTERFACE LIBRARY とあるように、Reactを意識して作られた超軽量のUIライブラリで、ビュー部分(コンポーネント)に特化しているのが特長です。Vue.jsとかとも同類です。Riot 1.0も「超軽量」という点で、一時注目を集めました。 そのRiotが、2.0で趣向を変えてJSX的なプリコンパイルの仕組みを取り入れて、ReactとPolymerのいいとこ取りのような感じになっています。ただし、次の
Emergencies wait for no one, which is why bad credit is available 24 hours a day, 7 days a week. Instead of waiting for your bank or credit union to submit your loan application, the online loan networks listed below can process your application in minutes. If you are eligible, you can choose from several […]
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
ThinkfulはWeb/スマートフォンアプリの技術などを学ぶことができるオンラインスクール。プロフェッショナルな開発者がメンターとして1対1で伴走するため、他の同様サービスよりも続けることができる。 Javascript ベストプラクティス パート1 2つのパートに分けてお届けする「ベストプラクティス」のパート1では、MozillaのWebエバンジェリストであるChristian Heilmannが提供する人気のスライドショーから内容を抜粋しています。JavaScriptにはひどく扱いにくい特徴がいくつかありますが、それはこれまで以上にソフトウェア開発において重要になっています。この「ベストプラクティス」ではより読みやすく、効率の良いコードを書く手助けとなるサンプルコードやその使用例を紹介していきます。 もしWeb開発についてもっと学びたいと思うのであれば、私たちが提供しているフロントエ
ユニットテストがしにくい状態となってるコードをTestiumを使ったE2Eテストを書いてリファクタリングしてみる話です。 例えば、以下のようなjQueryで書いたコードは外(テストコード)から取り出すポイントがないので、ユニットテストを書くのは難しいと思います。(そもそもViewのコードなので) 特定のバージョンでの変更点を簡単に確認できるよう、 「Aの列のラジオボタンを選ぶと同じ行より一つ下にあるBの列のラジオボタンを自動で選ぶ」 という補助機能 $(document).ready(function () { // seq: シーケンス番号 $.each(["new_version", "old_version"], function () { $("input[name='" + this + "']").each(function (idx, elem) { if (idx == 0
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のオブジェクトだけを操作すれば、上手いこと自動的に書き換えてくれる ことだと言えます。
フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" > <img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' /> </div> <button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button> #img01:-webkit-full-screen { width: 80%; background-color: rgba(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
