edo1z blog

プログラミングなどに関するブログです

Javascript

Shopify - ページ編集にMarkdownを使う

ページ編集にMarkdownを使えるようにするアプリがあるだろうと思ったら、どうもないようでした。 方法概要 Stripeダッシュボードのページ編集画面のウィジウィグモードで、Markdown形式でコンテンツを書いて保存する。 Markdownを使いたいページで、markedを…

moment.jsのメモ - 日時が特定の期間内かを調べる

moment.jsで、日時が特定の期間内かを調べるときのやり方。 isBetweenというのがあったので使ってみた。でもこれは、同じだとfalseになるらしいので、1ミリ秒引いてみた。 サンプル const yyyymmddThh = (y, m, d, h) => { const y0 = ('000' + y).slice(-4)…

BitfinexとBitmexの板と約定履歴をwebsocketで取得する

node.jsを使ってます。 Bitfinex const ws = require('ws') const w = new ws('wss://api.bitfinex.com/ws/2') w.on('message', msg => console.log(msg)) let msg = JSON.stringify({ event: 'subscribe', channel: 'trades', symbol: 'tBTCUSD' }) w.on('o…

vue + stripe-elementのコンポーネントを自作した

vue-stripe-elementsを使っていて困ったこと 最初下記を使っていて、すごく使いやすかったのですが、複数ヶ所でstripe-elementを表示させようとするとエラーになってうまくできませんでした。 github.com vue-stripe-elementsのissue 同じようなことで困って…

Vue.js + Firebase + Stripeで開発しているときに調べたことのメモ

CloudFunctions async/await使う時は、下記のようにnode:8をpackage.jsonに設定する必要ある。 { "name": "functions", "description": "Cloud Functions for Firebase", "engines": {"node": "8"}, 上記を設定すると、そのままだとyarnが使えなかった。ココ…

node + webpackでregeneratorRuntimeが無いいわれるで

async, await使ってたら下記エラーがでたで Uncaught ReferenceError: regeneratorRuntime is not defined 下記に書いてあるとおりにやってみたら、エラーがでなくなったで dev.to 下記をインストールして、 $ yarn add -D babel-plugin-transform-runtime .…

既存のvueアプリに適用しやすいcssフレームワークはなんですか?

Quasarを使おうと思ってたのですが、quasar-cliも、vue-cliも使えない状況で、使おうと思ったら、やり方が書いてなかった。下記によるとデフォルトのquasarに既存vueを統合してよみたいな感じに書いてあるので、Quasarは今回はやめることにした。 https://fo…

puppeteerでスクレイピングしてみた

puppeteerというのを使ってみました。google chromeをコマンドラインから使えるやつです。久しぶりにjQueryやってる感じで、イライラした笑 でも便利そうだし、面白かった。これを使うと、なんか色々できそうで面白い。 本家マニュアルも読んだけど、この記…

Node.jsでファイルの読み書き

Node.jsでファイルの読み書きします。 File System | Node.js v10.11.0 Documentation fsモジュール fsモジュールを使って読み書きします。非同期コールバック、同期、非同期プロミスバージョンという感じで、同じ処理に3つの関数がある場合が多いっぽい。…

Wordpressからはてなブログへの引っ越しの際に、日本語URLがおかしいのと、シンタックスハイライトが反映されないのを解決した

Wordpressからはてなブログに引っ越しました この度、はてなブログにお引っ越しをしました。めっちゃ便利だし、安いし、軽いしいい感じだと思いました。 引っ越し方法も基本は簡単で、Wordpressの管理画面の標準機能に、エクスポート機能があるので、それを…

Node.jsでbitFlyerAPIを使う

APIのドキュメントはここにあります。 サンプル const axios = require('axios') const config = require('./bitflyer.config') const baseUrl = 'https://api.bitflyer.com' const crypto = require('crypto') function request(method, path, data) { retu…

Javascript - Promsise async await

参考:Promiseを使う Promiseの例 const axios = require('axios') function hoge(msg) { return new Promise((resolve, reject) => { if(msg === 'hoge') resolve('page') reject('error') }) } function page() { return new Promise((resolve, reject) =>…

node.js - socket.ioでブロードキャストする

ブロードキャストというのは、node.jsのサーバから接続されている各クライアントに配信することです。 プロジェクト作成 $ mkdir hoge $ cd hoge $ yarn add express $ yarn add socket.io $ vue create client $ cd client $ yarn add socket.io-client と…

Node.js - requireとexports

ここに詳しく書いてありました。 大体こんな感じで使う。 index.js var hoge = require('./hoge.js') var page = require('./page.js') console.log(1) console.log(hoge.val) console.log(hoge.num) console.log(hoge.hoge.a) console.log(page.pageFunc(10…

手書き文字を作れるJavascriptをつくってTensorFlowで予測させてみた(2)

この前、「手書き文字を作れるJavascriptをつくってTensorFlowで予測させてみた」という投稿でブラウザ上で手書きした文字画像を、MNISTで訓練したモデルで予測してみましたが、ものすごく精度が悪かったです。今回改めて、CNNを使ってやってみたらかなり精…

手書き文字を作れるJavascriptをつくってTensorFlowで予測させてみた

MNISTでテストしているだけだと味気ないので、ブラウザで数字を手書きして、それを予測するようにしてみました。JavascriptのCanvasでお絵かきアプリみたいのを作って、そこに手書きで数字を書いてボタン押したら、28x28に縮小して、Base64の状態でサーバに…

Reactの開発環境

node.jsをインストールして、npmも最新版にする。 npmでプロジェクトつくって、下記をインストールする。 webpack babel react sass reactは、jdxを使うのが基本で、ES6の書き方でjdxを使って書いたものを、babelを使って、ES5のjsに変換する。webpackとbabe…

Node.js

Node.jsやってみる。 macは、El Capitan 10.11.5です。 ここでNode.jsをダウンロードしたり、ドキュメントを取得できたりする。 http://nodejs.jp/nodejs.org_ja/ Node.js v0.11.11 マニュアル & ドキュメンテーション $ node -v v0.11.11 $ npm -v 1.3.25 N…

Backbone.js(Marionette) - CollectionViewとCompositeView

ItemViewはシンプルだけど、collectionViewとcompositeViewというのがあるので、使い分けを確認する。 参考1:Marionette.jsまとめ その3 CompositeView, Layout, Region CompositeViewは、テンプレートを設定することができるらしい。CollectionViewは、テ…

画面の高さに画像サイズを合わせる

トップページのでっかい画像を画面の高さに合わせることで、スマホでもPCでも最初の表示は画面全体に画像が表示されるようにしたい。 画面の高さは、$(window).height()なんじゃないかと思っている。だから最初に、$('#top_img').height($(window).height())…

スマホでfixedをサポートするのはめんどくさい

参考: iPhone、Android position:fixed 対応状況と対応方法 Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと user-scalable=noを使う理由と弊害(スマホのviewportを見直す) スマホではfixedがサポートされていないのがある。ios5から対応…

ページ内ヌルヌル

ページ内 ヌルヌルでgoogle検索するといっぱいでてきます。ヌルヌルって言い出したのはだれなんでしょうか。 http://webnonotes.com/javascript-2/pagescroll/これが一番上に出てきます。 this.hashこれで、ハッシュの要素を取得できるようです。 $(hash).of…

Backbone.jsとMarionette

http://backbonejs.org/ここのdevelopバージョンを使ってみます。Underscore.jsに依存します。http://underscorejs.org/ jQueryも使います。 モデル var Hoge = Backbone.Model.extend({ defaults:{ 'name': 'taro', 'age': 20, 'updateTime': new Date() },…

jquery - テーブルに検索、ソート、ページネーション機能をもたせるDataTablesプラグイン

DataTables fuelphpの検索結果をテーブルにして、ソートとページネーションをAjaxな感じでやりたいので、これを使ってみる。下記サイトをみて知った。 DataTables(日本語で紹介してるサイト) ダウンロードはここでできた。 おお、お手軽だ。さすがプラグイ…

HTML5 Canvas のIE8対応

最初ExplorerCanvasを使ってしまって、全然動かなかった。 参考:Internet Explorer 8でCanvasを動かす時のメモ VMLCanvasを使うとよかったです。 https://code.google.com/p/mofmof-js/wiki/VMLCanvas VMLCanvas.js は uuCanvas.js から Silverlight と Fla…

画像をクライアント側で縮小する

スマホからアップロードしようとするとスマホで撮影した画像ファイルのサイズが大きいので大体エラーになります。クライアント側で縮小しつつ、向きも合わせるとう処理が必須であります。 画像アップロード前にクライアント側で縮小してプレビューし、アップ…

chrome window.printが効かない

謎の現象がおきています。localのchromeであれば問題なくうごきますが、さくらサーバでやると動きません。といっても他のページだと問題なく動くのですが特定ページのみ、さくらサーバだとwindow.print()が効きません。厳密に言うと、window.printを実行して…

いい感じにくっつけたフッターとヘッダーの間にあるコンテンツの背景を白く塗りつぶしたい

ヘッダーとフッターの間にあるコンテンツ空間はコンテンツ量によって高さが変動しますので、普通にbackgroundの背景色を設定しても、コンテンツ量が少ない場合、余白が出来てしまいます。この余白をださずに背景色で埋めたいです。 display: flexってやつが…

他のところをクリックしたら閉じる javascript

下のスクリプトでやったらパソコンとAndroidはうまく閉じるけど、iPhoneで試したら閉じない。 function toggle_sub_menu(){ $('#sub_menu').slideToggle(300); event.stopPropagation(); } $(document).on('click', 'body', function(e){ if(!$(e.target).is…

画像をinputにドラッグして表示する

IEはダメらしいですが、typeがfileのinputはドラッグ&ドロップでファイルを登録できます。なので、ドロップしたらinputにchangeイベントがおこります。changeイベントが発生したら、FileReaderを使って表示させます。 $(document).on('change', '.img_input'…