Home

良い感じにスワイプを検知する方法

AndroidのWebViewベースのアプリを作っていて、苦戦したのでメモ。zepto.jsのスワイプイベントを検知する奴を使っていたけど、ちょっと縦スクロール中に、ちょっと指が横に滑っただけでも検知してしまって、使い物にならなかったので、以下のscriptで対応した。 var touchStartX; var touchEndX; this.$el.bind("touchstart",function(e){ touchStartX = e.touches[0].pageX; }); this.$el.bind("touchm...

(初心者向け)これまでに保存してたHTML,CSS,jsコード一覧

背景画像に背景色を適用する。.intro&:before {z-index: 0;content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color:rgba(0,0,0,0.25);} 画面上下左右配置(フルスクリーン) sample{width:100%; height:100vh; position:relative;} sample img{position:absolute; top: 0; left: 0; right: 0; bottom: 0; margin:auto; } positionなどで表示順を指定したい場合 sample{position:relative; z-index:◯;} hoversなどの時間変更 t...

MACのハイパー(hyper)ターミナルの背景を半透明にする

MACbookpro(HighSierra)でターミナルを利用しているのですが、MAC既存のターミナルは味気ないので、ハイパー(hyper)のターミナルを利用しています。 hyper 既存のターミナルは標準で背景を半透明にしたりできますが、hyperはpluginが必要になるのでこちらを紹介したいと思います。 1.pluginの追加 以下のpluginをhyperに追加します。 module.exports = { plugins: [ 'hyperterm-material', 'hyper-transparent-bg', ], }; ユーザーのカレントディレクトリにある.hyper.j...

JSX記法

JSX記法メモ index.js ReactDOM.render( <div>Hello World</div>, // 末尾のカンマがないと動かない document.getElementById('root') ); classの付け方 index.js ReactDOM.render( <div className="hello">Hello World</div>, // classは予約語なのでclassNameを使う document.getElementById('root') ); イベントの付け方 index.js ReactDOM.render( <div onClick={関数名}>Hello World</div>, // 関数名を波括弧で囲う document.g...

Semantic UI入門 よく使うコンポーネント

趣味プロジェクトなど簡単なウェブサイト作る時、デザイナーいないから自前でCSS書くといっても面倒だし、Bootstrapもしょぼいな…と思ったとき、Semantic UIは頼れる味方です。 Semantic UI セマンティックという言葉は、意味論という意味です。おそらく、class名にwordをつなげて意味のあるコンポーネントを作っていくという感じだと思います。 例えば、ロード中のボタンの実装はこんな感じです。 <button class="ui disabled inverted orange loading button"> Button &lt...

【Vue】親子間での双方向バインディング

親子間でのデータの受け渡しには 親→子:props 子→親:emit で受けわたすのが通例だが、これを使わなくても v-model で双方向バインディングを行うことが可能。 親ページ データは親ページに持たせる。 今回は仮に form として、 index.vue <hoge-form v-model="form"/> 子コンポーネントのカスタムタグに v-model="form" を渡す。 子コンポーネント HogeForm.vue model: { prop: 'user', event: 'input' }, props: { user: { type: Object, defa...

式と文、if文、for文など、まとめた

式と文 文は「文と式」からなり、式は「式と演算子」からなる。 式は分解すると、「識別子」と「リテラル値」と「演算子」からなる 識別子とは、予約語、true,false以外からなる、先頭が数字ではない、英文字、数字、_、$が続く文字 js //strが識別子 「=」が演算子、'hello'がリテラル値 const str = 'hello'; 予約語の種類は var const let if else do while switch case default break continue for in try catch finally throw new return delete instanceof typeof void...

自分のメモ@画面モック開発

index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>画面モック</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="pack"> <table> <tbody> <tr> <th>見出し</th> <td>説明</td> <td class="btn"> <input type="radi...

Adobe Acrobat proでJavaScriptを使って自動でPDFをExcelに変換した話

要件 Adobe Acrobat proで200件くらいあるpdfファイルをxlsxに変換してほしい JSがかけるみたいなので、それで自動でいけるのでは? 実際のコードがこちら for (var i=1; i <= 232; i++) { try { //pdfファイルを開く var myDoc = app.openDoc("/Users/ユーザー名/Downloads/pdf/"+i+".pdf"); //Excelファイルに変換するして保存 myDoc.saveAs("/Users/ユーザー名/Downloads/xlsx/"+i+".xlsx", "com.adobe.acrobat.xlsx"); //XMLファ...

JavaScript基礎 即時関数

即時関数って定義時に即座に実行される関数ってのはわかるけど、イマイチ使い所がわからなかったので、調べてみました。 案外コードみてると出没するので覚えておくべきと思い纏めます。 STEP1 即時関数の構文 構文は2パターンあります。 // パターン1 (function () { // 関数の中身 }()); // パターン2 (function () { // 関数の中身 })(); 異なる部分は、最後の括弧です。 即時関数に引数を渡す場合は以下のようにします。 // パターン1 (function () { // 関数の中身 }('ar...

JavaScriptのスクリプトを埋め込む3つの方法

JavaScriptをスクリプトを埋め込む3つの方法 JavaScriptを実行するための3つの方法. 最近, Webセキュリティ関連の勉強をしていて, スクリプト埋め込まれると大変だ~って話がいっぱい出てきたので, JavaScriptのhtmlファイルから呼び出し方を列挙しました. インラインスクリプト <script>タグを使って, その中に, JavaScriptのコードを書く方法. 例) <!DOCTYPE html> <html> <body> <script>window.alert('Hello world');</script> </body&g...

Σ(シグマ)の計算をプログラミング(js)で実装する

更新情報 2018.08.01 @foxwell さんの指摘事項を修正 数式 \sum_{i=0}^{n}i ここで気にしないといけないのは3点です。 i=0, n ,i ※シグマは総和を表す記号なので実際計算時には必要ない。 考え方 上記の式の場合iが0から始まりnまで繰り返す。 繰り返す課程でiを足していった合計が答えになる。 つまりnが確定すれば答えを求めることができるようになります。 例1 \sum_{i=0}^{5}i 考え方 i=0から始まり5まで(n)繰り返す。 数式 0 + 1 + 2 + 3 + 4 + 5 = 15 コード let sum = 0; //合...

ReactのFragmentについて3分でさっと理解

Fragmentはシンタックスシュガーだ。returnで一つの要素しか渡せないという制約を外してくれる。 要するにjsxのネストを浅くするので、デザイン崩れとかの時に使えるとかっこいい。 正直チーム開発で使うメリットはあまりないw Fragmnentの説明 よくあるパターンとして class Table extends React.Component { render() { return ( <table> <tr> <Columns /> </tr> </table> ); } } class Columns e...

Gmail未読メール一括既読処理

https://script.google.com/home 上記のURLより下記のプログラムをコピペし実行してください。 Gmail未読メールを一括既読にします。 尚、迷惑メールは既読にはなりません+プログラムを実行させると グーグル権限などを承認にしないと実行されません(ノω・)ので適当によろしく。 誰も間違いを指摘してくれなかったので自己修復。 gmailbat.js function gmailbat () { gm = GmailApp.search("is:unread"); if(gm.length){ gm.forEach(function(m,i,a){ if(m.isUnread())...

Vue-routerで遷移時にパラメタを渡し方

vue-routerで画面遷移時にパラメータ渡すのに手詰まったのでメモ サンプルリポジトリ https://github.com/Godan/tutorial-vue-router サンプルのvue-routerのルーティング pathにはパターンを書きます。:を先頭に書くのはrailsのroutesと同様ですね。 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'index-page', component: require('@/components/index').default...

ちょっとびっくりした、setTimeout, setIntervalの戻り値

Typescript(Anugalr)でこんな感じのコードを書いていた。 const a = setInterval( () => { console.log( 'test' ); }, 1000) // ↓何らかのトリガーの後 clearInterval( a ); で、ちゃんと型を書かないとな〜とか思いながら、setIntervalの戻り値の型を調べるもなかなか見つからず、 dev tool の console に打ち込んで見ると、何と 10 number型が返るんですね; 試しにコンソールに以下のように記述したら、ちゃんとclearIntervalできました。 > a = setInterval( () => {...

JavaScript配列+配列をするとjoin()される

JavaScript配列+配列をするとjoin()される Arrayに+演算子を適用したらどうなるのかという話です。 これにハマった人が嘆いていたので気になって調べました 論よりコード sample.js a=[1,2]; b=[3,4]; c=a+b; console.log(c) // => "1,23,4" JavaScript「配列と配列の+演算?できますできます join()処方しておきますね^^」 配列+配列をしたつもりが面白いことに変数cは文字列になって妙な結合をしていますね この程度のことではTypeErrorにならないクールなところが個人的には好...

Promiseと配列

次のような、配列の各要素に対して、何かの関数(syncFunc)を呼び出す処理をしているコードをPromise版のasyncFuncを使う形に置き換える時用のメモ ["foo", "bar", "baz"].forEach((e)=>{ syncFunc(e); }); 以下のコードは全てasync function内にあるものと思ってください。 配列内の各要素に対する処理を並列に行なっても問題無い場合 await Promise.all(["foo", "bar", "baz"].map((e)=>{ return asyncFunc(e); })); for ofを使うとこういう書き方もできます。 const tmp=[...

JSのアロー関数のreturnの書き方いろいろ

普通のJSで書くと var multiplication = function(x,y){ return x * y; }; multiplication(2,10); ES6のアロー関数で書くと let multiplication = (x,y) => { return x * y; } multiplication(2,10) さらに戻り値がそのままならreturnが省略できる let multiplication = (x,y) => ( x * y ) multiplication(2,10) さらにさらに1行なら()もいらない let multiplication = (x,y) => x * y multiplication(2,10) 引数の有無でも書き方が違う // 引数が一つなら let...

Firebase Cloud Firestoreの使い方

概要 Firebase Realtime Databaseの次世代版。Realtime Databaseはデーターベース制約でいろいろとパフォーマンス等考慮したデータ構造にしないといけなかったが、Cloud Firestoreは自由度が高まったため、データベース制約をあまり意識せずにデータ格納できるようになった。 ただし、2018/3/28時点ではベータ版であり、Javaなどでは未対応の機能がある。 用語と概要 データ キーとバリューのセット data key1 : value1 ドキュメント データおよびサブコレクションの集合。 ドキュメン...