はてなブックマーク

typescriptを最近使い始めたわけで。 lintをするにはtslintが一般的だったんだけど、なんかeslintでもできるようになるよみたいなニュースもあったし、VSCodeのtslintのプラグインにdeprecatedっていう名前がつき始めるし。 ってことでtslintじゃなくてeslintでlintしちゃおうかな〜っていう。 で、さらにいつもeslintではairbnbでやってたから今回もairbnbでlintしたいなぁと。 ということで今日は@typescript-eslintを使ってeslintのairbnbをtypescriptにも適用しちゃおう的なお話をば。 ちなみについでにhooksのlintも入れてみましょう的な。 とりあえず入れておくべきnpmはこちら。 $ npm install --save-dev \ @typescript-eslint/eslint-pl

Expo for Professionals Coming to Expo: a new open-source repo, TypeScript, best-in-class APIs, custom native code, more platforms, and much more Expoが新しくブログ記事を公開したんだけど、オープンソース化したりTypeScript対応だったりとかv31でどういう感じにするかとか諸々指針を公開したっていう。 なので今日はそれをざっくりかいつまんだ翻訳的なお話をば。 ■はじめに Expo developers include a wide variety of people making apps with Expo in different ways. To learn more about the most popular apps made

技術書典っていう技術系の同人誌即売会みたいなやつの5回目が2018/10/08にあってそこに本を出しました的な。 池袋のサンシャインシティの文化会館の2Fだったんだけどめっちゃ広いしですごかった的なみたいな。 そこで共著的な感じでReact Native(Expo)とFirebase使ってアプリを作っちゃおう的な本を出したんだけどみたいな。 ちなみにExpoでプロダクションでやってる事例ってほとんどないし、どこまで何が作れるのか謎な部分も多いのでInstagram風のSNSアプリの作り方的な感じでソースコード全文載せてるみたいな。 ということで今日はどうして出したのかとか、本を書くってどうなのとか、どこが辛かったのとか、どういう環境とか手段で本を書いたのとか、当日どうだったのとか、販売してみたの課題だとか諸々とあったよね的なことのお話をば。 出した本はこんな感じの表紙。 とりあえずBOOT

まんまタイトル通り。 https://github.com/facebook/react-native/pull/18456 valueもしくはdefaultValueとして値を入れてかつonChangeTextを使うと日本語の変換ができなくなる。 なんか望ましくない文字を入れたくないためのアップデートらしい。 とりあえずこのままだと困るので、今日はこれを対処するお話をば。 ちなみにExpo30(2018/09/13)とReact Native0.57以降ではこの問題修正されてるので気にせずで大丈夫的な。 <TextInput value={this.state.value} onTextInput={(e) => this.setState({value:e.nativeEvent.text})} /> onTextInputを使えばいい。 https://github.com/face

■Official Context API 公式サポートのコンテキストAPI。 今までのコンテキストAPIは16.x.x系では使えるよ的な。 const ThemeContext = React.createContext('light');としてThemeContextを作り、ThemeContext.Providerを使うことでchildren以下に浸透させ、取り出したいところでThemeContext.Consumerとすることでcontextを取り出せる。 Accessing Context in Lifecycle Methods ここら辺はreduxっぽくてわかりやすいんじゃないかと。 dispatchがないバージョンみたいな感じでサクッとFlux的なことをしたいならばContext APIで十分ぽい。 ■createRef API refは文字列型(ref="hogeRef"

とりあえずタイトルが長いけど、何がしたいかっていうとDOMの監視をしたいっていうこと。 divの中にimgが入ったとかpが入ったとか、formの中にinput hiddenが入ったとか消えたとか云々。 そういうときにフォームのサブミットボタンをアクティブにしたいとかっていう感じ。 で、それを実現するにはformだったら各フォームパーツのclickイベントとかの最後に処理を入れてみたりとか、 divだったらsetInterval使ってDOMの中身を監視するとかどうとか。 けどどっちもぶっちゃけ処理が多くなればなるほど面倒なことになってしまう。 特にフォーム関連なんてパーツが増えるたびに書かないといけないとか面倒ではある。 ってことでDOMNodeInsertedやDOMNodeRemovedっていうイベントを使ってその処理を書きましょう的な。 子要素に何か入ったとか消えたとかを監視したい 想

version: '2' services: app: image: 'silintl/php7' container_name: 'local-fuelphp' working_dir: '/var/www' environment: FUEL_ENV: 'test' volumes: - './:/var/www' - './apache2/sites-enabled/vhost-config.conf:/etc/apache2/sites-enabled/vhost-config.conf' ports: - '80:80' mysql: image: 'mysql:5.7' container_name: 'local-mysql' environment: MYSQL_ROOT_PASSWORD: 'root' MYSQL_DATABASE: 'database_name' MY

React-Reduxを使った開発でのディレクトリ構成をどうしたらいいのか的なことから、こうやって組んだらいいんじゃないか的なお話ということで、前回つらつらと書いたわけだけど。 これはクライアント側のjs単体で動くわけだから細かいことを気にする必要がなかったからよかったが、SNSにシェアしたときにOGPが設定されないと困るわけで。 というのもfacebookやtwitterのbotがjsをレンダリングすることができないから。 ちなみにgoogleはちゃんとjsをレンダリングしてクローリングしてくれるからSEOとかは問題ないわけだけど、たまにSEOのためにSSRをしないとって言っている人がいるのは個人的に謎。 ということで今日はOGPに対応するためのサーバサイドレンダリング(SSR)をするにはこういう感じがいいよ的なお話をば。 とりあえずサンプルを作ったので、よかったらこちらのgithubか

backgroundのチェックボックスとかラジオボタンをCSS3で装飾した際に、 チェックしてるかどうかをわかりやすくするためにアイコンを使いたいとかそういう事がある。 もちろんbackground-imageとかで画像を読み込めばいいけど、 でも画像をいちいち用意するのが面倒だしっていうこともある。 ということで今回は画像を使わずにアイコンを使うためにfont-awesomeをbackgroundに適用するお話をば。 label:before{ position: absolute; top: 50%; left: 20px; display: block; margin-top: -5px; width: 10px; height: 10px; content:'\f00c'; font-family: FontAwesome; color:#bbb; } ちなみに面倒だからチェックボ

とりあえず新しいことに挑戦しようということで、現在Go言語で色々と開発してるっていう。 今度まとめるかもしれないかもだけど、Go言語は色々と便利だっていう感じなので使っちゃおうって感じ。 で、その際に環境をちゃんとまとめていかないとなぁと思って、Dockerを使おうとか、ちゃんとGithubでやっていこうとか思ったっていう。 そうなるとDeployをしたいわけだけども、Deploy環境ってどうやって整えようとか、 いちいちEC2のインスタンスに頑張ってアップしていくのもなぁ〜って思ってたところ、 Elastic Beanstalkがdockerにも対応してるじゃんってことで今回その環境でやろうかっていう感じで。 で、だいたいのサンプルは転がってはいるんだけど、ローカルインポートだとかそこらへんはのってないので、今回はそれを踏まえたお話的な。 ■構成 . ├── Dockerfile ├──

cssだとメディアクエリーを使うことで、デバイス毎にcssを分離出来るから便利だったり。 けどjsにはそんな都合がよいものはないわけで、じゃあどうするかって考えると、 $(window).width()で条件分岐してあげるって考えるけど、 画面サイズが変わった場合って考えると$(window).resize()を使う事になるんだけど、 resizeはwindowサイズが変わるたびにイベント発火するし、 そもそもwindowsサイズが変わらなかったら発火できないからイベントを付与する前に発火を一度しないといけない。 まぁそこら辺考えると面倒だし、そもそも640pxみたいに指定した大きさで発火してほしいんだけど、 それに対応するにはwindow.matchMedia()を使うと対応する事が出来る。 ということで今日はそのwindow.matchMedia()の使い方についてをば。 $(docu

fuelphpでheaderやfooterが記載されたbase-template.phpをテンプレートとしたbase.phpというController_Templateを用意し、 それを継承したcontrollerで$this->template->contents = Presenter("index")みたいな感じでやって、 なんか面倒な処理をPresenter内でやるみたいな事はすごく便利ではあったりする。 けどこれってbase-template.phpのheader部分やfooter部分の変数を代入する事が出来ないっていう問題が発生する。 その場合base.phpのafterなりでごにょごにょするっていう方法もあるけど、動的なサイトの場合titleとかがんがん変わるわけで。 その度modelからControllerなりPresenterなりで処理したものをもう一度やるってなると無駄

fuelphpでサーバサイドを開発している際に、もちろんエラーを確認するわけだけど、 DEVELOPMENT環境であるならばどういったエラーが出てるとかそういう事は見れるわけだけど、 PRODUCTION環境ではoopsだったりviews/errors/production.phpに設定しているファイルが出るから見れないわけで。 で、そういった場合はfuel/app/logs/を見ればわかるんだけど、中々に面倒だし、 そもそもスケーリングしてる環境だとどのサーバで起きた問題なんだとかそういうこともあるわけで。 というかそもそも本番環境でエラーが出すなよっていう話ではあるんだけれども、まぁ見たいよねと。 ってことでそれをslackに送ってしまえばそもそもいつでも確認できるしリアルタイムに見れるわけだし。 ってことでそのためのパッケージを作ったので今日はその紹介をば。 ちなみにpush err

例えばXMLに外部リンクのURLを記入して管理し、 simplexml_load_fileを使ってリンクを都度読み込んでいる場合、 たまにparser error : EntityRef: expecting ';' in" and then;.みたいな形でエラーが出てしまう。 原因としては文字列の中に「&」が入っているからであり、 「&」はXHTMLでは「&amp;」といった形でエンコードされた状態でないといけない。 ということで今回はこれの解決方法をまとめてみた。 1)「&」を「&amp;」と置換する もうこれはそのまんまの意味。 ただ自分が管理してるならまだしも、 クライアントが管理している場合だと徹底されない可能性もあるので応急処置的な。 2)simplexml_load_file　simplexmlで読み込む前に「&」を「&amp;」に置換する XML上ではそのまま「&」で記入を

新サービスの開発にて、Facebook認証を用いるために色々とやっているわけだけれども、 an active access token must be used to query information about the current userが出てしまった。 以前書いたfacebook APIで「an active access token must be used to query information about the current user」が出てしまう原因の解決方法のものについてはもちろん解決してるんだけど、 また新たな問題が発生してしまった的な感じ。 ということで今回も諸々これらを解決するためにどうしたかということを書いていこうと思う。 ■環境 ・EC2 micro ・Route53 ・Apache 2.4.6 ・PHP 5.5.7 ・fuelphp 1.7 ・fac

webサイトを作っていて画像をアップする際に、その場でプレビューしたいとかそういう場合がある。 で、そのためにjquery.upload.jsを使って出来るようにしていたんだが、 なぜかIEでは画像がアップロードできずエラーが出てしまうといった現象が。 そもそもjquery.upload.jsはIEに対応していないのか？ なんて思ったけど全然そんな事は無く他に要因があるのではないかと思って色々と調べてみた。 http://lagoscript.org/jquery/upload?locale=ja http://blog.futuresoftware.jp/?p=99 http://eastpoint.biz/2012/07/31/ie9%E3%81%A7json-parse%E3%81%8C%E4%BE%8B%E5%A4%96%E3%82%92%E5%90%90%E3%81%8F/ ht

現在Macbook Pro Retina15を使っていて、起動ディスクの容量が足りないよってたまに怒られてたので、 どうにか容量を確保出来たりしないかなとか諸々とやってみたけど、全然効果がなかった。 けど原因としてはMacのノートPC特有のものであるsleepimageだと判明。 これを二度と生成しないように設定をしてみた。 ■sleepimageについて Appleのサポートにも書いてあるけど、 開いてたウィンドウとかそういったメモリに書き込んでた内容を保存するためのものらしい。 なので積んでるメモリ分だけ容量を食うとのことなので、16GBくらいも容量を食っていた。。。 で、これがMacのノートPCだけに存在する理由はスリープ時に電源が切れてしまったら。というためとのこと。 とりあえず自分はスリープ時に電源が切れる事が無いからこの機能いらないなって感じなので諸々設定することにした。 ■s

phpとかjavascriptとかgolangとかreactを中心につらつら適当に書いてたりなんだり。 パララックスサイトを最近作る機会があり、 普通にjsでscrollを取って諸々計算する方法でもいいかなと思ってたんだけど、 メンテナンスとかを考えると面倒だと思ってScrollTween.jsというのを使った。 もちろんパララックス系のライブラリはいくつもあったりはするんだけれども、 自由度が低いというかシーンが限られてるというか…みたいな感じであった。 その点ScrollTween.jsは直感的にいける感じのライブラリで中々良い。 ちなみにダウンロードはこちらから。 <script src="js/jquery-1.8.1.min.js"></script> <script src="js/ScrollTween.js"></script> <script src="js/jquery

例えばフォーム入力中だとか、 ショートカットを押し間違えたとか、 意図しないタイミングでブラウザ閉じてしまうとか色々とあるわけで。 そういうときってあぁ〜って感じでちょっとがっかりしたりする。 でもGmailみたいに本当に閉じますか？みたいな感じでアラート出してくれると助かるわけで。 というわけで今日はその組み方的なお話。 //jQuery $(document).ready(function(){ $(window).on("beforeunload",function(e){ return "本当に離れますか？"; }); }); //javascriptで普通に書く場合 window.onbeforeunload = function(){ return "本当に離れますか？"; } っていう感じ。 要注意なのは何があっても最後に行われるイベントであるので、 これを書いているとどうや

Titaniumで色んなデータを扱う際にデータをサーバに入れておくけど、 アプリを使っているユーザのデータだけは端末に格納して、 サーバとの通信を抑えて高速化したいといったことがある。 (他のユーザのデータはwindowをopenした際に都度取得してくる) じゃあそうする場合はどうしたら良いのかっていうのが今回のお話。 そういった場合はSQLiteを使ってデータを格納しておくんだが、 既に存在しているidに対して挿入(INSERT)することは出来ないので、 下記みたいな形で一般的にデータを確認して、挿入もしくは書き換えを行う。 var r = db.execute("SELECT COUNT(id) FROM table1 WHERE id = 1"); if(!r.field(0)){ //存在していない db.execute("INSERT INTO table1 (id,name)

Titaniumでアプリ開発をする際にネックとなるところとしては、 iPhoneの場合とAndroidの場合で見た目が変わってしまう部分があるところ。 特にtabGroupがAndroidの場合では上部に表示がされ、デザイン的にもなんだかなってなってしまう。 そこで今回はそのなんだかなを解消するための方法。 Android開発をしたことがあるならばわかるけれども、 基本的なパーツの配置というのはxmlで制御が可能。 Titaniumもその機能をカバーしてるのでそれを使ってあげればよいだけ。 ■手順 １：(projectフォルダ)/platform/android/res/layout/というフォルダを作成。 ２：(projectフォルダ)/build/android/res/layout/titanium_tabgroup.xmlを１のlayoutフォルダに入れる。 ３：titanium_

jquery.mousewheel.jsを使ってのマウスホイールイベントの取得をやってみた。 プラグインは今現在ダウンロードが出来ない？ので、 過去に使った案件より流用。 $(window).bind("mousewheel",function(event,delta){ switch(delta){ case 1: //ホイールを上に回転させた場合 alert("上に回転させました"); break; case -1: //ホイールを下に回転させた場合 alert("下に回転させました"); break; } }); こんな感じで記述すれば大丈夫！ と思ったけどホイールの回転が0となってしまい、 うまく取得出来なかった。 原因としてはjquery.mousewheel.jsだったので、 handlerをちょこっと改造。 ソースを貼りつけられないのでざくっと書くとこんな感じ↓ (52行目辺

react-navigationを使って様々な組み方をすると思うんだけど、よくあるのがネストして複雑なnavigationを作るという感じ。 stackNavigatorをネストしまくるとか、TabNavigatorの中にStackNavigatorとか、DrawerNavigatorの中にStackNavigatorとか。 で、今回はDrawerNavigatorについて。 スワイプしたらDrawerが出てきてしまうので、スワイプで戻りたい時にも出てきてしまう。 ということで今日はDrawerのスワイプを一時的にオフにするお話をば。