Mac > システム環境設定 > Apple ID > iCloud Drive オプション > テキストエディットのチェックを外す

はじめに こんにちは、デザイナーの浜田です。 マンガZEROのWebリニューアルを担当することになり、AtomicDesignに則ってSketchでデザイン制作をしました。 そして今回デザイナーがAtomicDesignで言うAtoms/Molecules/OrganismsあたりのHTML/CSSを書いてみようという話になり、Storybookが導入されることになりました。 本記事ではデザイナーがStorybook+AtomicDesignを使って開発に参加してみてどうだったか、どのように活用ができたか、について紹介したいと思います。 デザイナー＆エンジニア間でStorybookが有用に使えそうかどうかの参考になればと思います。 ※本記事では、Storybookの環境構築やコードについての解説などは行いません。 AtomicDesignについては以前に弊社デザイナーが記事にしているので紹

TypeScript + VueなプロジェクトでESLintを使ってみて、現状必要なモジュールが複数あって少し複雑だったのでまとめておきます。 サンプルは以下です。 github.com 内容はどうでも良いんですが、こんな感じのすごく簡単なTODO風のアプリケーションです。 なぜEslintを使うか JavaScriptのためのLintingツールはたくさんありますが、Vueのroadmapにもある通り、Vueの公式スタイルガイドをサポートするESLintプラグインがESLintのメンテナによる公式プラグインとして作られています。 GitHub - vuejs/roadmap: Roadmap for the Vue.js project これからもVueの公式としてサポートされていくと思うので、特にこだわりがなければESLintを使うのが良いかと思います。 ESLint for Type

MySQL の InnoDB のデフォルトのトランザクション分離レベルは REPEATABLE READ で、ファジーリードしないようにトランザクション中の SELECT はトランザクションを開始してから最初の SELECT の時点のスナップショットから行われます。 そのため、次のやり方だと一意制約エラーが発生する可能性があります。 テーブル定義と初期データ /* なんか関係ないテーブル */ CREATE TABLE t_dummy ( dummy_id INT NOT NULL PRIMARY KEY ); /* カテゴリ */ CREATE TABLE t_category ( category_id INT NOT NULL PRIMARY KEY ); /* カテゴリごとのデータ */ CREATE TABLE t_data ( category_id INT NOT NULL,

ゼロパディング(zero padding)とは、書式の桁数に満たない数値の場合に、足りない桁数だけ 0 を追加して桁数を合わせることです。 たとえば3桁で1を表す場合、足りない2桁をゼロで埋めて 001 と表記します。 JavaScriptでは、String.slice() を使って桁数を合わせます。 たとえば変数 num の値の書式を3桁にしたい場合、下記のようになります。 var num = 1; var ret = ( '000' + num ).slice( -3 ); console.log(ret); 出力結果 001 希望の桁数だけ '000' の0を増やし、その桁数を solice( -3 ) として指定します。 2桁にしたい場合は下記になります。 var ret = ( '00' + num ).slice( -2 ); 値が想定する桁数を超えたときは上記の桁が失われるの

執筆時のバージョン > tsc --version Version 2.1.6 定義ファイルのインストール 定義ファイルは、以下のようにnpmで直接インストールすることができます。 npm install --save @types/es6-promise // Promise<T>のTはresolveの引数の型 const p1 = new Promise<string>((resolve: (value?: string) => void, reject: (reason?: any) => void) => { // 非同期の処理 // 成功したときは戻り値を引数にしてresolveを呼ぶ // 失敗したときは戻り値を引数にしてrejectを呼ぶ setTimeout(() => { resolve("OK"); // 成功したときの戻り値 }, 1000); }).then( //

ハイパーテキストをマークアップするのがHTMLなら、グラフィックをマークアップするのがSVGです。簡単なコードであれば形をイメージできるうえに、JavaScriptから手軽に操作できます。 WebGLを含むCanvasは、できる事の幅でいえばSVGよりもはるかに上ですし、ベジェ曲線も用意されていますが、線を引くだけなら大げさな気がします。あとレスポンシブ対応が地味にめんどくさい。サクサク動くゲームとか、ゴリゴリ動くリッチなサイトをCanvasで作れる人はすごくすごいと思います。 そんなこんなで、今回はSVGを使います。 Vue.jsとSVG SVGの実体はXMLなので、HTMLのようにVue.jsから操作できます。ベジェ曲線に必要な座標を変数として定義しておいて、それをリアルタイムで変更できるようにすれば、いい感じのベジェ曲線がVue.jsとSVGで実現できそうです。高まります。 実装 プ

C#、ASP.NET、TypeScript、Angular を中心にプログラミングに関した話題を諸々。 by @jsakamoto

ES2015でvarやletを使う場面はほとんど無いので、まずconstを使う。constだとダメな場合にはletを使う。 背景 ES2015では、変数を宣言するための文法としてconstとletが導入された。 const foo = 'foo'; let bar = 'bar'; constは再代入できない変数を宣言できる。letは再代入できる変数を宣言できる。 const foo = 'foo'; foo = 'hoge'; // ERROR let bar = 'bar'; bar = 'hoge'; // OK あれ、じゃあvarとletは同じなの？っていうとそうではなく、letやconstはvarとは違って、関数スコープよりも細かなブロック単位のスコープを提供する。例えばconstやletを使うと、if文やfor文などのブロック中でのみ有効な変数を宣言できる。 で、プロジェクトに

vue-routerでページ遷移するときにスクロールの位置をトップ（一番上）に移動させたいとき、公式サンプルにしたがって以下のように実装します。 const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }; // トップに移動 } }) JavaScript ページの先頭までアニメーションスクロールをするで紹介したように、スクロールをアニメーションで移動させたいときは別の方法で実装する必要があります。 routerの値をwatchして、変更されたタイミングでスクロールの処理を実行します。scrollToファンクションはJavaScript ページの先頭までアニメーションスクロールをするで紹介しています。

設定不要のビルドツール parcelというビルドツールが空前の勢いでGitHubスターを集めており、リリース数日で5000スターを超えています。今日だけでも1000スター以上増えており、Googleなどの有名企業リポジトリ以外でこのスピードで人気がでるのは異例です。 https://github.com/parcel-bundler/parcel https://parceljs.org/ 実際に試してみたところ、これはwebpack一強時代を終わらせるレベルの使いやすさだと確信しました。 作者はAdobeのエンジニアで、その他著名エンジニアも続々と参加している様子です。 webpack疲れ webpackが出た当初、webエンジニアはgulp/grunt疲れの状態だったことを覚えている方もいるかと思います。 webpackの統合された設定ファイルは、タスクランナーで逐次処理していたものを

** ※本記事は2015-02-16-raspbian-wheezyをベースに記事を書いています。 ** いろいろ試行錯誤しましたが、Raspberry Piで複数Wifiで個別の固定IPを指定する方法がわかったのでメモしておきます。 用途としては、家のWifiで普段は使っているが、外で開発するときにWimaxやテザリングなどの別のWifiで作業したいときを想定しています。 まず単独Wifiで固定IPを仕込む場合 こちらはGoogleで調べてみるとかなり出てくるので設定しやすかった。 tkamada_の日々: Raspberry PiのWiFi設定-DHCPから固定IPアドレスまで最速版 一番参考にした記事、設定がほぼそのまま使える Raspberry Pi B+をセットアップして無線LAN接続してみる – 照る照る坊主の青空 GUIを併用した記事、わかりやすい。 これでバッチリ家のWif

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

結論から言いますと、おそらく無理です。 理論上は確かに加速度を2回積分すれば距離が出ますが、しかしその場合、加速度はちゃんとΔtにおける加速度でなければなりません。ところがiPhoneのモーションセンサが取るのは受けた力から計算した瞬間加速度です。 積分自体は非常に簡単で、y*Δtを足していけば面積になりますから、例えば初速度を0と見なせば、0.01秒ごとに加速度を取るとし、取った加速度を0.01かけて100回足せば1秒後の速度になりますからなんも難しくありません。ところが問題はこの場合はΔt=0.01の場合の加速度が必要であり、瞬間加速度しか取れない以上それを無理やり足しても100Hzじゃあサンプリングレートとしても低すぎて精度が使い物になりません。 一応無理やりにプログラムに書くと単純な書き方ですがおそらく多分下記のようになりますが： import UIKit import CoreM

nodefest.jp 2017/11/25, 26で開催されました。 今回は、前回よりも更にto be more more globalをテーマに作っていきました。 一日目はセッション、スポンサートーク、LT等でした。 二日目はセッションと参加者が手を動かすワークショップを行いました。 両日ともに、3ラインで進みました。 自分は一日目はBホール(402)の司会をしていて、二日目はCode And LearnでNodeへのコミットのサポートをしていました。 全部見れてないので、わかっている部分の資料だけ貼りたいと思います。 もし資料があったら教えてくれるとついったーとかでください。 Twitter ハッシュタグ モーメント 資料まとめ 1日目 Opening talk Node.js at Alibaba Source to Binary - journey of V8 javascrip

経緯 サーバレス、流行ってますね。 ウェブホスティングしたS3上にReactやRiot.jsなどでSPAを作って、認証はCognito UserPoolというのがテッパン構成でしょう。 http://qiita.com/jobbin/items/d2fc0f714eb1f1cfc965 http://dev.classmethod.jp/cloud/aws/login-form-by-using-aws-sdk-for-javascript/ そして、SPAを作るならWebpackでES6で書いたソースをトランスパイルして、バンドル（ひとつの*.jsファイルにまとめること）して…というのが通例ですね。（サーバーサイドの人にはこの辺がツラい） http://qiita.com/clown0082/items/ba9177eb26b09baa668b しかしながら、いざやってみると...でかい

文字列の長さに応じてフォントサイズを縮小したり、省略表示したりできないかと思って調べてみました。 canvasのmeasureText()を使う方法と、DOMのoffsetWidthの値を使う方法があるようです。 canvasを使う方法 HTML5のcanvasを使いますので、canvas要素に非対応なIE8以前ではexcanvas.jsが必要です。 IEとexcanvasのバージョンの組み合わせ次第で動かない可能性もあります。 手順： (1)まずHTML中にcanvasを用意する <canvas id="canvas" width="0" height="0" style="visibility:hidden;position:absolute;"></canvas> Firefox9ではstyleでdisplay:none;としても大丈夫でしたが、IE+excanvasでは駄目だったの

あー、負けたー。「Asakusaの方から来ました」というチーム名で、Asakusa.rbでよくいっしょする @joker1007 さん、および @yancya さんと出た。最終結果は111400くらい? ただし20時*1を過ぎても4〜6万くらいをうろうろしてて、最終的には20:10頃に入れた変更でスコアが倍になり、なんだこれー? と言ってる間にタイムアップした。 去年のISUCON6決勝はやるべきことをやれなくて負けたので素直に悔しかったけど、今年はなんか問題設定の意図がまったくわからなくてそのまま不完全燃焼で手が停まって4時間経過で死んだという感じなので、なんだかなー、という気分。あんま疲れないまま終わってしまった。 なんか、なんで自分があーって思ってるかはわかった。keep-aliveをなかなか切ってくれないエンドユーザクライアントがたまに混ざってくれることはあるかもしれないけど、CD

ISUCONとは http://isucon.net/ WEBサービスのチューニングのうまさを点数化して全国で競い合うコンテスト 今回の問題 今回はチャットシステムでした ユーザー登録・編集 チャットグループの作成 チャット閲覧・投稿 運営から3台サーバを渡されて自由に使って良いという感じ 一応2台アプリケーションサーバ、1台DBサーバという感じ チーム チーム名: バナナマンさん 言語: Ruby 去年・一昨年と同じチームで挑みました（去年の記事） 毎年付き合ってくれる2人に感謝 ミドルウェア・インフラ周り担当 アプリケーション担当 DB担当 みたいなざっくりした分担で臨みました 僕はDB担当 やったこと 土曜9時半に集合したものの運営のトラブルにより開始が13時にズレる 午前中とても暇だったがゆっくりレギュレーション読み直したりチームメンバーと方針・分担の最終確認ができたりとそこそこ有