サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
円安とは
watanabeyu.blogspot.com
wordpressのサイトをあえてのReact + WP Rest APIで書いているんだけど、 React + Webpackでビルドした際に、ファイルサイズがすごく大きくなってしまうことがある。 いくつか原因があるので、今日はそれらを解決して少しでもファイルサイズを小さくするには的なお話をば。 ちなみに自分の環境は以下のような感じ。 package.json { "name": "hoge", "version": "1.0.0", "description": "hogehoge", "scripts": { "dev": "webpack --config webpack.dev.config.js --progress --watch", "build": "NODE_ENV=production webpack --config webpack.prod.config.js -
hooksは便利というかいい感じなわけで。 useStateとかuseCallbackとか色々とあるわけで。 その中で公式的にESLint入れるならばreact-hooks/exhaustive-depsとreact-hooks/rules-of-hooksを入れておけって言ってるんだけど、react-hooks/exhaustive-depsが悪さをしていたっていう。 ということで今日はreact-hooks/exhaustive-depsが悪さをするパターン的なお話をば。 function HogeScreen(props){ const navigation = useNavigation(); const articleId = navigation.getParam('id'); const [article, setArticle] = useState(null); // g
サーバと通信するためにはjQueryのAjaxを使えばいいんだけど、 fetchっていうものがあったりして、reactとか使ってるとfetchとか使いたくなってくる。 というかむしろjQueryを使わなくなるわけなんだけど。 で、そのfetchを使ってPOSTする時にサーバ側でPOSTデータを受け取れないってことがあった。 ということで今日はそのお話をば。 とりあえずapplication/jsonで送る場合と、formDataを送りたい場合を書いた。 簡潔に述べるとformDataを送りたい場合は、Content-Typeを指定してはいけないということ。 指定してしまうとboundaryがうんちゃらかんちゃらだかなんだかよくわからないことになってしまってサーバ側で処理できなくなる。 なのでこれに気をつけて記述しないとダメっていう。 確かにjQueryでもformDataを送信するときはf
Expoがv33にアップデートした。 今回は時間かかったからモリモリなモリな内容でたくさんあるよね的な。 hooksとかTypeScriptとかreact-native-webでweb対応とかカスタムExpo Clientのビルド云々とか。 Expo SDK v33.0.0 is now available ということで今日は変更点的なお話をば。 ちなみにまだExpoのビルドサーバがv33対応していないからスタンドアローンビルドできないらしい。 注意文消えてるからもうできるっぽい ■ExpoでWeb対応 Built-in web support for Expo CLI and SDK, first announced in March, is now in full beta with SDK 33! This means Expo projects are now tri-platfo
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
最近流行ってるだかよくわからないReact Native。 むしろ手を出しているところが少ないという印象というかなんというか。 けどiOSとAndroid両方作れるし、Javascript Bundleだしで意外と高速だし便利だし。 とりあえず環境を作るのが面倒とか色々とあるんだけど、 実はexpoでやってしまえば意外と簡単だよっていう感じではあったりする。 ってなわけで今日はexpoの導入からビルドおよびiOSのデプロイまで的なお話をば。 とりあえずの流れとしては下記。 1.node関連のインストール ・npmもしくはyarnのインストール ・wathmanのインストール ・flowのインストール 2.エミュレータ関係のインストール ・Xcodeのインストール ・Android Studioのインストール ・Genymotionをインストール 3.expo関連のインストール ・expo
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
アプリを作っているとプッシュ通知を送る必要があるわけで。 もちろんAPNsを直接うんちゃらとかしたりすればよかったりするんだけど、AWSにはAmazon Simple Notification Serviceっていうのがあるわけで。 このSNSが諸々面倒なところを代替してくれるっていう優れたもの。 色々と情報を調べるとこうやればプッシュ通知を送信できる!とかは書いてあるんだけど、 attributesのenabledがfalseになってるものをどう復帰させるとか、そういったプラクティス的なのが全然情報がなく。 ということで今日はSNSを通してpush通知を送る際には、こうやったらいいんじゃないか的なお話をば。 ざっくりとした流れ 1:headerにdeviceTokenみたいな形でiOSのトークンを常に送信 2:アプリのトークンを確認すると同時にデバイストークンをSNSに送信してエンドポイ
■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"
$server = "xxx.xxx.xxx.xxx"; $port = "22"; $username = "user"; $password = "password"; $connect = ssh2_connect($server,$port); if(ssh2_auth_password($connect,$username,$password)){ $sftp = ssh2_sftp($connect); $stream = fopen("ssh2.sftp://{$sftp}/foo/bar/hoge.txt.tmp",'w'); $file = file_get_contents("/var/www/html/local/hoge.txt"); fwrite($stream, $file); fclose($stream); ssh2_sftp_rename($sftp,"/
とりあえずタイトルが長いけど、何がしたいかっていうと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か
ReactでModalを使おうと思った時に選択肢はいくつかあるわけで。 例えばReact BootstrapのModalとかMaterial UIのDialogとか。 けど実際こんなにたくさんcomponentを使うつもりはないんだよなぁってときはmodal単体のcomponentを使うということがある。 ちなみに実際に自分が使っているのはBoronっていうModal。 軽量だしそもそもそんなにオプションがないからすごく使いやすいしっていう。 けどこのBoronだけど面倒なことにbody直下にModalが生成されるわけではなく、componentを入れた位置にModalが生成される。 気持ち悪くないといえば気持ち悪くないけど、Modalみたいなものはbody直下においた方が気持ちいいよねっていう。 ということで今日はどうやってbody直下にModalを置くか、それを使うとどういうことができ
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のルーティング設定の仕方。 http://hogehoge.com/1みたいな形でとあるテーブルのid=1のデータを表示したいということがある。 その場合はconfig/routes.phpに'(:num)' => 'detail/index/$1'みたいな感じで設定してあげればいい。 この場合は1だからわかりやすいんだけど、http://hogehoge.com/(任意のページ)みたいな形のときは、 '(:any)' => 'detail/index/$1'と書くと、他のページとバッティングするとかそういう問題が出てきてしまう。 で、そのバッティングを封じるには全ページのルーティング内容を表示しないといけないけどそれって面倒。 特にページが増えてしまったときとかはいちいちroutes.phpに設定を書かないといけないのでもう最悪。 ってことで今回
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
ちなみにドライバがGDなのが悪いかと思って他のを使ってみたけど同様のエラーが出てしまう。 ということから察すると/tmp/****のような一時的な拡張子無しファイルはImageクラスでは通常読み込めないという感じじゃないんかと。 ってことでツイートに書かれているようにとあるconfigを記載してあげるとうまくいく。 ただしpersistece=>trueとなってるが正しくはpersistence=>trueであるけど。 ってことで正しい書き方はこんな感じになる。 // 画像を読み込む Image::load('filename.gif'); // 画像をアップロードし、Image::load メソッドへ直接渡す Upload::process(array( 'path' => DOCROOT.DS.'files' )); if (Upload::is_valid()) { $data =
ちなみに今回の話はamazon-sesをdriverとして使ってようが、何を使ってようが当てはまるであろうお話。 $sendmail = \Email::forge(array( "driver" => "ses", "charset" => "jis", "encoding" => "7bit", "encode_headers" => false )) ->to('hoge@hoge.com') ->from('from@hoge.com',"from address") ->subject('メール文のタイトルだけどかなり長めに書いてみたけどどうでしょう的な') ->alt_body('本文'); 重要なのがencode_headersというパラメーター。 メールのcoreクラス内でこれが付いていると自動的にメールのタイトルと送信者名がエンコードされてしまう。 そうするとこちらで指定
S3のあるバケットにファイルがアップされたら違うバケットにコピーしたいってことをしたいときに、 通常だったらcronで定期的にS3のあるバケット内を監視するなりなんなりが考えられるけど、 それってまぁあまりエコじゃなかったりとかそもそもそこまでする必要はないんじゃないかとか、 というかそもそもとあるバケットからとあるバケットにコピーする場面ってぶっちゃけあまりないよねとは思うけど。 けどまぁそこらへんをうまく解決するにはS3のイベント通知をSQSに向けてあげることで解決出来るかと。 ということで今日はその辺のお話をば。 S3のコンソール上から追加出来るので追加。 名前は適当で、イベントはput(更新)とpost(追加)の2種類を入れてあげる。 送信先をSQSキューとしてあげ、SQSキューのARN(SQSコンソールの詳細に書いてある)を入れてあげて保存。 ■SQSのキューを見にいくプログラム
例えばXMLに外部リンクのURLを記入して管理し、 simplexml_load_fileを使ってリンクを都度読み込んでいる場合、 たまにparser error : EntityRef: expecting ';' in" and then;.みたいな形でエラーが出てしまう。 原因としては文字列の中に「&」が入っているからであり、 「&」はXHTMLでは「&」といった形でエンコードされた状態でないといけない。 ということで今回はこれの解決方法をまとめてみた。 1)「&」を「&」と置換する もうこれはそのまんまの意味。 ただ自分が管理してるならまだしも、 クライアントが管理している場合だと徹底されない可能性もあるので応急処置的な。 2)simplexml_load_file simplexmlで読み込む前に「&」を「&」に置換する XML上ではそのまま「&」で記入を
fuelphpでS3との連携をしたいという場合は、AWS SDKを使えば簡単に出来たりはするけども、 そもそも使うのはS3だけだしな…とかっていう人にとってはSDKの導入は中々に面倒だったりする。 そこで今回はこのパッケージを入れれば簡単に出来るよっていうのがあるのでその紹介をば。 fuel-s3 こちらはpackageなのだが、S3の機能だけうまく取り出している。 ちなみにREST系のpackageなので、わざわざ変な事をしていなくてシンプルなのがよかったり。 なのでこれを使ってアップロードされたファイルをS3上に保存する方法はこちら。 Upload::process(array( 'path' => DOCROOT.'tmp', 'file_chmod' => 0666, 'create_path' => true, 'randomize' => true, "ext_whitelis
bootstrapは仕様上入れれないとか、 諸々の理由上入れたくはないなっていうときがあるんだけど、 メニューをどうしてもbootstrapのようなドロップダウンメニューを実装したいときがある。 jsで実装する方法もあるけど、jsで実装するのはなんとなく面倒だし、 スマホなんだしそもそもCSS3でやった方がすっきりするからいいよねという感じでもある。 ということで今回はCSS3でドロップダウンメニューを実装する方法を書いてみる。 【html】 <a href="#toggle" class="menu"><img src="./img/btn_menu.png"></a> <ul class="dropdown-menu"> <li><a href="#1">メニュー1</a></li> <li><a href="#2">メニュー2</a></li> <li><a href="#3">メニ
新しくサービスを作るなりなんなりするときにやっぱり作る必要がある管理画面。 fuelphpのmigrationなりを使えばさくっと作れるんだけど、そこで権限の付与とかなるとconfigの設定なりで面倒だったり。 というかそんなのはもっと簡単にやりたいぞ!っていう人にオススメなのがFacebookのログイン機能を使う的な。 Facebookのアプリにはサンドボックスモードがあるので誰もがアプリを使う事が出来ないようにするとか、 Roleという形で役割を付与する事が出来たりする。 で、これを使えばサイトの管理画面でもその権限を継承したままアプリをインストールした人しか見れないので楽だったり。 ということで今日はアプリの権限を確認する方法だったり、管理画面の認証機能だったりの作り方のお話をば。 ■1. Facebookアプリの作成 ・developers.facebook.comにアクセスして、
次のページ
このページを最初にブックマークしてみませんか?
『適当な感じでプログラミングとか!』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く