JavaScript の テンプレートリテラル を極める！ - Qiita
テンプレートリテラルとは、ECMAScript 6 で新しく使えるようになった構文のひとつです。 言わばヒアドキュメントのようなものです。めちゃくちゃ便利です！ 2015年8月現在、Google Chrome と Firefox の最新版では既に使えるようになっています。 2016年9月現在、Edgeでも使えるようになっており、Google Chrome や Firefox も含めたほとんどのモダンブラウザで利用可能です。 （残念ながらモバイルブラウザではまだ非対応のこともあるので、要注意です。） 基本 この内容を知っているだけでもカナリ使えます！ バッククオート（`～`）で囲む！ var a = "ジャバスクリプト"; var b = `ジャバスクリプト`; console.log( a === b ); // true console.log( b ); // ジャバスクリプト
iOS 10 で Cordova/Phonegap アプリが動かなくなった - Qiita
具体的には deviceready イベントが発火しなくなったので、テンプレート通りに初期化処理を入れているとコールされない。 Content Security Policy に gap://ready と file:を追加することで動作するようになる。 http://stackoverflow.com/questions/38410159/ より参考実装を引用させて貰うとこんな感じ。 <meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-inline' 'unsafe-eval'">
Qiitaにおけるリモートワーク主体の開発プロセス - Qiita
2016/9/27 スタートアップRails勉強会発表資料 About @takashi Increments アプリケーションエンジニア 主にQiita:Team担当 最近入社した 最近 Incrementsの開発チームが大事にしていること HRTを大切にしたコミュニケーション 作業は意識的に自動化する 属人性を極限まで排除する 重要な価値に集中する Qiitaにおけるリモートワーク開発プロセス HRTを大切にしたコミュニケーション Humility(謙遜), Respect(尊敬), Trust(信頼) リモートワークにおいてHRTとは？ オンラインコミュニケーションは誤解を招きやすい (本当に)意図せず冷たく接しているように伝わる そこで なにげないレビューに を添えるだけで雰囲気が良くなる (けど普段喋れないこともあるので)月１回はオフラインで集まるようにしている 作業は意識的に自
gulp-sass, gulp-plumberを使うときの注意 - Qiita
gulp, gulp-sassでSassのコンパイルをwatchしようとしたら、アレ？ってなったのでメモ。 .scssファイルでコンパイルエラーとなるような内容を書くと、watchのプロセス毎落ちてしまうので、gulp-plumberで防御しようとした。 .pipe(plumber()) の書き方だと一度エラーとなったあと、二度とコンパイルを行わないゾンビプロセスになってしまうという問題にぶち当たった。 以下のようにgulpfileを書いたところ解決。 'use strict'; var gulp = require('gulp'), sass = require('gulp-sass'), plumber = require('gulp-plumber') ; gulp.task('compile:sass', () => { return gulp.src('src/**/*.scss
2020年まで使えるfont-familyおすすめゴシック体 - Qiita
新しい記事書きました。【font-familyについて本気で考えてみた】 「Chromeでも読みやすい游ゴシックを指定する方法 」の記事で游ゴシックが一部ブラウザで掠れる問題を解決出来たので、font-familyのベストプラクティスを考えてみたいと思います。 本当は「2016年font-familyの決定版」みたいなタイトルにしたかったのですが、執筆時は8月ですしね。2017年も名乗れません。 2020年と書いたのはWindows7のサポートが切れるのがこの年だからです。 目的はどの環境でも出来る限り近い見た目を目指すものではなく、実行環境で最も読みやすいものを目指すものです。MacよりもWindowsに比重をおいています。 -- 追記 -- Chrome58から一時対応しなくなってしまいましたが、游ゴシックをWindows版Chromeでキレイに表示する@font-faceの設定にヒン
ES2015で始めるJavaScript入門 - Qiita
はじめに JavaScript勉強会の資料です。 内容は、簡単なコマンドラインツールを作りながら、JavaScript(ES2015を含む)の書き方を学ぶものとなってます。 内容的には初心者向けなので、JavaScriptを勉強したい、JavaScriptは触ったことあるけどES2015を知らないので勉強したい、といった方が対象です。 JavaScriptとは Webブラウザで実行可能なインタプリタ言語 最近ではサーバサイドのものもある(Node.jsなど) 各ブラウザで独自の実装があるが、標準化されたECMAScriptに準拠している ES5, ES2015(ES6), ES2016, … ES2015からは毎年新しい規格が策定される これによりナンバリングは策定した年に変更 ES2015 ES5(2011年策定)から4年ぶりに策定されたECMAScript 非常に多くの機能が追加された
SPAでのセッション管理とセキュリティ - Qiita
編集履歴 ※ SessionStorage→LocalStorage（永続化される方はこちらだった） ※ OPTIONメソッド→OPTIONSメソッド ※ JWTについて少し調べたのでLocalStorage欄を追記 概要 Frontend Meetup vol.1 - SPAを語り尽くす会!のLT資料です。 フロントエンドのガチ勢には当たり前の内容になるかもしれません。 SPA探り探りなので、ご指摘あればコメントなどで頂ければと思います。 自己紹介（後で消す） 名前：しばたこ/uryyyyyyy 所属：株式会社オプト 得意分野：Scala/Play2/Spark/React 最近はReact/Redux/TypeScriptで書いてます。 materializeを導入したのですがjQueryなかなか辛い。。。 この資料で話すこと SPAでのセッション管理 CSRF対策 CORS SPAで
Google Analyticsの情報をダッシュボード「Re:dash」で可視化する - Qiita
追記 Re:dashのデータソースとしてGoogle Analyticsが正式に追加されるようです。リリースされた暁には、本記事にあるような面倒な手順を踏む必要はなくなりそう？ re:dashのGoogle Analyticsデータソースを試す 初めに Re:dashはオープンソースで提供されている、ダッシュボードツールです。サーバー構築の手間はかかりますが、超簡単にさまざまなデータソースから、自由にダッシュボードが作れるようになります。 今回は、おなじみGoogle Analyticsの情報を、Re:dashでダッシュボード化する方法を解説します。 追記 twitterを見ていて。 Treasure Dataでは、GAのレポートを突っ込む方法があるようです。 http://blog-jp.treasuredata.com/entry/2016/09/13/163306 Google Bi
Service Workerの基本とそれを使ってできること - Qiita
Service Workerとは ブラウザが Web ページとは別にバックグラウンドで実行するスクリプト オフラインのアプリを実現・サポートするために作られたものです ちなみに、ブラウザの対応状況はこんな感じ http://caniuse.com/#search=service%20workers 特徴 DOM にアクセスできない DOM を操作したい場合は、Service Worker がコントロールしているページ(js)と postMessage でメッセージのやり取りをして行う リクエストをプロキシすることが可能 Service Worker はブラウザが必要に応じて起動・終了するので、変数の値を保持しておけない Cache、IndexedDB 等で値を保存して、必要になった時に取り出すようにする Promise を多用する https か localhost 上でしか動作しない ラ
target="_blank" で開くリンクには rel="noopener" をつける - Qiita
The performance benefits of rel=noopener - JakeArchibald.com より target="_blank" でリンクを開く場合は、rel="noopener"をつけておくのが良い。 管理画面などでは rel="noopener noreferrer"というかたちでnoreferrerをつけるとさらに良いかもしれない（参考：http://qiita.com/wakaba@github/items/707d72f97f2862cd8000 ） target="_blank" で開いたWindowは、 window.opener を使って親のWindowを操作することができる。つまりtarget="_blank"で開いたサイトで任意の操作ができてしまうことになるけど、Same origin の仕組みが働く。ので、Same originではない場
サーバからクライアントに送信する技術 - WebSocketを中心に - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Webでのプッシュ技術 HTTPはクライアント（ブラウザ）からリクエストしてサーバからレスポンスが返る一問一答型のプロトコルなので、基本的にはサーバ側からブラウザに新着情報をリアルタイムで通知（プッシュ）できるようにはできていません。 しかしそれでもプッシュをしたいという場合にどうするかという話が出てきます。やり方には以下のようなものがあります。 ポーリング クライアントからサーバに定期的に新着を問い合わせるようにします。 最も原始的かつ確実なやり方。欠点は、最大でポーリング間隔の分だけ通知が遅延しうることです。 ロングポーリング（“C
WebBluetoothAPIを使ってブラウザからBLEデバイスを操作する - Qiita
WebBluetoothAPI を利用すれば、ブラウザからBluetoothLE(BEL)デバイスを操作できるようになります。 従来であれば、BLEデバイスを操作するには iOS や Android のアプリケーションを用意する必要がありましたが、 このAPIを利用すれば、javascriptのみでブラウザからBLEデバイスを操作できるようになります。 基本的には下記の5ステップで実装をしていきます。 BLEデバイスをスキャンして探す BLEデバイスに接続する BLEデバイスの Service オブジェクトを取得する Service オブジェクトから Characteristic オブジェクトを取得する Characteristic オブジェクトのRead/Write でデバイスを制御する 上記5ステップと、接続の解除、デバイスからの通知の受け取り、の7項目について説明していきます。 なお
GitHubのmasterブランチをWebページとして公開する手順（GitHub Pages） - Qiita
GitHubでは、サーバーを自前で準備しなくてもWebページを公開できる「GitHub Pages」という機能があります。これまでは、gh-pagesという別ブランチを作成して、そこにソースコードをプッシュする必要がありました。しかし、本日(2016/08/18)実装された新機能により、masterブランチのみでWebページを公開できるようになりました。 本エントリーでは、具体的な設定手順を紹介します。 手順 masterブランチにて、「docs」フォルダーを作成します。このフォルダーに公開したいWebページのソースコードを入れます。 masterブランチをプッシュします。 GitHubのリポジトリページ上で、[Setting]→[Pages]に移動します。 [Source]の箇所から、「Branch: main」、「/docs」フォルダーを指定します。 [Save]を押すと、下図の赤枠部
Firebaseを用いて5分でセキュアなWebサイトを公開する - Qiita
はじめに mBaaSとして既に一つの地位を築いているともいえるFirebaseですが、実際に利用する機械がないと、ただのデータベースなどの、バックエンド周りのみのサービス提供と思いがちではないでしょうか。 実はFirebaseは、SSL対応した静的Webサイトを簡単に公開できるホスティングサービスも提供しています。 GitHub Pagesなど、SSLに対応した静的Webサイトをホスティングできるサービスは他にも存在していますが、オープンソースにする必要もなく、Firebaseの他のサービスとの親和性も高いため、サーバーレスのちょっとしたWebサービスの公開も可能という具合で、何かと取り回しが良い印象をうけました。 今回はそんなFirebaseのホスティングサービスを使って、Webサイトを公開してみたいと思います。 おおよそ5分もあればできる簡単な手順ですが、古いFirebaseの資料も多
AWSのALBがリリースされたので触ってnginxの機能の代わりになるか試してみた - Qiita
概要 AWSでALB（Application Load Balancer）が 2016/8/11にリリースされたので試してみた AWS Application Load Balancer 設定方法・ELBとの違い 設定方法・ELB（Elastic Load Balancer）との違いは以下のblogなどで紹介されているので割愛します 【新機能】新しいロードバランサー Application Load Balancer（ALB）が発表されました AWS Application Load Balancer がきたので試しに作ってみた 概要 出来るようになったこと パスベースルーティング：URLのパスに基いてルーティングが可能です。 複数ポートの登録：1つのインスタンスに複数ポートを登録することが可能です。 コンテナアプリケーションのサポート：ECSはタスクスケジュールので未使用のポートを使用し
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
BotkitでSlackのSlash Commandを作る - Qiita
あけましておめでとうございます． BotkitでSlash Commandを作れることに気付いたので試してみました． (Slash Commandは /topic のようなメッセージのことです．) Slash Commands | Slack Using slash commands - Slack Help Center Outgoing Webhooks and Slash commands | Botkit Slash Commandを作るには，ドメインか固定IPを持っている必要があります． 今回はお試しなので，HerokuのFree Planを使うことにしました． Herokuでアプリを作る 事前にHerokuの登録と，Heroku Toolbeltのインストールが必要です． Getting Started with Node.js on Heroku | Heroku Dev C
PHP 7.1からデフォルトで有効になる「Zend Signals」とは何か - Qiita
下記PHP Internals MLでの議論によれば、今後「Zend Signals」がデフォルトで有効になる予定です。少なくとも7.1.0beta2時点では有効になっており、特に問題が見つからなければこのままリリースされるはずです。 [PHP-DEV] Enable Zend Signals by Default で、Zend Signalsって何？ 「Zend Signals」または「Zend Signal Handling」というのはZend Engineの内部的なシグナルハンドリングの仕組みです。PHP言語の世界に新たな関数を追加するようなものではありません。 この有効・無効はphpinfo()で確認することができます。 先ほど紹介したML上での議論によれば、ざっくり次のような話のようです（かなり端折ってます）。 Dmitry「Zend Signalsを有効にすればOPcacheの
project毎のnpmコマンドをいい感じにするnpmrc & config達 - Qiita
npmrcのドキュメントを読みなおしていたら、.npmrcは/path/to/my/project/.npmrcのようにプロジェクト毎に配置することが出来る事に気づいて、ちょっと使ってみたら便利だった。 globalやhomeディレクトリへの設定を前提としたnpm configの記事は結構あるが、プロジェクト毎でnpm-configについて書かれている記事があんまり無かったのでまとめてみる。 npm-configの何が良いのか？ project毎に出来ると何が良いのか？ npm-configの設定をすると、色々コマンドを省略出来たりして良い事がある。 (参考:2016年版 Node.jsで幸せになれる10の習慣) npmrcやnpm-configは、個人開発用であれば、$HOME/.npmrcへの設定だったりnpm config setでの設定で十分。 また、npm registryに登録
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでのサロゲートペア文字列のメモ - Qiita
