OneSignalでWEBサイトにPush通知を実装するサンプル（SDK編）
先日Push7のAPIを試したばかりですが、5000送信の上限とユーザーの現状はグループ別け・送信振り分けが出来ない難点から、他も調べたところOne Signalが良さそうだったのでお試し導入してみます One Signal https://onesignal.com/ コントロールパネルのドキュメント https://documentation.onesignal.com/docs/dashboard WEB Push SDKのドキュメント https://documentation.onesignal.com/docs/web-push-sdk APIのドキュメント https://documentation.onesignal.com/reference#create-notification これほど丁寧なドキュメントには滅多に出会えないだろうってくらい、 OneSignalのドキ
Service WorkerをWEBサイトに最小構成で導入してみたサンプル
・WEB push通知 ・バックグラウンド処理 ・オフライン動作 ・PWA（Progressive Web Apps）化 などなど、その初めの一歩としてService Workerを最小構成で導入してみた 全て同じディレクトリに配置 ├ index.html ├ main.js └ sw.js index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Service Worker Test</title> <script src="main.js"></scri
HTTPやHTTPSの判別サンプル
location.protocolにてページのprotocol情報を取得 location.protocolはhttp:やhttps:で返す var protocol = location.protocol; 判別 var protocol = location.protocol; if(protocol == 'http:'){ //httpの場合の処理 }else if(protocol == 'https:'){ //httpsの場合の処理 } 処理の実行結果
新しい記事のはてブ数を取得表示する「はてブ！カウンテラ」更新
WEBツールラボという作ったツール置き場に「はてブ！カウンテラ」ってのを設置しました はてブ！カウンテラhttps://repop.jp/tools/hatebu/ フォームにURL、またはRSS10、2.0、atomフィードを入力すれば新しい記事から20件までの「はてブ数」を取得して表示します はてなブックマークAPIを利用しています chrome、firefox、egeにて動作確認 **********更新履歴************ 2017/11/13 トップページのurlからも機能する様にしました 2017/11/13 調べたURLはキャッシュしてボタン表示する様にしました 近いうちにログを整理できるようにしたいと思います 2017/11/13 設置しました
Push7のAPIを利用してPush通知を送信してみるサンプル|JavaScriptラボ
前記事：WEBサイトにPush7を簡単に使ってみる Push7でのpush通知送信はコントロ－ルパネルからの送信、RSS更新による送信、APIを介した送信とあります ブログの更新情報であれば、RSSクローラーの巡回ペースは30分との事なのでRSSを設定した方が楽ですね RSSを持たないWEBサイトの更新情報や送信の自動化、チャットなどユーザー側が送信処理を行える様にしたい場合はAPIの利用が可能で、Push7のAPIは一部は有料プランのみになりますがPush通知送信の部分は無料プランでも利用できます https://push7.jp/docs/development/api アプリケーション情報を取得するAPIはURLパラメータでのクエリで取得できますが、Push送信はPOSTのみ・パラメータはjsonデータを利用します アプリケーションの情報を取得するAPI https://api.pu
SVGエディタ「Boxy SVG」ショートカットや使い方メモ
作成したSVGファイル 作成したSVGファイルのコード <?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 113 118" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com"> <defs> <style id="bx-google-fonts">@import url(https://fonts.googleapis.com/css?family=Basic:400|Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic);</style> <pattern id="pattern-0" x="0" y="0" widt
localStorageにユーザーIDを保存するサンプル
前回の記事、localStorageを使ってユーザー設定を保存するサンプルと同じ様な内容ですがコンテンツ側でユーザーを判別するのにユーザーIDをlocalStorageに保存する簡単なサンプルです 個人作成のWEBゲームや知られていないコンテンツなどなど 最初からアカウント登録やメールアドレス登録を必要とするには、よほど魅力的でないと利用してもらえない可能性があります 僕も結構そうで、最初からアカウント登録が必要だったりすると利用しなかったり、面白そうなゲームでもそっと閉じちゃう事が多いですね それでもユーザーの管理や保存データが必要な場合は、最初は自動発行したユーザーIDと認証コードを渡してコンテンツ利用やゲームで遊んで貰う方法があります 最終的には認証コードをサーバー側で発行・チェックしたりデータベースを活用しないと実用的ではありませんが、その手前までのサンプルになればな、と
localStorageを使ってユーザー設定を保存するサンプル
表示設定やニックネームぐらいのユーザーデータならlocalStorageを使ってそのまま保存するのも良いですよね サンプル用なのだからlocalStorageではなくsessionStorageで書けばStorage削除の部分とか無くても良かったな思いましたが、、 参考：https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage 検索エンジン（ボット）の事などを考えると、アクセスしただけではStorageに保存しないようにして、ユーザーアクションによって保存される風にした方が良いかと 何らかのオンとオフの設定を保存しているだけの簡単なサンプルです
テキストエディタ「Atom」、日本語メニュー化とプレビュー表示
Githubで有名なGithub社の無料テキストエディタ「Atom」 使い勝手や機能面、インターフェースと触ってみると人気なのがわかりますよね https://atom.io/ 本体のインストールは簡単ですので説明は省きます 最初は開始画面に色々出てきて困惑するかもですが、まず「Install a Package」でインターフェースの日本語化パッケージをインストールすると良いかと思います メニューを日本語にする「japanese-menu」 Welcome Guideタブを閉じてしまっていても左上の「File」（ファイル）から「setting」（環境設定）へと進むと現れた項目の下の方に「Install」があるのでそこからパッケージを検索・インストールできます 検索窓に「Japanese」とでも入力すれば 関連するパッケージがリストアップされるので「japanese-menu」を選択してイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
一番しっくりきたハンバーガーメニューサンプル（Jquery）
link()で文字列からリンクタグを生成するサンプル
フェードアウトからフェードインを繋げて実行するサンプル
$.when().done()による同期処理のサンプル
lengthで文字列の長さを取得するサンプル
「Atom」からさくらサーバーにFTP接続してみた
location.reload()でページの再読込みサンプル
スムーズなページ内ジャンプの実装サンプル
ランダムな文字列を生成するサンプルコード
ON/OFFボタンの画像切り替え処理サンプル
JqueryのslideToggle()で作った簡単なスライドパネルのサンプル