Editor.jsA Free, Block-Style Editor with Universal JSON Output Editor.js empowers developers and products staying focused on the end-user experience
あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
CMSによるスマホアプリケーション開発の選び方や導入メリットを解説
独自開発するのにコストや手間がかかるスマホアプリ。しかしCMSを活用することで、スマホアプリは気軽に作成できます。扱うのに専門知識を必要としないため、アプリ開発のハードルが大幅に下がるでしょう。 この記事では、CMSの製品を紹介するとともに、製品選定ポイントや導入メリットについて解説します。スマホアプリの開発・運用のコスト軽減に役立ててください。
[JavaScript] 画像変換：<img>要素 ⇔ Base64（相互変換） - Qiita
//===================================================== // <img>要素 → Base64形式の文字列に変換 // img : HTMLImageElement // mime_type : string "image/png", "image/jpeg" など //===================================================== function ImageToBase64(img, mime_type) { // New Canvas var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; // Draw Image var ctx = ca
![[JavaScript] 画像変換：<img>要素 ⇔ Base64（相互変換） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4ec3390c7dd4aa682ec84e41bbeb64217846c9e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzY3NTElMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODcxODc_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9YmExNTY3ZTlkNmFiZGJhZGRmZTNkMzExNzczMDY5ODU%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D99fc2c9611a89cd3b6973298de710c6e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFNyU5NCVCQiVFNSU4MyU4RiVFNSVBNCU4OSVFNiU4RiU5QiVFRiVCQyU5QSUzQ2ltZyUzRSVFOCVBNiU4MSVFNyVCNCVBMCUyMCVFMiU4NyU5NCUyMEJhc2U2NCVFRiVCQyU4OCVFNyU5QiVCOCVFNCVCQSU5MiVFNSVBNCU4OSVFNiU4RiU5QiVFRiVCQyU4OSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWQ2Y2Y2NTEwMTQ2ZjBkYWNmZDUzMzk2ZjFmYmI2NTc2%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5YXN1bW9kZXYmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz01MGJiMTA5NzhjNmVmMGUzMDhjZDk3M2Y2YWI4MGVjNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D2bd13d038d391dc20d8d3028913d321e)
【JavaScript入門】FormやAjaxのPOST送信・取得の方法まとめ！ | 侍エンジニアブログ
特に２つ目の「第三者に知られずに」…というのは重要です。「GET」の場合はURLに送信する情報が表示されるので、大事なデータは「POST」で通信する必要があります。 例えば、パスワードなどユーザー情報をサーバーへ送信する場合には注意が必要です。 FormによるPOST この章では、Form(フォーム)を使ったPOST通信の方法について学習していきます。HTMLを使った基本的な手法と、JavaScriptから動的に通信する方法について見ていきましょう！ Formを使ってPOST送信する方法 まずは、HTMLからFormを作ってPOSTする方法について見ていきます。考え方としては、送信先となる「サーバーのパス」と通信方法の「POST」をFormタグに指定すればOKです。 <form action=【サーバーのパス】 method="POST"></form> サーバーのパスは「action属性
HTML5のCanvasを簡単に高機能化してくれるJSライブラリ「Fabric.js」
こんにちは、渡辺です。 HTML5のCanvasを簡単に高機能化してくれるJSライブラリ「Fabric.js」を紹介します。 Canvas上に描いた絵をマウス操作で動かしたり、拡大縮小する機能が標準で付いていてスゴい便利なライブラリです！ まず、このライブラリの主な特徴についてです。 ■特徴 ・インタラクティブ性 Canvas上に描いたものをマウスやタッチで自由に操作できます（ドラッグ、拡大縮小、回転）。 ・Canvasに描いた内容をオブジェクトとして扱える Canvasに描いたものをgetメソッドやsetメソッド経由で設定変更できます。 ・Canvasのシリアライゼーション・デシリアライゼーションのサポート Canvas上の内容をJSONまたはSVGに変換でき、再度インタラクティブな描画内容を復元することができます。 ■準備 1. ライブラリのダウンロード https://github.
HTML5のcanvasを使ったお絵かきツール詳説
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
ブラウザ上でサインを書けるjQueryプラグイン「jSignature」:phpspot開発日誌
jSignature ブラウザ上でサインを書けるjQueryプラグイン「jSignature」。 CanvasかFlashで描画出来るので多くのブラウザに対応。ウェブサイトにサインを導入したい場合に使えるかも 実装は以下のように超簡単です <script src="libs/jSignature.min.js"></script> <div id="signature"></div> <script> $(document).ready(function() { $("#signature").jSignature() }) </script> データをSVGのbase64形式で取得できたりもするみたい デモページはこちら サイン書いてみました（＾＾） 関連エントリ アイテムを浮遊させられるjQueryプラグイン「jqFloat」 一見普通のテーブルだけどExcel風に使えるjQueryプ
JSONにコメントを記述する方法の備忘録 - NxWorld
すごい今更なことなのですが、JSONにはコメントを付けることができないということをつい最近になって気付きました...。 ならコメントを付けなければ良い話ではありますが、個人的にJSONを利用する場合は設定ファイル等で利用することが多いのもあって可能であればコメントを残したいと思うことがあったり、単純に付ける方法はないのかが気になって少し調べてみたので備忘録です。 コメント付けたいならわざわざJSONにこだわらなくてもYAMLにするとかコメント使えるHjson使えばって感じですが、あくまでJSONでコメントを付ける方法になるのでそういった意見はスルーでお願いします。 コメント用にデータをつくる #1 単純に使用しなければいいということで、コメント用として出力などはしないデータをつくってしまう方法です。 例えば下記のように実際に使用しないという意味も含めて先頭に「_（アンダースコア）」を、キー
AWS Lambda + AWS API Gateway + websocketでお手軽双方向通信チャットアプリをサーバレスで簡単構築してみた - Qiita
AWS Lambda + AWS API Gateway + websocketでお手軽双方向通信チャットアプリをサーバレスで簡単構築してみたAWSwebsocketlambdaAPIGatewayserverless この記事は全部俺 Advent Calendar 2018の19日目の記事です。 この記事について Amazon API GatewayでWebsocketが利用可能になりました。 これによって、Websocketを使用した双方向通信がサーバレスで実現できます！ Websocketでつながっているユーザであれば、バックエンド側からのpush通知も可能になります！ 早速試してみたので記事にしてみます。 ちなみに動作しているところはこんな感じです。 websocket chat app on AWS Lambda(serverless) pic.twitter.com/AGZ1
マルチタッチを実装してCanvasに3本指で線を引くサンプル | キリウ君が読まないノート
JavaScriptでマルチタッチ実装するサンプルです。複数本の指でCanvasに線を引けて、途中で指を増やしたり減らしたりしても大丈夫なはずです。 指が接地してるかぎり、Touch.identifier が変わらないのを利用してます。指が接地したときに identifier を覚えておき、指が離れたときに覚えておいた identifier を削除します。よって、実装上保持できるようにした identifier の数 ＝ マルチタッチ可能な上限数ということになります。 ちなみに identifier は、Chrome (ver65.0.3325.181) の開発者ツールだとゼロが設定されてました。手元のiPhone 6Sだと、結構大きい桁数の連番だったような気がします。なのでゼロが来ることは一応考慮しておき、かつ identifier の具体的な数字に依存した実装も避けます。 しかしこれ
手書きホワイトボードの説明
手書きホワイトボードの説明 2013.9.10 作成 2016.2.14 改訂 パソコンやタブレットの画面に、マウスや指で手書きできます。 但し、HTML5非対応のブラウザ(IE8など)はNGです。 書き込んだ内容を、ワンタッチで一括消去でき、跡が残らないのが特徴です。 ＰＣ(マウスドラッグ)でもタブレットでも手書きができます。 タッチパネルの場合、「クリック」を「タップ」と読み替えてください。 色ボタンをクリックすると色を変更できます。 線幅ボタンをクリックすると線幅を変更できます。 「全面」ボタンをクリックすると、設定色で画面を塗りつぶすことができます。 「消去」ボタンをクリックすると、画面を一括消去できます。
ときどきWEB | スマホやブラウザの画面サイズや向きを取得してやんよ!!!
アプリケーションを実行しているスマホの画面サイズや向きを動的に取得できれば、それに応じて表示するコンテンツを調整できますよね。 画面サイズを取得する JavaScriptで画面サイズを取得するためのプロパティが用意されています。 ウィンドウサイズを取得できる関数 screen.width document.write(screen.width); 画面の幅を取得することが出来ます。 screen.height document.write(screen.height); 画面の高さを取得することが出来ます。 画面サイズとタスクバーを除いたスクリーンサイズを取得することが出来ます。 コンテンツ領域を取得できる関数 window.innerWidth document.write(window.innerWidth); ウィンドウ内側の横幅を、取得したい場合に使用。 ※ スクロールバー領域を含
Material Design for Bootstrap4（その1）導入とカードデザインの実装 | 創kenブログ
Bootstrap4を使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap4」。 ＊Material Design for Bootstrap 「Material Design for Bootstrap4（以下、MDB4と呼称）」は無料で商用利用可能です。 クレジット表記も必要なく、制作にも使えます。 ライセンスは「MTIライセンス」で、 ソースコード内（mdb.min.css）にクレジット表記が載っているので、それさえ消さなければ問題ありません。 以前、MDB4について単発の記事に概要のみ載せました。 また、これのBootstrap3対応バージョンについて、8回のシリーズで書きました。 Bootstrap4も正式リリースから半年以上経ちましたので、そとそろ皆さん慣れてきた頃かと思います。 今回から数回に渡って「
【React Native入門】Java Scriptでアプリ作ろう【Reactやったことない人向け】１ - Qiita
その２【React Native入門】Java Scriptでアプリ作ろう【Reactやったことない人向け】2 はじめに 後輩がReact Nativeの入門記事ないかって調べてたら僕の記事を見つけたらしい・・・。 ということで調べてみると僕がReact Nativeはじめたての頃の記事が出てきた！ 僕がちゃんとこの業界に入りだしたのもこのぐらいで、このころはQiitaすらやってなくてQiitaの発音もわからないほどだった。なのでQiitaというよくわかんないけど検索すると出てくるいろいろと記事の書いてあるサイトという認識でしかなかったと思われる。ゆえにサクラドメインでブログを作ったのだと思う。このころはgitの使い方すらわからなかった・・・・。 せっかくなのでこのサイトに書いてあることを掘り起こしつつ最近の書き方を踏襲しつつ、当時の僕でもわかるようにTodoアプリぐらいは作れるようになる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JavaScript]クリップボードを使ったコピーとペースト - Qiita![[JavaScript]クリップボードを使ったコピーとペースト - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/315bbb83ee3ab58101e511f6679c3bf9ad0c3846/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFMyU4MiVBRiVFMyU4MyVBQSVFMyU4MyU4MyVFMyU4MyU5NyVFMyU4MyU5QyVFMyU4MyVCQyVFMyU4MyU4OSVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSU5RiVFMyU4MiVCMyVFMyU4MyU5NCVFMyU4MyVCQyVFMyU4MSVBOCVFMyU4MyU5QSVFMyU4MyVCQyVFMyU4MiVCOSVFMyU4MyU4OCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZTNlN2U2NzNkYTM1YTU5Y2Y2NGM0ZWZkNjFmMTc2MDQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBidXRha29tYSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Y2U5ODllOTA5MzU5NzEyNGJkYmEzZTRkZWU2NjI2NDk%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D82ef0c5a60cc7cf340e85a448a6fe0fb)
https://codeday.me/jp/qa/20190311/374216.html
『スマホ画面サイズや向きを動的に取得してやんよ!!!』デモページ
https://codeday.me/jp/qa/20190103/102961.html
ApacheとNode.jsの共存 - Qiita
