ITの隊長のブログ

ITの隊長のブログです。Pythonを使って仕事しています。最近はWebに戻ってきたお(^ω^ = ^ω^)

JavaScript

react-webcamでstreamに値が入るまで待つ

github.com const webcamRef = useRef(null) return ( // 省略 <Webcam audio={false} className="z-0" id="img" ref={webcamRef} /> ) こんな感じで起動していましたが、別処理でカメラで取得したデータを別途保存したいため、 webcamRef を使おうとしたら、streamにまだ値がないですよエラー。 どうやって待てばいいのかと色</webcam>…

hasOwnProperty で取得できない謎

すぐ解決したけど qiita.com こういうケースは in を使いましょう。

MediaRecorderのdataavailable eventが発火されるタイミングについて

stopが呼ばれるときってマジ????? developer.mozilla.org 記録を停止します。 この時点で、保存したデータの最後の Blob を含む dataavailable イベントが発生します。 これ以上記録は行われません。 アッはい 動作してみないと信じられない!!!(な…

末尾Slash(trailing slash)の有無で、APIへのリクエストがリダイレクトしたりしなかったりする謎

最初に結論から 結論 FastAPIはデコレーターで指定したパス通りじゃないと、 location を返す(指定したパスがlocationに入り、ブラウザでリダイレクトが走る) フレームワークやマネージドサービスによって仕様が違うっぽい?ので注意したい 環境 バックエ…

Nuxtでの実装について

フロントエンドの実装がなんもわからん状態になっていました ぼくはReactを触ったことがないので、あくまでVueしか語れないですが(正直Vueもそんな語れる気がしない)、もともとjQueryでSPA開発をしたことがある僕が、Component志向なフレームワークを触っ…

JavaScriptを雰囲気で書いているマン、やっとimport/exportを理解

謎だったこと。import ... from '...' で、 import {...} と import ... のどっちでかけばいいの問題。(後者は特にVueでよく書くなって思ってた) というわけでドキュメントを読みました(今頃) developer.mozilla.org developer.mozilla.org 完全に理解し…

vueのcomposition apiを理解したい

正確にはNuxt(v2)ですが zenn.dev こちらの記事参考にして進めています。 github.com 進捗がこちら↑(○ロ注意) まだ完全に理解はできていないので雰囲気だけですが、componentとロジックをめっちゃ分離できた感じがある。文章読むだけでは全くわからなかっ…

nuxt/authで謎のエラー

こんなエラーがでました。 ╭───────────────────────────────────────────────────╮ │ │ │ ✖ Nuxt Fatal Error │ │ │ │ Error: Cannot resolve "user" from "/app/user" │ │ │ ╰───────────────────────────────────────────────────╯ 摩訶不思議だったんで…

Promiseでretryする仕組みを導入する

そういえば、年末もそんなことにハマっていたな。そうかretryというキーワードかということを最近思った。 パクリ リスペクトした記事はこちら。 qiita.com 今回やりたかったこととして、GPS情報を取得するためにGeolocation APIを使っているが、こいつが何…

SPAの戻るボタンとブラウザの戻るボタンをあわせる

Nuxtでページを移動するとき、下記のようにします。 this.$router.push({path: '/about'}) で、移動したのちの戻り方ですが、History APIを利用します。 window.history.back() // または // window.history.go(-1) これでおk. また、URLは変えたいけど、…

fadeInとfadeOutを実装して死んだ

ウンコード export function fade(node, duration, _type) { // style属性にdisplay: noneが設定されていたとき console.log(node.style.display); if (node.style.display === 'none') { node.style.display = 'none'; } else { node.style.display = 'bloc…

BulmaをWebpackで動かすまでをメモ

Q.Bulmaってなんのブルマですか? → A.DBのブルマだそうです。 bulma.io これです。 webpack全然覚えていないのですが、jsをトランスパイルしたいので、ついでhtmlやcssもwebpackでやろう→cssフレームワーク使いたい。おおええよ!ってなったけど死んだ。 qi…

Angular2を触り始めたがこいつがフレームワークってことを忘れていました

意味深なタイトルっぽいけど、今日の反省です。技術的な話はしないのでそのつもりで来た人はブラウザバック。 CakePHP3をサーバサイドで、フロントをAngular2で開発しようとしました。 CakePHP3側はJson APIとして使っていましたが、部分的にCakePHP側でもvi…

jQueryしか使ったことがない人がAngularのFormで試したことを書く

この記事はAngular Advent Calendar 2016 17日目の記事です。(遅刻しました) この記事を書いている人 jQueryを使って、基本的な使い方でホームページのナビゲーション開閉やタブのアニメーションを書ける人 jQueryを使って、動的なFormを作ったり、サーバ…

【Angular2】親子じゃない同じ階層にいるComponentのメソッドを使いたいとき

タイトルだけじゃよくわかりませんね。つまりこういうこと。 AppComponent SearchComponent FormComponent ItemComponent LinkComponent みたいな構造があったときに、Linkでイベントが発生したらItemでとあるメソッドを実行する。とか、ItemからLinkに値を…

【Angular2】Converting circular structure to JSON

FormGroupの値をそのままpostしようとしたら怒られた。 そういえば、jsonの値になっていないじゃないのか。と思い、コンバートしようとする。 stackoverflow.com どうやら、そんなことはいらないらしい。 onSubmit(value: any): void { var url: string = ''…

【Angular2】Property 'map' does not exist on type 'Observable<Response>'.

stackoverflow.com main.ts import 'rxjs/add/operator/map'; rxjs/add/operator/mapをimportしたらいけた。

【Angular2】caused by: Error trying to diff '[object Object]'

ngForで、配列をイテレートしようとしたらエラーが。 ぐぐってみると stackoverflow.com Your extractData (and possibly also your HTTP API) is returning an object {} - ngFor requires an array [] to iterate. Oh... あ、てか、よく考えたら当たり前か…

【Angular2】caused by: Expression has changed after it was checked.

以前から何度か苦しめられているエラー github.com This is not a bug, it's a feature of dev mode working as intended. Calling enableProdMode( ) - see updated plunk when bootstrapping the app prevents the exception from being thrown. That said…

【Angular2】Formを動的に扱うコードを書いてみた

ここまで来るのに時間かかったよ!!! github.com コードは全部こっちにあります。コミットログを追ったら情報わかるかも。もしわからないなら質問ください。ただ私も初心者に近いので答えられる範囲ですが(^^; まずやりたいこととして、jQueryみたいにdom…

【Angular2】Cannot find control with unspecified name attribute

怒られた。 FormGroupで、viewにngModelを増やしたら怒られた。 export class ScheduleForm { private startDatetime:string; private endDatetime:string; constructor(private datetimeForm:DatetimeFormService, formBuilder:FormBuilder) { this.myForm …

【Angular2】ComponentからComponentを動的に作成してみました

タブ機能を自作してみたけど、タブComponentとその下の子Componentとどうやってやり取りさせいようかと悩んでいました。 世界に聞いてみましたが、説明が足りないのか返事は来ませんでした(´・ω・`) stackoverflow.com つーわけで、色々調べて試したんです…

【Angular2】Angular2でモーダルを自作しました

自作っつーかパクリなんですけどね github.com 元はこちら。ありがとうございます。 qiita.com 概要はgithubのREADME.mdに詰めましたので、そこをみてほしい。 ちなみに、感想としては、Angular2のバージョンアップの速度早すぎ。 個人的な感触として、3ヶ…

【jQuery】input[type="file"]をクリアしたい

チェックボックスとかで、input[type="file"]をクリアしたくなった。 ただ、こいつだけはセキュリティの関係から、簡単にクリアすることができないので、clone()を使う必要がある。ようは、一旦削除して、空っぽを書き込む流れである。 $('#inputFileType').…

Java&JavaScriptで全角数字を半角数字にするプログラム

最初Javaに書いて、あとからJavaScriptも書いた。 Java public static String hullToHalfNumber(String s) { StringBuilder sb = new StringBuilder(s); for (int i = 0; i < sb.length(); i++) { int c = (int) sb.charAt(i); if (c >= 0xFF10 && c <= 0xFF…

bowerとgulpで試してみたこと

ただのログ bowerで色々インストール ずっとパッケージを管理するのはnpmと思っていたけど、npmはサーバ用(node用かな?)のプラグインを主としているらしい。 フロントはbowerを使う。 まずはbower initする。 $ bower init angularjs1.5関連をインストー…

【JavaScript】javascriptでのデータオブジェクトのkeyに「:(コロン)」があるときのアクセス

初歩的なことですが、メモ。 こんな感じのデータオブジェクトがあったとする。 var data = { 'title': 'test', 'wp:test-data': [{ 'link': 'http://www.yahoo.co.jp' }] }; 普通にアクセスする。 > data.title "test" まぁこれは普通。 次にコロンのやつに…

ひさびさにやると忘れるJadeのif文の書き方

そう忘れるものではありませんが、頻度がね(少ないから) 与えられた値と画像名がマッチしなければ画像名の後ろの'_off'を付与するという条件書いた。 mixin img_tag(absolute_path, image_name, active) - var nav_image_name = image_name if image_name …

【CakePHP3.x】Auth Componentのセッションが切れた時にAjaxされたら、JavaScript側でリダイレクトさせるためのBeforeFilterを書く

タイトル長い タイトル通りの話。 Authのセッションが切れた後にAjaxでアクセスするとエラーが返ってきて、それ以上動作できない。 さらに、エラーのviewも返り、なんかキモいので、自分で作成したエラーメッセージとリダイレクトURLをJSONで渡せないかなと…

【AngularJS1.5】Error: $sce:unsafe Require a safe/trusted value

app.itemListをループして、そのなかにあるhtmlソースをviewに吐き出そうとした。 <div class="item-section" ng-repeat="item in app.itemList"> <div class="item" ng-bind-html="item.html"></div> </div> そしたらエラー(°ω° AngularJS Error: $sce:unsafe Require a safe/trusted value Attempting to use an unsafe value in a safe context. $sce・・・? なん…