この記事はMojirageアドベントカレンダーの25日目の記事です。 matatsuna.hatenablog.com Snapsvg SVGで描画をするためのライブラリです http://snapsvg.io/ PEP ディバイスやブラウザごとに違うpointerイベントの差を吸収してくれます mojirageでは基本全て…

この記事はMojirageアドベントカレンダーの24日目の記事です。 matatsuna.hatenablog.com無茶なことをしていると環境ごとにブラウザの挙動が違うことがしばしばあります スマホで開発者モードやコンソールをみる方法を紹介します 手元にMac,iOS端末とAndroid…

この記事はMojirageアドベントカレンダーの23日目の記事です。 matatsuna.hatenablog.com metaタグ 検索サイトに出てくる文章やslackで展開されるやつを設定することができます gyazo.com サンプル mojirageに設定しているものです <meta name="keywords" content="手書き文字,平均文字,融合文字,平均文字ノート,電子黒板,ノートテイク,手書きノート,デジタルノート"> </meta>

この記事はMojirageアドベントカレンダーの22日目の記事です。 matatsuna.hatenablog.com .htaccsessとは 一時期、阿部寛のHPが軽いという話が話題になりました rocketnews24.comその話題を受けて、これはmojirageも爆速を目指さなければとページ高速化につ…

この記事はMojirageアドベントカレンダーの21日目の記事です。 matatsuna.hatenablog.com cssのアニメーション cssにはアニメーションがあります 詳しくはQiitaとかで qiita.com cssアニメーションとjsとの同期 ビジュアル的なカウントダウンするバーみたい…

この記事はMojirageアドベントカレンダーの20日目の記事です。 matatsuna.hatenablog.com imagemagickとは imagemagickは画像に関わる様々なことができるコンソールで動かすプログラムです www.imagemagick.org 色んな所で使われてます しかし、少し変わった…

この記事はMojirageアドベントカレンダーの19日目の記事です。 matatsuna.hatenablog.com Googleログイン機能 よくWebサービスであるgoogleのログインの実装の仕方です gyazo.com Google consoleでkeyを発行する https://console.cloud.google.com/?hl=ja 「…

この記事はMojirageアドベントカレンダーの18日目の記事です。 matatsuna.hatenablog.com fetchをphpで受け取る fetchのbodyに書いたものはjson形式で受け取れます

この記事はMojirageアドベントカレンダーの17日目の記事です。 matatsuna.hatenablog.com gyazo gyazoはスクリーンショットを共有するためのサービスです gyazo.com APIでプログラムからアップロードすることもできます https://gyazo.com/api/docs/image PH…

この記事はMojirageアドベントカレンダーの16日目の記事です。 matatsuna.hatenablog.com curdate() mysqlでログイン管理をするときに、カラム設定したtimestampが今日の人だけを取得したい(今日ログインした人の抽出)場面があると思います そういうときにcu…

この記事はMojirageアドベントカレンダーの15日目の記事です。 matatsuna.hatenablog.com require ファイルを参照出来るようにする 他のファイルにかかれている関数を呼び出すときに使う require_once ファイルを一回だけ読み込む データベースに関するユー…

この記事はMojirageアドベントカレンダーの14日目の記事です。 matatsuna.hatenablog.com PDO phpの業界では当たり前かもしてないですが、PDOでデータベースにアクセスすることがセキュリティ的に重要です qiita.com 基本的には困ることはないのですが、設定…

この記事はMojirageアドベントカレンダーの8日目の記事です。 matatsuna.hatenablog.com APIの整備 今回、構築するにあたり最も時間がかかったのでAPIの設計に関するところです mojirage初期バージョンでは、indexの配下に/api/を直接おいてました しかし、…

この記事はMojirageアドベントカレンダーの12日目の記事です。 matatsuna.hatenablog.com svg mojirageのレンダリングは全てsvgで行っている svgはdom要素として扱うことが出来るので便利 しかも、軽いらしい 詳しい使い方はここが参考になった svg要素の基…

この記事はMojirageアドベントカレンダーの11日目の記事です。 matatsuna.hatenablog.com 配列 jsがprocessingとかと大きく違う点のはこのあたりが非常に扱いやすいです map 全ての要素に対して同じ処理ができる reduce 全ての要素に前後の順番で処理ができ…

この記事はMojirageアドベントカレンダーの10日目の記事です。 matatsuna.hatenablog.comjs書いててコンストラクタで定義するときなどで渡された引数が正しいか判定するのに1行で出来るの便利 this.hoge = _hoge || ''; || で変数の判定できます 引数にnull.…

この記事はMojirageアドベントカレンダーの8日目の記事です。 matatsuna.hatenablog.com addEventLitener 今まで、Processingでイベントがマウスだけだと思っていたので、この存在はかなりびっくりした DOMの要素それぞれにイベントをつけることができる そ…

この記事はMojirageアドベントカレンダーの9日目の記事です。 matatsuna.hatenablog.com今回最も悩まされたのがこのタッチ関係のイベントの使い分けです 腹が立つ事に、実装中にブラウザの仕様が変わりアップデートすると使えなくなるということが頻発した m…

この記事はMojirageアドベントカレンダーの7日目の記事です。 matatsuna.hatenablog.com fetch ajaxを使うためだけにjqueryを使ってたりしてたが、それがいらないほど便利な関数。 しかもPromiseと同じような構造をしていて、$.ajaxよりもシンプルかつ強力 …

この記事はMojirageアドベントカレンダーの6日目の記事です。 matatsuna.hatenablog.com Promise ネストが深くなりがちなときに関数キレイに呼び出すことができるやつ jsでは必ずしもソースの上から実行されるとは限らないので、順序ごとにPromiseがついた関…

この記事はMojirageアドベントカレンダーの5日目の記事です。 matatsuna.hatenablog.com gulp 雑にいうとBrowserifyとかにjsを通すときにファイルの監視をして変更されたらコンパイルというふうに使ってました webpack gulpよりも簡単にnodeでしか動かないも…

この記事はMojirageアドベントカレンダーの4日目の記事です。 matatsuna.hatenablog.com昨日の記事で取り上げtたbabelとはなにか？ babel babeljs.io ES6の新しい書き方で書いたものを今のブラウザで動くレベルまで勝手に変換してくれるパッケージです。 た…

この記事はMojirageアドベントカレンダーの3日目の記事です。 matatsuna.hatenablog.comnode書いてるとよく一番上に書いてあるパッケージの読み込みをするやつがrequireとimportです。 require node自体がサポートしてるパッケージの読み込み方(厳密にはComm…

この記事はMojirageアドベントカレンダーの2日目の記事です。 matatsuna.hatenablog.com npm www.npmjs.com nodeを使うと便利になる的なことは前回軽く触れました。そのときに使うパッケージ(ライブラリ)をインストールするために使うのがnpmです。 npm自体…

この記事はMojirageアドベントカレンダーの1日目の記事です。 matatsuna.hatenablog.com JavaScriptとは？ 超簡単にいうとWebブラウザで動くプログラミング言語です。 JavaScript は Web のクライアントサイドで実行され、イベントが発生したら Web ページが…

長い間作ってきたWebシステムがとりあえず形になったので使った技術、身につけた技術を紹介していきます。 日付 タイトル(仮タイトル) 12/01 JavaScriptとnode.js 12/02 npm,yarn,package.jsonとは 12/03 requireとimportの違い 12/04 babelとは 12/05 gulp…

今回はちょっと自分語り的な話を 5年経ちました!!! なにが5年立ったかというと、とっても大切なプロジェクトを作り始めた日から今日5年がたった。 それは、「Scamark(マークシート判定システム )」です。 証拠 gyazo.com タイムスタンプが2012/11/01になって…

dockerをいじってて腹がたったので書きます。環境:windows 10 現象 Dockerfileには FROM node:latestとだけ書いて、buildしました。 > docker build -t hoge .runは > docker run -it --rm --name hoge-app hoge -p 5000:5000 /bin/bashそしたら、 C:\Progra…

問題 Raspberry Pi上でdocker buildしたら standard_init_linux.go:178: exec user process caused "exec format error" The command '/bin/sh hogehugapiyo' returned a non-zero code: 1 と言われる 原因 Raspberry PiのカーネルはARMなのでWindowsやMacの…

作ったもの 研究室に今誰がいるかをslack上から相手に気づかれることなくコマンドで確認するシステムを作った。 pic.twitter.com/bCF50OaxJU— 又 (@matatsuna) 2017年4月14日 概要 10分に1回ラズパイからローカルipに向かってpingし、arpでMacアドレスを取得…