m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

Javascript

denoを使ってみた

deno.land denoって何? ja.wikipedia.org NodeJSの改良版みたいなイメージかも・・・ インストール brew install deno バージョン確認 deno -V deno 1.20.6 % サンプルサプリ作成 簡易Webサーバ server.js import { serve } from "https://deno.land/std@0.…

react-nativeでタブナビゲーションを実装

作成したやつ react-navigationのTopTabsサンプル 参考情報 React Navigationのタブナビゲーションをカスタマイズしてみよう! - bagelee(ベーグリー) createMaterialTopTabNavigator | React Navigation github react-native_samples/sampleAppNavigation…

javascriptのPromiseとasync / awaitについて少し試す

Promiseは 並列処理でちょっと前に学習したやつで function sampleTask1() { return new Promise(function(resolve, reject) { setTimeout(function () { console.log('sample1'); resolve("sample1"); }, 3000); }); } って定義したら ↓ sampleTask1() .the…

javascriptのfetchを使ってAPIより結果を取得

概要 fetch使ってみたい APIはgo言語で作成した適当なやつ サーバ側 package main import ( "encoding/json" "log" "math/rand" "net/http" "time" ) func main() { http.HandleFunc("/sample_api1", sampleAPI1) http.HandleFunc("/sample_api2", sampleAPI…

javascriptのPromiseとかいうのを今更少しだけ学習する

なんか 知らんうちにfetchとか出てるんだけどPromiseとかいうやつ返すんですけど この辺の使い方とか知らないとjqueryのajaxしか使えなくなってくるのは恥ずかしい Promise 非同期処理するやつ Promiseで実行した結果はresolveが正常時、rejectが異常時に設…

Angular2のGetStartを試す

Angular2をやってみる まだ、ベータ版しかないけどちょっと気になったので…angular.io TypeScript? 基本的にはTypeScriptで書くような感じがいいらしい JSの書き方だと可読性などやりにくい感じからかも… 実装 プロジェクト作成 IDEでもなんでもルートのデ…

react-bootstrapを試す

reactの場合はタグの定義方法が異なるの cssの定義だけならともかくモーダルウィンドウとか使いたい場合はそのままでは使えないので… 準備 プロジェクトに以下を実行 npm install jquery bootstrap react reactify browserify bootstrap-react grunt設定 初…

reactjsで超単純なTODOアプリを作成してみた

基本1画面でデータをメモリに保存するだけのシロモノ サーバとの通信は一切ありません github https://github.com/mshige1979/reactjs2 実装 <html> <head> <meta charset="UTF-8" /> <title>Reactjs-TodoApp</title> <script src="js/react.js"></script> <script src="js/JSXTransformer.js"></script> <script src="js/jquery-2.1.4.min.js"></meta></head></html>

Reactjsのチュートリアルを試す

Reactjsって? javascriptの仮想DOMを使用しているフレームワーク angularjsとかのディレクティブみたいなもん jsxとかいう言語形態で使っているけどjsに変換は可能、またchromeで動かすこともできる チュートリアル 本家 http://facebook.github.io/react/d…

Polymerをちょっと試す

https://www.polymer-project.org/1.0/ WebComponentsを結構楽にすることができる 通常の方法の場合はいろいろと手間がかかる AngularJSのディレクティブとかと同じようなことができるイメージ いろいろ参考になりそう Polymer 1.0最新情報!(前編)ーPolym…

Electronでデスクトップアプリのサンプル

YAPCでキーワードが出たので… デスクトップアプリ作れるけどどうしたらいいのか… 参考 Electronでアプリケーションを作ってみよう - Qiitaqiita.com Electron Quick Startelectron.atom.io 設定 npm sudo npm -g install electron-prebuilt mkdir electron-r…

angularjsでui-bootstrapを使用

angularjsのtwitterbootstrap版 cssの部分はともかくformのモーダルダイアログとかあとはカレンダーとか出したいけどどうするの?的な対応かと 準備 twitter bootstrapのファイル jquery angularjs よりそれぞれcssやjsファイルとダウンロードしそれと http:…

angularjsのng-ifの場合に数値や文字列の比較は?

だってサンプルはtrueかfalseしかない 使うなということでしょうか? 一応必要かもしれないので調べた 定義 <span ng-if="item.count > 10">10 over</span> <span ng-if="item.count == 10">10 equal</span> <span ng-if="item.count > 20">20 over</span> <span ng-if="item.text == 'aaa'">aaa</span> <span ng-if="item.text == '0'">xxx</span> こんな感じ、条件式を指定することで対応で…

angularjsのng-show、ng-hideで表示切り替え

表示、非表示の設定するディレクティブ ng-showはtrueの場合に表示を設定し、ng-hideはtrueの場合に非表示を設定する 実験用の環境 onsen-uiのサンプルファイル「www」を流用 基本 index.html <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> </meta></meta></meta></head></html>

TypeScriptをphpstromで使用

AltJS? javascriptの記法があまりにも独特なので他の記法にしたほうが理解しやすいんじゃない?って問題 環境 mac book air npm 準備 typescriptをnpm install npm install typescript -g PHPStormで実行 起動して新規に追加 「add watcher」をclick typesc…

cordova+enchantjsでサンプルアプリ

enchatjs javascriptのゲームエンジン簡単な描画処理を実施できるとのこと http://enchantjs.com/ja/ 実装 index.html <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <title>Capture Photo</title> </meta></meta></head></html>

angularjs学習(ページ切り替え)

マニュアル見たけどいつの間にか勉強しなくなっていたので再度学習 angularjsはなんかマニュアルが最近増えて来たのでもう一度勉強 資料 https://github.com/mshige1979/angularjs-sample 実装 index.html <html> <head> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="css/app.css" /> </link></link></head></html>

Cordovaをインストールしてみる

cordovaをインストール npmよりcordovaをインストール npm install cordova -g android sdkのパスを設定 export PATH="$PATH:/Applications/android-sdks/tools/" export PATH="$PATH:/Applications/android-sdks/platform-tools/" 設定ファイル読み込み sou…

WebRTCのささいな疑問

Webサーバは異なっててもいいのか? なんというか、基本mシグナリングサーバが同じものなら外側のWebサーバそのものは別々のものでも動くのでは…というか動くはずと思っていたけど、実は同じWebサーバでないとダメとかあるかもしれない… 実験環境 git clone…

WebRTCを試す

WebRTC とあるサイトで簡単に実験できる情報が記載されていたので、半信半疑ながら試す ベースとする環境 OS CentOS 64bit Webアプリサーバ dev.webrtc.com シグナリングサーバ 192.168.51.129:9001 TURNサーバ なし 手順 環境 [root@localhost ~]# node -v …

関東FirefoxOS勉強会 6thに参加しました

情報 セミナー名称 関東FirefoxOS勉強会 6th 場所 東京都渋谷区桜丘町26-1 シナジーカフェ GMO Yours 日時 2014/02/16(日)13:00~18:00 金額 無料 準備 PC、携帯(スマホ)、キャリアメール 内容 FirefoxのハンズオンでTwitterアプリを作成する Togetter h…

nodejsでメール送信(nodemailer)

nodejsでメール送信 今回はlocalhostからリレーで使用するため、localhostで行う。設定ではSMTPでユーザー、パスワードも指定できるがテストなので一番簡単なやつで対応 モジュールインストール [root@localhost ~]# cd /var/www/tools/node1/ [root@localho…

nodejsサンプル

nodejs ちょっと勉強するモチベーションが低下してきたので別の言語を触ってみる 環境 server.js // httpモジュールを読み込み、サーバオブジェクトを取得 var http = require("http"); var url = require("url"); var fs = require("fs"); var path = requi…

javascriptのバインディングフレームワーク「angularjs」の学習2(ng-repeat、ng-click)

更新は少しずつ いろいろと学習することも別にあるので少しずつ学習する。 一気にやっても覚えられないので… 今回は繰り返しだけ 繰り返し ng-repeatでバインドした配列形式のデータをバインド可能 <html lang="ja"> <head> <meta charset="utf-8" /> <title>AngularJS Sample04</title> </head> <body ng-app="sample04"> <div ng-controller="controller04"> <div ng-repeat="data in lists"> <…</div></div></body></html>

javascriptのバインディングフレームワーク「angularjs」の学習

どれも使ったことがない なんかいろいろなところでもう使うのが当たり前的な雰囲気なんですけど まだ、JQueryでよいかな~って思っていたのでそのままにしていたけどそろそろ重い腰を上げてみる いろいろ考えてみて とりあえず以下の機能を調査することにす…

HTML5 Conference 2013参加したよ

内容 URL http://events.html5j.org/conference/2013/11/ 日時 2013年11月30日(土)12:00 - 19:30(受付開始 11:00) 場所 NTT中央研修センタ 東京都調布市入間町1-44 人数 最大2000人 金額 無料 ハッシュタグ #html5j ※ルーム別にもあります セッション内…

関東Firefox OS勉強会 5thに参加しました

勉強会情報 URL http://atnd.org/events/44739 日時 2013/11/26 19:00 to 21:00 定員 100人(参加は80人くらい) 場所 東京都千代田区神田神保町1-105 株式会社インターネットイニシアティブ ハッシュタグ #fxos togetter http://togetter.com/li/595283 セ…

Gruntでjavascriptとcssをタスク制御

自動化する方法 Gruntが最近のベストっぽいので簡単に調査 やりたいこと javascriptのコードチェック javascriptの圧縮 cssをcompassを使用してscssから変換 手順 nodejsをセットアップ grundをインストール gruntのプラグインをインストール Gruntfile.jsを…

JQueryプラグインの勉強

JQueryのプラグインを使用はしているが作ったことがない よくよく考えたら他の人が作成しているので簡単なものなら作成できそうな感じがするのでちょっと勉強 今更? これからは他のフレームワークなどもあるようだけど、DOMの制御などをもう少し詳しく理解…

関東Firefox OS勉強会 4thに参加しました

イベント http://atnd.org/events/43344 場所 シナジーカフェ GMO Yours (東京都渋谷区桜丘町26-1) 東京都渋谷区桜丘町26番1号 セルリアンタワー11階 入場方法 エスカレータを入ってすぐのところで受付があり、そこで確認後に入館証を借ります。 その後に…