ブラウザプッシュ通知とユーザー個別に内容を送信する実装方法 in GAMY - Qiita
ブラウザプッシュ通知が流行りだした Webプッシュ、ブラウザプッシュなどと呼ばれる機能はブラウザのPush APIを使い実装され、現在ChromeとFirefoxで使えるようになっています。 毎週のように新たなブラウザプッシュが送れるサービスが登場していますが、基本的には一律ですべてのユーザーに送信するものが多いように感じます。 その中でもFaceBookはユーザー個別にネイティブアプリと同様の内容でブラウザにプッシュ通知を送っています。 ユーザー個別で通知内容をカスタマイズしたいのと、 その辺のサービスを使ってロックインされると困るので、FaceBookのコードを参考にしつつ自分で実装してみました。 ChromeとFirefoxで微妙にPushの送り方が違うので、今回はGCM（Google Cloud Messaging）用の解説です。 Pushを送ってみるとこんな感じ Service
OAuth 2.0 + OpenID Connect のフルスクラッチ実装者が知見を語る
はじめに この文書では、OAuth 2.0 + OpenID Connect サーバーをゼロから一人で実装した開発者（私）が、得られた知見について書いていきます。基本的には「実装時に考慮すべき点」を延々と述べることになります。 そのため、この文書は、「素早く OAuth 2.0 + OpenID Connect サーバーを立てる方法」を探している方が読む類のものではありません。そのような情報をお求めの方は、「Authlete を使って超高速で OAuth 2.0 & Web API サーバーを立てる」を参照してください。そちらには、「何もない状態から認可サーバーとリソースサーバーを立て、アクセストークンの発行を受けて Web API をたたいて結果を得る」という作業を、所要時間 5 ～ 10 分でおこなう方法が紹介されています。 文書のバイアスについて 私は、OAuth 2.0 + Ope
【第2弾】少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTML・CSSの全
oauth2_proxyとNginxのauth_requestを組み合わせると便利 - lamanotrama's diary
oauth2_proxy、便利でググると導入手順も結構出てくるのだけど、今回紹介するのは（環境によっては）さらに便利に使えるナウい方法です。 なにをするのかというとREAMDEに書いてあります。 Configuring for use with the Nginx auth_request directive The Nginx auth_request directive allows Nginx to authenticate requests via the oauth2_proxy's /auth endpoint, which only returns a 202 Accepted response or a 401 Unauthorized response without proxying the request through. For example: サンプル設定もある
Web制作時に備えておきたい便利なチートシートのまとめ -Bootstrap, WordPress, CSS3, Git, SublimeTextなど
BootstrapやFoundationなど人気のフレームワーク、CSSの各フレームワークの比較、WordPressのテーマ作成やコピペで利用できるコード集、Gitのコマンドやフロー、iOS/Androidのグラフィックガイドライン、ChromeのデベロッパーツールやSublimeTextやEmmetなど、Web制作に役立つ便利なチートシートを紹介します。 紹介している主なチートシート Bootstrap 3, Foundation 5のチーシート CSSの各フレームワークの比較 WordPressのチートシート iOS, Androidのデザイン用のチートシート jQueryのチートシート HTML5, CSS3のチートシート ファビコンのチートシート 検索エンジン最適化2015年版のチートシート Chromeのデベロッパーツールのチートシート SublimeText, Emmetのチー
Basscss·軽量、モジュール化されたCSSツールキット MOONGIFT
スタイルシートのフレームワークは数多く存在しますが、がちがちなものは影響範囲が大きいためにプロダクトベースでは導入が困難です。もっと軽量でカスタマイズが容易なものを使いたいと思うでしょう。 そこで紹介したいのがBasscssです。軽量なコレクションを多数そろえたモジュールベースのCSSツールキットになります。 Basscssの使い方 Basscssは3.73KB、24のモジュール、339のルール、592のデコレーションを備えたツールキットです。影響を極力控えているのが特徴になります。デモサイトを見ていきます。 トップページ。左側にモジュールおよび主な機能が掲載されています。 ベースフォーム。 基本のボタン。 テーブル。 タイポグラフィ。 フロートなど。 文字装飾。class名が単純です。 ボタンとメニュー。 ボタンサイズ。 グリッド。 カラー。基本はこの色合いです。 フォーム×カラー。 ダ
プロが選ぶ！WordPressプラグインおすすめ50選【保存版】
WordPressには世界中の開発者が制作した機能を自由に組み込むことができる「プラグイン」が存在します。プラグインを上手く活用することが、WordPressの魅力を最大限に引き出すポイントです。 そこで今回は、私がWordPressで様々な種類のWebサイトを制作してきた経験から、役立つプラグインを厳選してご紹介します。いずれも無料でも使用できるので、ぜひ活用してみてください。 WordPressプラグインとは WordPressプラグインとは、WordPressの機能を拡張させるための仕組み（ツール、モジュール、パーツのようなもの）です。 WordPressの本体は、ユーザーの様々なニーズに柔軟に対応できるように基本的でコアな部分のみで設計されています。WordPressプラグインを使うことで、ニーズに合わせた様々な機能を持ったサイトを構築することができます。 参考：WordPress
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
CSSパフォーマンスツールを使いこなす - ワザノバ | wazanova
https://www.youtube.com/watch?v=FEs2jgZBaQA 1 comment | 1 point | by WazanovaNews ■ comment by Jshiike | 約1時間前 CSSconf EU 2014におけるGoogleのAddy Osmaniの講演です。CSSのパフォーマンス向上に役立つツールを40個+ 紹介してくれてます。 背景 パフォーマンスの最適化において、 ベースラインとしてやること 最小化（minification） 結合（concatenation） 画像の最適化 圧縮（GZip, Zopfli） 非同期スクリプト キャッシュの利用 WOFF2フォント CSSスプライトを使う リダイレクトをしないこと スピードアップ パフォーマンス向上に重要なCSSのインライン化 レンダリングをブロックしないように、急ぎでないアセットの取
【2017最新版】ワードプレスで入れておくべきプラグイン22選！
ワードプレスを最大限活用するために、必要不可欠とも言えるプラグイン。 ただ、私もそうでしたが何を入れたら良いのかっていうは、最初はなかなかわからないんじゃないでしょうか。 ということで今回は、「【2017最新版】ワードプレスで入れておくべきプラグイン21選！」と題し、最初にとりあえずコレを入れておけば間違いないというプラグインを一挙にご紹介します。 一応数を振ってはいますが優先順位ではありませんので、漏れなく全部入れてくださいね。 SEO対策プラグイン １．All In One SEO Pack SEOの最適化をしてくれます。 有効化した後に設定が必要です。 有効活用しようと思うとかなり細かい設定が必要になりますので、このサイトで関連する記事を全て載せておきます。 フェイスブックやツイッターは特に設定しなくても良いですが、サイトでの集客やビジネスを考えているのであれば、設定しておくことをオ
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
WordPress：ログイン画面をオリジナルにカスタマイズする方法 - NxWorld
WordPressのログイン画面のカスタマイズは過去にもロゴを変更する方法など書いたことがありますが、いろいろ試していたらまた幾つか覚えておきたいことが出てきたりしたので、既出しているものも含めてWordPressのログイン画面をオリジナルにカスタマイズする方法をまとめました。 October 01, 2020 追記 ここで紹介している内容は、WordPress Ver 3.9.0で試したものになります。 内容によっては現バージョンでは非推奨のタグが使用されていたり、フック名が変更されている可能性がありますのでご注意ください。 デフォルトのログイン画面 イメージはWordPressのデフォルトのログイン画面をキャプチャしたもので、これをfunctions.phpを使ってオリジナルのログイン画面にしていきます。 カスタマイズ後のログイン画面 イメージは簡単にですが実際にここでまとめているカス
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
開発者向けプラグイン 25＋
WordPressには便利なプラグインが沢山あり、それらを使うことであまり知識がない方でも様々な機能を実装して自分好みのブログやサイトを作ることができます。 ソーシャルボタンやページネーションを簡単に設置できたり、関連記事や人気記事を手軽に表示できるといったような見栄えを変えたりするユーザー向け（表向き）の機能を実装するタイプのプラグインはよく見かけるのでご存じの方も多いと思いますが、WordPressにはこういったプラグインだけでなく、何かと捗る開発者向けの裏方タイプのプラグインも便利なものが数多くあるので、それらの中から自分が覚えておいて損はないと思うものを紹介します。 全部のプラグインを普段の開発時に使用しているというわけではありませんが、以下で紹介しているものはいずれも個人的に開発時に便利だと思ったプラグインです。 有名なデバッグ系プラグインをはじめ、テンプレートファイルやIDを容
クライアントよ、お前の依頼の大変さを思い知れ！これが「デザイン修正」だ！
昨日紹介したデザインができるまでの過程をまとめたイラストが多くの反響をもらった。これを機にデザイナーに優しくしよう！ 元々@nerichichiさんという方が描いたイラストらしいのだが、その方の別の作品でクライアントが当たり前のように言ってくるデザイン修正がどれだけデザイナーにとって大変なのかを描いた漫画があったので、紹介する！これも物凄く納得感のあるイラストだ…。 密にコミュニケーションを取り、最高のアウトプットを これを見るだけでデザイン修正の大変さに納得すると同時に今後自分も発注する側として気をつけよう、と改めて心に誓った。 【img via 練乳の投稿画像】 クライアントによる大量かつ細かい要望に応えつつも複数回に渡る校正。最後にできあがったものは「絶妙なバランス」を持って成り立っているのを、根本的な要素に対して当たり前のようにデザイン修正を求めるクライアント。 もしあなたがデザイ
nginx で gzip_static と gunzip を使ってストレージを節約する - 酒日記 はてな支店
一月ほど前に 社内Gyazoの画像をAmazon S3に逃がしてスケーラブルに運用する - 酒日記 はてな支店 というエントリを書いて一段落と思いきや、そのサーバには社内向けの nopaste アプリも同居しており、気がつけばテキストファイルが10GB以上積もっていたのでした… 社内 nopaste アプリの実装はDBなどを使用せず単にテキストファイルを保存しているだけだったので、ファイルを gzip して nginx の http_gzip_static_module を使って配信したらディスクを節約できていいんじゃないか、と思いついたのですが、Accept-Encoding: gzip でないクライアントからアクセスすると 404 になってしまうので圧縮前のファイルが消せない。 今時ブラウザで対応していないものは少ないとはいえ、curlとか各種言語のHTTPクライアントでアクセスする場
GoogleMapを使って場所の選択や追加、削除、検索を可能にするjQueryプラグイン「mappy.js」:phpspot開発日誌
mappy.js - jQuery plug-in for Google Maps and Places API integration GoogleMapを使って場所の選択や追加、削除、検索を可能にするjQueryプラグイン「mappy.js」 利用者がマップに情報を追加したり、追加された情報を選択したり、検索したりするUIが作れます 地図情報と絡めたようなサービスを作る際に活用できそうです。 関連エントリ Googleマップを好みの色にカスタマイズできるスタイルまとめ「Snazzy Maps」 素早く簡単にGoogleマップを導入できるjQueryプラグイン「initmap.js」 2Dの地図をリアルな3Dにして3Dマップを作れるPhotoshopアクション
Webを支えるプロトコル - ASnoKaze blog
若者のプロトコル離れが叫ばれて久しいが、最近プロトコルは非常にホットな分野である。 目まぐるしく進化するWebに合わせ、プロトコルの世界も着実に進化している。 今までブラウザでは出来なかった事が出来るようになり、Webサービスをより安全に使えるようになった。 そしてWebのパフォーマンスを大きく改善するためにHTTP2.0も議論されている。 Webを支えるプロトコルとして、大きく分けて３つに分けられるかと思う（私の勝手なイメージ、正確な図ではありません） Webアプリケーション ブラウザが今まで出来なかったことを出来るようにしたり、Webアプリケーションの認証・認可などの機能を提供するプロトコルなど。JSやサーバサイドプログラミングで利用したりする。 WebSocket (http://tools.ietf.org/html/rfc6455) ブラウザとWebサーバの間でソケット通信を行う
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
