Logicky BLOG

Logickyの開発ブログです

  • Javascript
  • Python
  • PHP
  • Go
  • OS・サーバ
  • 機械学習
  • つくったもの
  • 数学
  • アルゴリズム
  • Logicky

Javascript

既存の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'…

フォームのファイルをAjaxでアップロードする

FormData オブジェクトの利用ここにドンズバのことが書いてあって有り難いです。非常に便利っぽいですね。 var fd = new FormData(document.getElementById("form_data")); このfdを渡してAjaxでやったらできた。いやーよかったよかった簡単で。 jqueryでや…

jquery ui sortable で並び順を取得する(serialize)

参考:http://api.jqueryui.com/sortable/#method-serialize ここで、item_1、item_2といった感じで連番ふるよといいましたが、どちらかというと並び替えの場合、並び替え対象でDBのIDで管理しないといけないと思いますので、item_idという感じにした方がよ…

firefoxでformにdisabled設定するとリロードしてもdisabledのままになっちゃう

firefoxはFormの入力内容を勝手ながら保存してくれます。便利なときもあれば不便なときもあります。 disabledをjavascriptで動的に設定した場合は不便です。 入力内容を覚えておいておかないようにするか、javascriptで、Firefoxのために初期化(disabledを外…

javascript ドラッグ&ドロップで並び替え

HTML要素をドラッグアンドドロップで移動して、並び順を変更したい。 今知りましたが、sortabaleというドンピシャの機能があるんですねえ。ちなみに、ドットインストールにも載ってました。 $(function(){ $('#sortable').sortable(); }); cursor:'move'でカ…

cakePHP SecurityコンポーネントのBlackhole

セキュリティ的にかなり便利なようで、javascriptでフォーム書き換えしたりbackボタン使ったりできなくなるのはいいですが、そのかわりかなりBlackholeにはまります。 参考サイト: Cakephp2.xでのBlackHoleまとめ [CakePHP2] Security Component を使って S…

Formで半角数値だけ入力できるようにする

function num_only(t, limit){ t.value = t.value.replace(/[^0-9]+/gi,''); if(limit){ t.value = t.value.substring(0, limit); } } <input type="text" onkeyup="num_only(this, 3);"> limitは、入力可能な最大文字数

  • Javascript
  • Python
  • PHP
  • Go
  • OS・サーバ
  • 機械学習
  • つくったもの
  • 数学
  • アルゴリズム
  • Logicky