揚げログ

Karaage(krgpi)の技術開発関連のブログです

モバイルユーザビリティを考慮したLeteroの再デザイン

概要 現在、Leteroという、自分の好きなことや推してるもの・人、また社会に対して感じることや、日々思ってること、このようなあらゆる「日々思ってるけど人にわざわざ話すにはちょっと重い」みたいなことを投稿できるサイトを作っている。 letero.jp この…

ディスカッションサイトIdeoj(イデオ)の再デザイン

筆者は、個人開発プロジェクト「ディスカッションサイト Ideoj (イデオ)」の企画・開発を主に行っており、昨年10月頃に発起してから開発を続けている。 この度ほぼ全てのページ(機能)について、情報構造とその見せ方を考慮した再デザインを実施した。(5月…

近況報告 2020/07

1月頃、noteやfanboxに近況報告や"お気持ち表明"をして、2020年の決意表明を行っていたが、それから半年たったので、また近況報告をする。 誰のために書くとかではなく、思ってることを書いてスッキリする目的だけの記事です。 2020年の目標 1月当初、2019年…

store.stateの読み込みは遅延する - Nuxt.js

概要 Nuxt.jsでvuex storeでデータのCRUDを行ってる状況を想定する。 例 すでにstate.userには他のページか親コンポーネントでの操作(dispatch, commit)で、undefinedではない何らかのObjectが入っている前提とします。 ダメなコード このコードは動いたり動…

SSRで使えないライブラリをSSRで使う - Nuxt.js

状況 Nuxt.jsでwebサービス開発をしていると、SSRで使えないライブラリをSSRで使いたい時がある。例えば、 DOMにアクセスするライブラリ (SSRで使うと毎回orページリロード時にdocument is not defined, window is not definedのようなエラーが発生する) 回…

CSSアニメーション、使っていきたい

Webページを作るとき、画像でなくてもCSSで描ける記号やマークは、軽量化のためにCSSで書きたいと思っている。ブラウザのCSSレンダリングエンジンを有効活用でき、画像をダウンロードする無駄な通信を減らせる。 Googleのサイト評価サービスである「PageSpee…

側面12ボタンのRazer Nega TrinityをMacでフル活用する

今回は、側面12ボタンのゲーミングマウス Razer Nega Trinity をエンジニアである私が愛用する理由を、説明したいと思う。 Razer Nega Trinity www2.razer.com MacユーザーならMagic Mouseを使えばいいのでは?と思うかもしれないが、長期間あのマウスで作業…

Nuxt.jsで作ったSSRなwebサービスをfirebaseにデプロイする

環境 node v10.16.3 npm v6.9.0 nuxt v2.10.2 Nuxt.jsで作ったSSRなwebアプリをfirebase Hosting, functionsにデプロイするために行った設定の一覧です。すでにSSRモードでwebアプリができている前提で話を進めます。 1 firebase CLIの開発環境へのインスト…

AR kit ImageTracking - トラッキング画像が画面外に出たことを検出

デリゲートメソッド didUpdate に以下のように書く。 didUpdateはARAnchorが更新される(TrackingImageの座標が変化する)間、呼ばれ続けるデリゲートメソッドである。 TrackingImageが画面外から出ると当時に、ARAnchorは更新されなくなり、このデリゲート…

AR kit で顔面キャスアプリを作る (その4 transformから目の回転角を求める)

だいぶ間が空いてしまいました。 この間は、AR kit FaceTracking Configurationで、表情の値(blendshapes)を取得しましたが、今回は目の動きを取ってみたいと思います。 全体手順 AR kitのFaceTrackingで、目の動きを数値データで取り出す ソケット通信でサ…

enPiTビジネスシステムデザイン分野ワークショップ2018に参加してきた

筑波大学で開かれた、enPiT(エンピット)の最終成果発表会に参加してきたので、メモ兼感想を残します。 イベント概要 enPiTとは? 成長分野を支える情報技術人材の育成拠点の形成 チームで開発を行い、その過程で学生が主体的に学ぶ授業形態 主にチーム開発…

AR kit で顔面キャスアプリを作る (その3 顔面情報の送受信)

今回やること 今回は、その2で確認した、顔面各パーツの数値データを、アプリとサーバーの間で送受信します。 送信 こんな感じでサーバーに数値をリアルタイムに送信することに成功しました。 AR kitのFaceTrackingで顔の各パーツの動きを数値で取ってWebSoc…

AR kit で顔面キャスアプリを作る (その2 ARFaceAnchorを理解してみる)

前回、SwiftでSocketIOをアプリに実装するところまで終わりました。 今回は、ソケットで送る内容について検討していきます。 まず大前提として、ソケットで送れるのはStringのみですので、必要な情報を適当なJSON配列にしていきたいと思います。

AR kit で顔面キャスアプリを作る (その1 xcodeprojにsocketIOを導入)

前回(昨日)に引き続きやって行きます。 実装 実際キャスティングアプリとなると、配信者が何人もいて、それぞれの配信ページに多数の閲覧者がいる状況が自然な想定になります。 しかし、まずは実験ということで、配信者は1人、閲覧者が数人という状況(手…

AR kit で顔面キャスアプリを作る (その0 なんで作るのか)

今回から、1つのアプリを作る過程を、0の状態から完成まで、何回かに分けて記事を投稿していきます。 今回はまだ実装には入らず、前提の確認です。ちょうど卒論に時期で、頭が卒論になってるので、見出しが論文っぽくなってますが、まあ分かりやすいのでいい…

2018年購入ガジェット総覧およびその所感

本年の散財総評 年末に今年1年間で使用したクレジットカードの金額を確認すると、毎年驚愕することになるが、今年も例外とはならなかった。冷静に考えれば、今部屋にある物品の半分程度は今年購入したものである。言い換えれば今年はパソコン周りを中心に、…

Nvidia Web Driver が Mojave 未対応な件

Nvidia Web Driver for macOS Mojave 10.14の情報 いろいろなサイトに情報が出ているが、一番信頼度が高そうなのが、Nvidia公式フォーラムの以下のスレッド - When will the Nvidia Web Drivers be released for macOS Mojave 10.14 - - NVIDIA Developer Fo…

AR kit 2のARImageTrackingConfigurationで遊んでみた

背景 数学の教科書とかで、グラフが値の変化に応じて動いたら分かりやすいのにな、と思ったことがある。 図をスマホで写したら動き出す、立体は飛び出して色んな方向から見ることが出来る、このようなAR体験がARImageTrackingConfigurationで簡単に精度よく…

AWS EC2インスタンスのURLは固定ではない

事の発端 事の発端はインスタンスの再起動。インスタンスを再起動したら、まずsshができなくなり、さらに公開ページに外部からアクセスできず。 原因 セキュリティグループいじったり、ネットワークインターフェースいじったりしたが、何も変わらず。 冷静に…

HexoとGithub Pagesで詰まった点

ブログ移転の背景 過去、yahooブログ、fc2ブログ、WordPress、Bloggerと、色々なブログサービスをさまよった。どれも自分の使い方では一長一短ではあったが、最近特に、 * markdown記法でローカルで記事を作成したい * サーバー側の仕様変更・サービス変更に…