ドットキャラクターの様に小さなピクセルで描かれた画像をブラウザで表示すると、アンチェリアスがかかりぼやけてしまう Unityではピクセルパーフェクトをオンにするとドットをそもまま表示してくれる機能がありますね javascriptだけでドットキャラのゲームを作る場合はCSSでimage-renderingを指定すると切り替える事が出来ます 要素単位でもbodyに記述してもいいですね
【CSS】ドット絵をぼやかさずに表示する
ドットキャラクターの様に小さなピクセルで描かれた画像をブラウザで表示すると、アンチェリアスがかかりぼやけてしまう Unityではピクセルパーフェクトをオンにするとドットをそもまま表示してくれる機能がありますね javascriptだけでドットキャラのゲームを作る場合はCSSでimage-renderingを指定すると切り替える事が出来ます 要素単位でもbodyに記述してもいいですね
【お詫びと訂正】iOS11でついにSafariからカメラにアクセスできるようになりました。（コピペで動くサンプルコード付き） - KAYAC engineers' blog
お詫びと訂正：（2017/06/08 23:32） 本記事内に掲載しているスクリーンショットが、 Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。 Apple.Incの開発者利用規約から、掲載内容を不適切と判断し、該当箇所を削除させていただきました。 Apple.Inc及び読者の皆様に深くお詫び申し上げます。 追記：（2019/02/17） Navigator.getUserMediaが非推奨となったため、MediaDevices.getUserMediaを使うように修正しました。 Navigator.getUserMedia - Web API | MDN MediaDevices.getUserMedia() - Web API | MDN ざっくり1行でま
JavaScriptでシェルスクリプトを書いて面倒な作業はサクッと片付ける
クライアントのWebサイトをSSLにアップグレードしました。証明書はワンクリックでインストールできるので難しくなかったのですが、SSLへ移行後、混在コンテンツの警告がたくさん出ました。WordPressのサイトなので、修正にはテーマディレクトリのアセットをHTTP経由でインクルードしているファイルをすべて特定する必要がありました。 以前は簡単なRubyスクリプトで自動化して対処していました。Rubyは私が最初に覚えた言語で、このようなタスクに適しているからです。しかしNodeでコマンドラインインターフェイスを作る方法で紹介したとおり、JavaScriptはブラウザーだけの言語ではなくデスクトップのスクリプトにも使えます（ほかにも用途はたくさんあります）。 この記事では、JavaScriptで再帰的にディレクトリ内のファイルにアクセスして特定の文字列を検出する方法を解説し、シェルスクリプトを
maildown - Markdownを日本企業で使えるメール文面に変換 MOONGIFT
Markdownが便利な記法であってもすべてに使える訳ではありません。まだまだ個人間でやり取りされるメールはテキストが一般的で、HTMLメールが使われることはほぼありません。となるとMarkdownの出番がありません。 そこで作られたのがmaildownです。Markdownで書かれた文章を日本企業で使われるメール風の体裁にしてくれます。 maildownの使い方 左側が元文章、右側が変換された内容です。 リストなどに特徴があります。 maildownではリストの他、罫線を使ったテーブル表示、見出しの処理、80文字で改行などと細かな部分を日本企業風に仕立ててくれます。また、下には変換された部分やタイポなどの指摘がされるようになっています。日本風と言わずともメール用のMarkdownコンバータとして便利なソフトウェアです。 maildownはnode/JavaScript製のオープンソース・
GanttPad - テキストからガントチャート生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プロジェクト管理と言えばガントチャートと言うくらい必要としている方は多いです。少なくとも一覧では分からなかったタスクの関連であったり、今後のタスクの予定が可視化されるようになります。それによって無理が来るポイントなども掴めるようになるでしょう。 今回紹介するGanttPadはテキストで書いたタスクをガントチャートに展開してくれるソフトウェアです。 GanttPadの使い方 下にあるテキストエリアに入力すると、上にあるガントチャートに反映されます。 日付フォーマットは柔軟なようです。 新しいチャートの作成もできます。 GanttPadはテキストをガントチャートに展開してくれるので、多くのシステムと連携ができそうです。タスク名、日付さえ出力すれば良いので既存システムからそういった文字列
# CommonJS と ES6の import/export で迷うなら - Qiita
はじめに いつもはes6のモジュール管理方式であるimport/export(ES modules)を使って、npmで手に入れたライブラリや自分で作成したモジュールをロードしているが、たまに思った挙動にならないことがある。また、export defaultしたモジュールをテストしようとしてkarmaでrequire()するとエラーになったりした。そういう場合は、とりあえずmodule.exportsを使ってみるとうまくいったりすることが多いのだが、なぜなのかはあまり考えていなかった。 ということで、実際にはどうなっているのか、またモジュールシステムとは何なのかという点で基本的なことから理解を深めて、es6のimport/exportとの違いを知り、より正しく実装できるようになれば良いと思っている。 結論としては 方針としては基本的にはES6形式で記述するが、CommonJS形式の読み書きが
Riot.jsによる再利用しやすいコンポーネントの作り方 - Qiita
Riot.jsは単純な仕様のため、複合したHTMLタグとJavaScript機能を持ち合わせた、いわゆるコンポーネントが非常に作りやすい。 今回実際作成したコンポーネントの解説を通して作りやすさを感じてもらい、Riotの普及活動に繋げたい。 #再利用しやすいコンポーネントとは これには諸説あると思うが、自分が思うに「利用したくない」と思われるコンポーネントは再利用されない。 自分が利用したくないコンポーネントは 使い方が複雑 依存関係が複雑 カスタマイズできない。もしくはしづらい 見た目がかっこわるい なので、これらの逆をつけば再利用しやすくなるのではと考える。 #作ったもの 手書き入力した内容を自動認識し、変換された文字列を返せるもの → <input type="text">の代替として利用可能なもの 仕様としては タッチもしくはマウス操作で手書きすると右下に認識した文字列を表示し、J
Print.js - Webで任意のコンテンツを印刷できます MOONGIFT
Webが苦手としているものの一つに印刷があります。Webサイトを印刷しようとしてデザインが崩れてしまった経験はないでしょうか。また、ごく一部だけ印刷したいのにそれもままなりません。 そこで使ってみたいのがPrint.jsです。印刷対象を細かく指定できるソフトウェアです。 Print.jsの使い方 一例です。PDFファイルを指定すると見ているHTMLと全く違うPDFが印刷できます。 <button type="button" onclick="printJS('docs/printjs.pdf')"> Print PDF </button> さらにフォームの印刷も。 <form method="post" action="#" id="printJS-form"> ... </form> <button type="button" onclick="printJS('printJS-form
3ヶ月で Serverless Framework を導入し、SPA ( Riot.js + RiotControl で Flux 実装 ) をリリースした話 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ※ このお話は ( おそらく ) フィクションです。実在の人物や団体とは関係ありません。 前書き 中規模程度のサービスを Serverless 構成の SPA をパイロットリリースしました。具体的なサービス名等は紹介できません ( おそらくフィクションなので ) が、筆者が3ヶ月間でやってきたことを殴り書きして行きます。 基本的にはリリースまでに必要となった材料 ( 参考にしたドキュメントやサイト ) を重点的に紹介していくだけですが、同じような境遇の方々の手助けになれば幸いです。 筆者のプロジェクトイン時スペック 社歴3年程度 主にバ
さらばjQuery！アニメーションをサクサク処理できるVelocity.jsの使い方
「jQueryのアニメーションが遅い」「CSSアニメーションは使いにくい」。そこでアニメーション処理の定番ライブラリー「Velocity.js」の出番です。基本的な使い方を一通り紹介しましょう。 本記事ではJulian Shapiroにより開発された高速かつ強力なJavaScriptアニメーションエンジン、Velocity.js（以降、Velocity）を紹介します。記事のコードやデモすべてに目を通せば、Velocityを使って自分のアニメーションが作れるようになり、サイトはさらにインタラクティブで使いやすいものになるでしょう。jQueryには頼らず、すべて素のJavaScriptだけで作ります。 この記事は『CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！』『HTMLもSVGもテキストも自在！DOMアニメーションの決定版「KUTE.js」が登場』の続編
手軽にテキストシャッフル演出ができるJSライブラリ「shuffle-text」を公開 - ICS MEDIA
JavaScriptライブラリ「shuffle-text」を公開しました。shuffle-textはテキストシャッフル（文字列がランダムで切り替わる演出）の表現を行うためのライブラリです。SPA（シングル・ページ・アプリケーション）やゲーム・スペシャルコンテンツの演出に役立ちます。 たとえば、ウェブサイトでマウスカーソルが触れたときに次のような演出ができます。 JavaScriptライブラリはMITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 shuffle-text: JavaScript Text Effect library. shuffle-text を使ってみよう 本記事では、JavaScriptライブラリを組み込み利用するまでの手順を解説します。以下のデモが今回作
phiary
JavaScript の dispatchEvent の情報があまりにも少なかったので解説用にサンプルを作ってまとめてみました. このエントリーでは dispatchEvent の基本的な使い方と活用例について解説します. うまく使えばネイティブっぽく JavaScript を拡張したりってこともできる便利な関数です. About 今回制作したサンプルデモは２つ. 最初のサンプルはイベントを発行するサンプルです. boxB をクリックした際に boxA のクリックイベントも発生するようになっています. 2つ目のサンプルは rightclick イベント という 右クリックしたときのみ発行する独自イベントを定義しています. Code 今回制作したサンプルデモ１個目の全体コードです. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <l
iOSのMobile Safari上でのfocus()が妙な件を調べてみた - mixi engineer blog
こんにちは。ミクシィUX統括部にて、mixi Touchの開発を担当しております戸高です。 JavaScriptでの開発を行う事が多いのですが、iOSのブラウザ（Mobile Safari）のfocusの挙動について少しクセがあり、 調べてみましたので、お知らせいたします。 通常、<textarea>や<input type=”text”>等のフォーム要素に対して、フォーカスを与えたい場合、focus()メソッドを使用します。 iOSのブラウザ（以下、Mobile Safari）にて、以下のコードを実行してみます。 （分かりやすい様にjQueryを使用させて頂きました） なお、検証端末にはiPhone4S iOS5.0(9A334)を使用しています。 HTML <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” con
Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita
レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。 そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。 まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 NGパターン まずはやって
[JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita
原則、JavaScriptでは異なるドメイン間のAjax通信はできません。つまり、自サイトから他サイトのデータを取得することはできません。 HTML5では、異なるドメイン間でも安全にデータをやり取りできるよう、postMessage が用意されました。（両ドメインのサイトが postMessage を実装している必要があります） コード例 基準サイトから外部サイトへメッセージを投げて、返信を受け取る場合のコード例です。外部サイトの window オブジェクトを必要とするため、iframe と併用されることが多いようです。 ＜基準サイト側＞ <!-- 外部サイトへメッセージを投げるためのiframe --> <iframe id="ifrm" src="http://外部サイト.com/xxx.html" style="display:none;"></iframe> <script typ
![[JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d34a71cff31750693a10914780cd8109dfce478f/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMHBvc3RNZXNzYWdlJUUzJTgxJUE3JUUzJTgyJUFGJUUzJTgzJUFEJUUzJTgyJUI5JUUzJTgzJTg5JUUzJTgzJUExJUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgzJUExJUUzJTgzJTgzJUUzJTgyJUJCJUUzJTgzJUJDJUUzJTgyJUI4JUU5JTgwJTlBJUU0JUJGJUExJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9YjM4OTVjM2I2NjVhYTRkZWExNzZkMTk4NmEyYTE3Zjk%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%3D6695cff07fec06ec5ac3d9567ddd61a9)
Mac で Chrome のヘッドレスモードを試してみた - 世界のやまさ
Chrome がヘッドレスモードに対応したということなので試してみました。コマンドラインからchromeが扱え、URLのテキスト出力、pdf出力とpng出力が出来ます。 環境 macOS Sierra version 10.12.4 Chrome Canary 手順 次のページの手順をなぞってみました。環境に書いた通り macOS で試しています。Windows はまだ非サポートのようです。 Getting Started with Headless Chrome | Web | Google Developers Chrome Canary を取得する まず一番最初で躓きました。コマンドラインで動かすとエラーが出ました。 pink-poodle:~ nnasaki$ chrome --headless --dump-dom https://www.chromestatus.com
Google App Scriptをモダンな開発っぽくする環境を作ってみた(ES6, browserify, eslint, mocha) - nagashigaki
お前は今更何を言ってるんだ？というテーマですが整理するために。 Google App Script(以下GAS)とはjavascriptでGoogle App(今ではG suite？)の豊富な機能を堪能でき、ある程度の作業を自動化することができます。しかも無料で！指定時間に勝手にスクリプトを起動することもできちゃいます。 例えば、複数のcsvをDriveにアップしてボタンをポチっとするだけで目的のデータが揃い、そのデータをメールで飛ばしたりできるのは非常にありがたいです。 導入する環境 環境を整える npmとgitの初期化 babel gulpまわり browserify テストツール eslint ファイル構成 gulpfileの作成 お疲れさまでした 開発する 雑談 導入する環境 このGASの機能をもっと使いこなしたい。具体的には npmで管理 es6 gulp browserifyで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
npmとwebpack4でビルド - jQueryからの次のステップ - Qiita
簡単！ JavaScriptで自動UIテスト (NodeJS, Selenium Webdriver, WebdriverIO, mocha, gulp) - Qiita
NativeBase: Universal Components for React & React Native
