最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
The Ultimate Guide to handling JWTs on frontend clients (GraphQL)
The Ultimate Guide to handling JWTs on frontend clients (GraphQL) JWTs (JSON Web Token, pronounced 'jot') are becoming a popular way of handling auth. This post aims to demystify what a JWT is, discuss its pros/cons and cover best practices in implementing JWT on the client-side, keeping security in mind. Although, we’ve worked on the examples with a GraphQL clients, but the concepts apply to any
Auth TokenをlocalStorageに入れようが、cookieに入れようがどっちもXSS危険性には無防備（同ドメイン内なら ...） - Qiita
Auth TokenをlocalStorageに入れようが、cookieに入れようがどっちもXSS危険性には無防備（同ドメイン内なら ...）JavaScriptcookieJWTxsstoken tokenを保存する場所 localStorage cookie cookie (http only) メモリ内 (変数) よく言われるのが JWT tokenをlocalStorageに入れるべきではない ということ。 理由としてはJavascriptで簡単に読めてしまうので、XSSがあった場合意図しないスクリプトを動かされてしまい、結果としてtokenが盗まれるというもの。 対応策として cookie (http only) を色んな所で推奨してる。 https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851 http://cryto.net
Apache Guacamole™
Apache Guacamole is a clientless remote desktop gateway. It supports standard protocols like VNC, RDP, and SSH. We call it clientless because no plugins or client software are required. Thanks to HTML5, once Guacamole is installed on a server, all you need to access your desktops is a web browser. Download Apache Guacamole 1.5.5 Released on 2024-04-05 Access your computers from anywhere Because th
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
自宅サーバのデスクトップへブラウザからアクセスできるように「noVNC」を設える - Qiita
主な目的としては、以下のようで、 自宅の無線 LAN ルータの設定を、外からイジりたい Dropbox や ownCloud のクライアントのように、サーバ上で動いてはいるけれど GUI の方が操作しやすいアプリへ、外からアクセスしたい（SSH だとしんどい） スマホから自宅のブラウザへアクセスして艦これの遠征を出s（以下自粛） その際の要件なんですが、 経路を暗号化したいが、都度 SSH 等でトンネルするのは面倒だ VNC クライアントをクライアントごとに用意するのも面倒だ ブラウザだけで何とかならない？ HTTPS のサーバ証明書ならば、安かったので入れてあるんだけれど といったところです。 ガラケーのカバー率が気になるとか、Extended Validation 証明書でなければ、というのでないかぎり、サーバ証明書なんて年で 1,000 円くらいですので皆さんもぜひ。あれ？ name
これもまたHTML5の面白さ。WebブラウザでVNC·noVNC MOONGIFT
noVNCはHTML5/Canvas/WebSocketを利用したWebブラウザで使えるVNCクライアント。 noVNCはHTML5/Python製のオープンソース・ソフトウェア。複数台のPCを使いこなす時に、モニタまで台数分あると邪魔になってしまう。そこでよく使われているのがリモートコントロールだ。有名なものとしてはVNCが知られている。 外部からアクセス VNCクライアントは既に多数あるが、コンピュータに不慣れな人が簡単に使えるというのはあまり多くないように感じられる。そこで試してみたいのがWebブラウザから使えるVNCクライアント、noVNCだ。 noVNCはHTML5を使って作られているソフトウェアで、WebブラウザからWebSocketを使ってPython製のプロキシに接続し、そのプロキシがWebSocketとVNCプロトコルの橋渡しをするようになっている。VNCサーバによっては
noVNC
noVNC - the open source VNC client - noVNC is both a VNC client JavaScript library as well as an application built on top of that library. noVNC runs well in any modern browser including mobile browsers (iOS and Android). Notable commits, announcements and news @ noVNC. HTML5 WebSockets and Canvas Try it! An online version of the noVNC client is available HERE. Check out these videos and screensho
PWAでここまでできる
スライド内の関連リンク * DiverseのPodcast https://podcast.diverse-inc.com/ * 採用ページ https://diverse-inc.co.jp/recruit/positions * 今回のサンプルGithub https://github.com/SAMUKEI/droidkaigi2019-sample-pwa * 今回のサンプル動画 https://youtu.be/ehW6397JceI * はじめてのプログレッシブ ウェブアプリ https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja * PWA Builder https://www.pwabuilder.com/ * How to Package Android https:
HTML5ゲームの種類とゲーム用エンジン・フレームワーク15選｜フリエン
HTML5といえば、Webサイトを作成するための言語と思いがちですが、HTML5でもゲームアプリの開発を行うことが出来ます。Webブラウザはもちろん、iPhone、Androidでも動作するゲームが作成可能です。今回のコラムでは、HTML5で作成できるゲームの種類と、ゲーム用エンジン、HTML5で使用出来るゲームフレームワークをご紹介していきます。 【目次】 ■HTML5でゲームを作れるのか ◆HTML5とは ◆従来のゲーム開発で使用する言語 ◆HTML5で開発出来るゲームの種類 ■HTML5でゲームを作るために必要なスキル ◆HTML5とJavaScript ◆ゲームエンジン・フレームワーク15選 ◆HTML5でゲームを作るためのおすすめ教材5選 ■HTML5で作成されたゲーム例5選 ■ゲーム業界でのHTML5の需要と案件・求人例 ◆ハイブリットアプリで注目されているHTML5 ◆ゲーム
enchant.js - A simple JavaScript framework for creating games and apps.
enchant.js is … カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。 2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。 オープンソース (MITライセンス) で、無料で利用できます。 ドキュメント・書籍・チュートリアルサイトが充実しています。 たくさんのプラグインで機能を拡張できます。 UEI/ARC を中心としたメンバによって開発・メンテナンスされています。 プログラミング教育のためにも利用されています。 Features オブジェクト指向: 表示されているものはすべてオブジェクトです。 マルチプラットフォーム: iOS, Android, Mac, Windows のブラウザで動作します。 Windows 8: Windows 8 対応のHTML5アプリケーションを開発できます イベント駆動
HTML5 Conference 2018 登壇資料まとめ - Qiita
HTML5 Conference 2018 の登壇資料のまとめです。 資料を発見次第随時アップデートしていきます。 https://events.html5j.org/conference/2018/11/ 2018年11月25日（日） 東京電機大学 千住キャンパス 1号館 タイムテーブル https://events.html5j.org/conference/2018/11/session/ ハッシュタグ 総合: #html5j ホール（2階）: #html5j_h 各ルーム（1階:A-C/2階:D,E）: #html5j_a #html5j_b #html5j_c #html5j_d #html5j_e セッション ZOZOのグローバルECのフロントエンドアーキテクチャ設計 （権守健嗣さん） 光を超えるためのフロントエンドアーキテクチャ （mizchiさん） TypeScript E
Server Sent Events(SSE)の使いどころと使い方 | GREE Engineering
Flameの箱を捨ててしまったためどうやって送り返すか困っています。@kyo_agoです。 今日は2014年6月にβ公開したGREEチャットで通信に使用しているSSEを紹介したいと思います。 SSEとは SSEとはServer-Sent Eventsの略でW3Cで提案されているhtml5関連APIの一種です。 これはサーバとの通信やJavaScript APIを中心としたもので、サーバからPush通信を行うための仕様です。 サーバからPush通信に関してはこれまでもCometやWebSocketが存在しましたが、SSEは互換性や効率などの点でそれ以外の技術に対する特徴があります。 ここからは具体的な仕様や、実際に使用した場合の感想などを紹介したいと思います。 通信方式 SSEはHTTP/1.1を使用し、Content-Type: text/event-streamで通信を行います。 基本的
LINE BLOGアプリ開発で contenteditable と戦った話
こんにちは、LINE Fukuoka の tarunon です。LINE BLOG iOSのリリースまで、クライアントとエディタの開発を担当していました。昨年11月に、LINE BLOG は一般開放と、iOS/Androidクライアントの公開を行いました。ほぼ1年がかりの開発だったのですが、クライアント側で最も大変だったのがエディタの開発でした。この記事では LINE BLOG のエディタの根幹を支えている Workaround について解説します。普段は Swift を書いていて、ほぼその話しかしていないのですが、今回は HTML と JavaScript の話になります。 LINE BLOG はこういったサービスです。 LINE BLOG - 芸能人・有名人ブログ LINE BLOGエディタはWebブラウザの上で動作しています。開発は iOS/Android 共通のソースコードで、 i
HTML5アプリに関わるユーザのための祭典。HTML5 APP CONFERENCE 2018 開催レポート
HTML5アプリに関わるユーザのための祭典。HTML5 APP CONFERENCE 2018 開催レポート 2018年7月9日 2018年7月10日 イベント Capacitor, cordova, html5, HTML5 APP CONFERENCE, Ionic, PWA, イベント 生形 可奈子 2018年7月8日（日）、サイボウズ株式会社にてHTML5アプリに関わるユーザのための祭典、「HTML5 APP CONFERENCE 2018」が開催されました。 本記事ではイベントの様子を、熱気冷めやらぬうちに速報でお伝えします！ HTML5 APP CONFERENCE 2018 様々な分野のエキスパートが登壇した今回のイベント。本記事では個人的に気になったセッションをピックアップしてご紹介します！ 基調講演「Web App Platform Strategy (Webアプリ・プラ
oCanvas - Object-based canvas drawing
Canvas drawing made easy oCanvas is a JavaScript library intended to make development with HTML5 Canvas easier. Instead of working with pixels, you work with objects. It’s very straightforward and easy to get started with. Please have a look at the examples to see just how easy it is. View demos & examples Download oCanvas Current release: 2.10.1 Production 21 kB minified & gzipped Development 192
CreateJSでHTML5 Canvasを操る | 第1回 CreateJSとは
CreateJSでHTML5 Canvasを操る 第1回 CreateJSとは 第1回目はCreateJSの概要と、おおまかな機能、またCreateJSの理解に必要な概念を解説します。簡単なデモを多く用意したので、まずはどんな表現ができるのかを実感してもらえるといいと思います。 CreateJSとは CreateJSは、Canvasを便利に扱うためのライブラリ群で、JavaScriptの知識があればHTML5のCanvasを直感的に制御し、コンテンツを作ることができます。CreateJSというと、Flash経験者のためのライブラリと捉えている人がいるかもしれませんが、JavaScriptでコードを書いた経験があれば、だれでも使いこなすことができます。 現在のところFlashがかつてになっていたウェブ上のダイナミックな表現を可能にするツールとしても注目されています。 これまで、ウェブの動的コ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - novnc/noVNC: VNC client web application
FIDO認証によるパスワードレスログイン実装入門
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
