サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
jslob.repop.jp
先日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のドキ
・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
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 設置しました
前記事: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をjavaScriptで弄ぶのに良さそうなライブラリを調べてみる 結構ありますね Snap.svgSnap.svg デモページ メイン所、情報も多い Raphael.jsRaphael.js デモハトップページににある 日本でも使っている人も割りといそう jQueryライクな記述、古いブラウザもサポートしてるっぽい
作成した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
.animate()のオプションなど .animate(properties , duration , easing , complete); properties(プロパティ) アニメーションが向かうCSSのプロパティと値のオブジェクト duration アニメーションの実行時間 デフォルトは400 easing(イージング) linearまたがswing(JqueryUIや他のプラグインで追加可能) デフォルトはswing complete アニメーションが完了したら呼び出す関数 参考: .scrollTop() | jQuery .animate() | jQuery
前回の記事、localStorageを使ってユーザー設定を保存するサンプルと同じ様な内容ですがコンテンツ側でユーザーを判別するのにユーザーIDをlocalStorageに保存する簡単なサンプルです 個人作成のWEBゲームや知られていないコンテンツなどなど 最初からアカウント登録やメールアドレス登録を必要とするには、よほど魅力的でないと利用してもらえない可能性があります 僕も結構そうで、最初からアカウント登録が必要だったりすると利用しなかったり、面白そうなゲームでもそっと閉じちゃう事が多いですね それでもユーザーの管理や保存データが必要な場合は、最初は自動発行したユーザーIDと認証コードを渡してコンテンツ利用やゲームで遊んで貰う方法があります 最終的には認証コードをサーバー側で発行・チェックしたりデータベースを活用しないと実用的ではありませんが、その手前までのサンプルになればな、と
表示設定やニックネームぐらいのユーザーデータならlocalStorageを使ってそのまま保存するのも良いですよね サンプル用なのだからlocalStorageではなくsessionStorageで書けばStorage削除の部分とか無くても良かったな思いましたが、、 参考:https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage 検索エンジン(ボット)の事などを考えると、アクセスしただけではStorageに保存しないようにして、ユーザーアクションによって保存される風にした方が良いかと 何らかのオンとオフの設定を保存しているだけの簡単なサンプルです
Githubで有名なGithub社の無料テキストエディタ「Atom」 使い勝手や機能面、インターフェースと触ってみると人気なのがわかりますよね https://atom.io/ 本体のインストールは簡単ですので説明は省きます 最初は開始画面に色々出てきて困惑するかもですが、まず「Install a Package」でインターフェースの日本語化パッケージをインストールすると良いかと思います メニューを日本語にする「japanese-menu」 Welcome Guideタブを閉じてしまっていても左上の「File」(ファイル)から「setting」(環境設定)へと進むと現れた項目の下の方に「Install」があるのでそこからパッケージを検索・インストールできます 検索窓に「Japanese」とでも入力すれば 関連するパッケージがリストアップされるので「japanese-menu」を選択してイン
Firefoxで有名なmozilla製のWEBエディタ「Thimble」 ひとつのプロジェクトで複数のHTMLファイル、CSSファイル、javaScriptファイルを手軽に追加できますね HTMLファイルはヘッダーから記述できて、それぞれのファイル名も編集可能 これは、完成後そのままサーバーにアップして使えるレベルなのか テスト用ではなく大きなコンテンツまでここで作れちゃう感じですね ここまで出来るならPHPにも対応していればな、と思うところなのですが調べてみたところフォーラムにいくつか質問がありましたね https://github.com/mozilla/thimble.mozilla.org/issues/1583 私たちはクライアントサイドのHTML、JS、CSSなどとサーバーサイドのコードに焦点を当てています。他にも、サーバサイドのスクリプタを行うことを可能にする同様のツールがあ
「JSFiddle」の機能や使い勝手は「codepen」と非常によく似ていますね アカウント登録なくでも利用できますが、メールアドレスだけで各機能を使える様になるみたいです JSFiddleの編集画面の基本メニューはこちら Run:スクリプト実行 Update:保存 Fork:共有(自身のコードだと複製に近い) Tidy:コード整形 Collaborate:コラボ(同時に複数の人と編集できる) Embed:埋め込みコード出力 Tidyによるコード整形は僕の様な汚い書き方しか出来ない人間にはお手軽に整形できて地味に嬉しい機能ですね 「codepen」の埋め込みコードと比較してみます codepen JSFiddle どうやらcodepenの様にソースコードタブとビュータブを同時に表示は出来ないのかも知れません それでも、読み込み速度はJSFiddleの方が早そうですしソースコードは見やすいで
Javascriptの事を調べているとソースコードをcodepenで書いて埋め込んでいる記事・ページが結構ありますね 見た目もデザイン的で訪問者としても結構わかりやすく使いやすい感じでした https://codepen.io/ codepenの始め方試しにコードを書いてリアルタイムでの実行結果を表示する事だけなら登録なしでも可能です ブログ記事に埋め込む等の機能を使うには無料アカウント登録が必要ですがメールアドレスとパスワード、ユーザー名の登録だけでOKでした Gmailで登録してしばらく経ちますが届いたのはウェルカムメール2通だけでスパム的なメールはなさそうです codepenの簡単な使い方 作成画面はレスポンシブです コードタイトルはデフォルトではコードURLになってますが、編集可能で日本語もOK コンソールログも表示出来るのでデバッグ確認にも使えます codepenのブログへの埋め
aタグやbuttonでのonClickイベントではなく、画像やDIV、pなどの要素にクリックイベントを実装する idやclassにイベントトリガーを指定します ピュアなJavaScriptやアロー関数での実装ならこちらをどうぞ 要素クリックをトリガーにしたイベント 画像にクリックイベントを実装する
配列の宣言・定義new Array()配列を変数に宣言・定義する1 変数名 = new Array(配列数); new Array()配列を変数に宣言・定義する2 変数名 = new Array(値,値,値…); []を使って配列を変数に宣言・定義する1 変数名 = []; []を使って配列を変数に宣言・定義する2 変数名 = [値,値,値…]; 配列に値(要素)を追加する配列にキーを指定して値(要素)を追加する 未定義のキーでない場合上書きとなります 変数名[Key] = 値; unshift()を使って配列の先頭に新しく値(要素)を追加する 変数名.unshift(値); push()を使って配列の最後に新しく値(要素)を追加する 変数名.push(値); 配列の値(要素)を削除と初期化deleteによる値(要素)の削除 delete 変数名[Key]; //undefinedが代入さ
JavaScriptやJqueryだけでゲームや凝ったコンテンツを作ろうとすると、大変なのがアニメーション部分 要素をキレイに動かしたりするにはアニメーションに特化した拡張ライブラリを使うと楽になりますね ANIME.JSの他にもGreenSockやVelocity.jsなどがあります またJqueryにもアニメーション処理を楽にするスクリプトは備わっていて、Velocity.jsはJqueryと互換性があります ANIME.JSはJqueryなしでも単独で動きますが、ソースコードに互換性はありません しかし、コードをわかりやすく軽量化されてて軽いのが現在人気の秘密の様ですね 【ANIME.JS】アニメーショに利用するパラメータ一覧 | なるほど。 【ANIME.JS】CSSアニメーションの簡単なサンプルコード | なるほど。 ANIME.JSは以下からダウンロードできます(github)
ドットキャラクターの様に小さなピクセルで描かれた画像をブラウザで表示すると、アンチェリアスがかかりぼやけてしまう Unityではピクセルパーフェクトをオンにするとドットをそもまま表示してくれる機能がありますね javascriptだけでドットキャラのゲームを作る場合はCSSでimage-renderingを指定すると切り替える事が出来ます 要素単位でもbodyに記述してもいいですね
一番しっくりきたハンバーガーメニューサンプル(Jquery) ハンバーガーメニューはCSSだけで、プラグインでなどなど色々紹介されてますね 好みとしては、なんだかんだシンプルな記述でスムーズな動きをしてくれるJqueryのslideToggle()がやっぱりいいですね コードが簡潔に済むので気楽にメニューをサイトに導入できるのが... 要素のclass名を取得・追加・変更・削除するサンプル 動的なコンテンツを作る際は既に存在する要素にclass名を追加したり削除したい事が結構ありますね 要素のclass名を取得する javaScript javaScriptではclassNameを使ってclass名を取得します let target = document... function関数に引数を付与して実行するサンプル function関数に引数を付与するのは、受けてのfunction名()内に
このページを最初にブックマークしてみませんか?
『JavaScriptラボ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く