TechAcademy [テックアカデミー]はじめての副業コース Web制作の副業に必要なスキルが学べる 確実にお仕事をはじめられる5万円案件保証手厚いサポートで副業を最短でスタート
![TechAcademy [テックアカデミー]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c295330d4f51d6ba69336c6835b47fb606bfd53/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Ftechacademy.jp%2F_nuxt%2Fogp%2Fog-image.jpg)
ブログのRSSをCloud Functionsを使ってJSONに変換してajaxで使う - GAミント至上主義
yagish履歴書で今後のアップデートのお知らせ用にはてなブログProを利用しようと考えている。 rirekisho.yagish.jp （関係ないけどはてブ800超えてうれしい） もちろんRSSがあるので、これをVue.jsアプリ内で読み込んでもいい。 でも、RSSとかXMLとかを扱うとなると、クライアント側にそれだけのためにライブラリがいくつも必要になる。 せっかくLighthouse対策でjsを減らすのがんばったのに嫌。 uyamazak.hatenablog.com そこでCloud Functionsを使って、jsonに変換して返せないか考えた。 そうすれば、もともと使っているaxiosだけで済むし、コードも減るし、使いやすい。 まず、RSSをJSONに変換するのはそのまんまのライブラリがあった。 すごいシンプルで言うことない。 www.npmjs.com 次にajaxで読み込む
Chart.js のチャートを格段に綺麗に見せるカラーパレットプラグイン - nagix
動的なチャートを作って Web ページに貼り付けるのに Chart.js はとても便利ですが、難点は1つずつ色の指定をしなければいけないところです。例えばこんな感じで棒グラフを作るとして、Dataset ごとに背景色を指定する必要があります（色を指定しないとグレー一色になってしまう）。 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script> <canvas id="myChart"></canvas> <script type="text/javascript"> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Ch
webpack 4 入門 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記
JavaScriptで配列やオブジェクトをループする良い方法を真剣に検討してみた - Qiita
はじめに JavaScriptで配列やオブジェクトをループする時どのように書きますか？ シンプルにfor文？ Array.forEachを使う方法もありますね。 あるいはES6から取り入れられたfor-of文でしょうか？ ただこうしたいくつかの方法がある中、僕が以前思ったのは 「で、結局何が良いんだってばよ？？(￣へ￣|||)」ということです 単なる文法の違いでどれでも良いのか？それともリスクやパフォーマンスがそれぞれ違ったりするだろうか・・？ その疑問の答えを出すために、ループの各手法を主にリスク・パフォーマンスの面で比較・調査して「配列やオブジェクトをループする良い方法」の結論を出してみました。 もし良ければ参考にしてみてください。 どんなループ方法があるか まず配列とオブジェクトそれぞれでどんなループ方法があるかを挙げます。 ※jQueryやUnderscore.jsでのループ方法は
19行のコードで簡単に作成できるJavaScriptカウントダウンタイマー
カウントダウンタイマーを簡単に作成 JavaScriptカウントダウンタイマーは本格的に作ると計算が多く、少し長めのコードを書く必要がある。 しかし、getUTCDate()などを利用すれば一般的なカウントダウンタイマーよりも簡単に作成することができる。 作成手順 まずDAYSTARTとDAYENDの変数に開始日時および終了日時を入れる。INTERVAL = 1000の変数は更新時間(1秒)として使用している。 サンプルではDAYSTARTがnew Date('2017/03/28 00:00:00')になっているが通常のタイマーであればnew Date()を指定して現在の時刻を取得すれば良い。 以上の変数を指定したらnew Date(+DAYEND - DAYSTART + INTERVAL)で残り時間を計算する。 var DAYSTART = new Date('2017/03/28
Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita
Vue.jsはそのまま使ってもよいですが「自分(プロジェクト)に合ったフレームワーク」を見つけるのにも向いています。 これは、後発フレームワークだけあり各フレームワークの特徴を意識した設計がなされているためです。他の著名なフレームワークとの特徴を比較した文書もあるので、こちらをチェックしながら導入を検討するとよいと思います。 そのため、以下はVue.jsの紹介と他フレームワーク(Knockout.js と Angular)へのステップという2セクションに分けて紹介していきたいと思います。 JavaScriptフレームワークの導入を行いたいがこの選択は慎重にいきたい、という状況であれば最初にVue.jsを試金石としてみて、効果的と感じられる機能からAngularやKnockout.jsに流れていくというのは十分ありだと思います。 2016/06: Vue.jsの1.x系に合わせて記述・サンプ
マウスポインターが要素に出入りした時の処理を実装するには？（mouseover、mouseout、mouseenter、mouseleave、hover）
違いが分かりにくい「mouseover／mouseout」と「mouseenter／mouseleave」イベントの使い分け方法を解説。また、これらに関連する「hover」イベントメソッドについても説明する。 ← 前回 連載 INDEX 次回 → 別稿「イベントに応じて処理を実行するには？」の表でも触れたように、jQueryではさまざまな＜イベント名＞メソッドが標準で用意されています。そのうち、ほとんどが直感的に理解できるものばかりですが、mouseover／mouseoutとmouseenter／mouseleaveの違いは一見して分かりにくいものです。 本稿では、具体的なサンプルの中で、両者の違いを示すと共に、マウスの出入りを簡単に検出するhoverメソッドについても触れます。 mouseover／mouseoutとmouseenter／mouseleaveイベントの基本 まずは、具体
【メモ】jQueryのPOST通信エラー
jQueryのajax関数で送信したときのエラーをハンドリングすると、 textStatus : error errorThrown.message: 空 となって原因の特定に時間が掛かってしまいましたが、解決後に症状と原因を考えて列挙するとこんな感じ。 スクリプトの流れ フォームを生成 buttonをクリックし、イベントハンドラでAjax処理 引数を付加してPOST通信 サーバ側でDB処理を行う 成功したらページを再読込み サンプルコード $.ajax({ type : 'post', url : 'sample.php', data : { 'id' : 'sampleID' } }).done(function(data, textStatus, jqXHR) { // ページを再読み込み window.location.reload(true); }).fail(function(
【メモ】タグに独自属性を設定してjQueryで取得する
独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP 独自データ属性は、名前空間に属さない属性で、その名前は文字列 “data-” で始まり、ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。 （中略） すべての HTML 要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。 使用例 注意 data()は、もともとは要素にデータを付与しそれを取得するための関数で、HTMLのパースとは関係がありません。付与されたデータはjQueryのキャッシュデータとして保存されます。一方で属性を取得する関数attr()の方は、キャッシュは利用をせずHTMLを読みに行くので、この2つを同時に使うと混乱します。具体的には、atr()で更新したデータがdata()で取得出来ないなど。 $('#use
楽天市場の商品ページにPHPでの処理結果を表示させる
色々制約がある楽天市場の商品ページ。通常だとJavaScriptも使えませんが、店舗用のサーバサービスである「楽天GOLD」を使うとJavaScriptが使えます。また「楽天GOLD」のページであれば、楽天市場のページにiframeを使って埋め込むことも可能です。 楽天GOLDでは基本的にhtmlしか使えないので、基本的にJavaScriptでの処理になります。それでやっても良いんですが、楽天GOLDは基本的にファイルサーバ的なサービスなので、処理系を作るのには向いてません。なので、プログラム処理する部分はサーバを借りてそこに置くしかありません。 で、結局流れとしては、 [自サーバ] プログラム処理して結果出力 ↓ [楽天GOLD] Ajaxで出力を取得して表示 ↓ [楽天市場] 楽天GOLDのページをiframe使って商品ページに埋め込む という感じ。 注意点 自サーバの出力を取得するた
jQuery Content Slider | Responsive jQuery Slider | bxSlider
Add a respsonsive image slider to any website.
入力補完を手軽に行えるJavaScriptライブラリ「suggest.js」 【feedpost tips】
先日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。5回目は入力欄での入力補完を実装するためのJavaScriptライブラリ「suggest.js」。 候補としては他に、 suggest.js jQuery UI Autocomplete jquery.suggest などがありましたが、仕様を整理して検討したところ、 Ajax通信で取得する必要は無い。ページ読み込み時のリストで十分。 UIやデザインが凝っている必要は無い。 読み込みライブラリ数は少なければ少ないほど良い。 ということになり、候補の中で最もシンプルな「suggest.js」を採用するに至りました。「feedpost」で使用するJavaScriptライブラリはすべてjQueryプラグインに限定しようと考えていたのですが、jQueryプラグインとしてリリースされているものは大体高機能す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
javascriptで０パディング（0で桁埋め）する - Qiita
Vue.jsのdatepickerは「vuejs-datepicker」がおすすめ！ | カバの樹
JavaScriptで配列をシャッフルする方法 - Qiita
Laravel上でVue.jsとChart.jsを利用してグラフを描いてみる - Qiita
JavaScriptのオブジェクトのキーに変数の値を使うTips - Qiita
金額とか、カンマ区切りの数値をJSで（正規表現を説明してもらった件）。 - Qiita
SafariでもエラーにならないJavascriptのヒアドキュメントの書き方 - Qiita
