Close icon
2019月09日10日

PullToRefresh.jsとWKWebViewを使ってリフレッシュ時に触角フィードバックを実装する

ニコニコログの開発の中ではタイムラインの更新機能のために "PullToRefresh.js" を利用しています。また、iOS版のニコニコログも基本的には TAppKit をベースに開発しているため、表示部分の多くは WKWebView を使用しています。

ニコニコログ開発の記録の連載記事の初期にも書いている通り、

PullToRefresh.js 側の処理

以下のコードは CoffeeScript ですが、JavaScript や TypeScript の場合は便宜置き換えてみてください。

PullToRefresh.init({
  mainElement: SELECTOR
  onRefresh: ->
  if window.webkit isnt undefined
    window.webkit.messageHandlers.callbackHandler.postMessage('runHapticTouchSuccess')
})

window.webkit.messageHandlers.callbackHandler.postMessage('runHapticTouchSuccess')の部分で、WKWebView 側に通知を送ります。

2019月09日06日

SONY VAIO PCG-C1R と iSight カメラ

iSight

Slackのビデオチャットの話を書いていて思い出したので、久しぶりにちょっと仕事ネタから外れたガジェットネタでも書いてみましょうか。

ただしみんな気になるような最新ガジェットネタではなくて、正反対の回顧録的になりますが。

2019月09日06日

アトトックとリモートワーク、そして働き方の話 (1) - Slack がないと仕事になりません

記事タイトルの通り、アトトックとリモートワークに関することや働き方の話を1本の記事にまとめようと書いていたのですが、これもまた1本の記事のボリュームじゃ伝えきれないことが大量にあることに気づかされました。そんなわけでこの「アトトックとリモートワーク、そして働き方」の話も連載っぽく何度かに分けて書いてみたいと思います。

Slack

連載系の記事増えすぎだ・・・。

2019月09日02日

◯△◇アトトックのデザインチームの話◇△◯ (1) - ワンストップで開発ってなんだろうに対するひとつの答え

弊社アトトックの強みのひとつ、それは社内にデザイナーがちゃんといる、そしてデザインチームが存在しているいうこと。誤解を恐れずにいうと、開発会社や制作会社の多くは社内にデザイナーがいなく、特に開発で発生するデザイン業務は社外のデザイナーに依頼しているってケースが非常に多いです。

ではそんな弊社アトトックのデザインチームが普段どんなことをやっているのかをちょっとここで書いてみたいと思います・・・が!まずはよく目にしたり耳にする「ワンストップ」って言葉を考えてみたいと思います。

2019月08日19日

NikoNikoLog 開発の記録 (7) - "アプリとしての自然な動きを研究せよ!" UI/UX設計は注意深く観察するところからはじまった

前回の記事で軽く触れた UI/UX 設計の話。前回、以下のように書いていました。

ただ実際にアプリと同じレベルのユーザー体験を実現しようと思うと、そもそもの普段使っているアプリの「自然な動き」の部分(普段は誰も意識していない動きや操作性の部分)がどのように設計、実装されているのかを注意深く観察して、それをひとつひとつウェブの技術で置き換えて実装していってやる・・・っていう、結構途方もない作業があったりもしました。

この辺りの話を今回は少しばかり掘り下げて書いて行こうかと思います。

2019月08日16日

NikoNikoLog 開発の記録 (6) - 実は秋にリリースされる iOS 13 から追加されるダークモードにも対応しています

本当は6回目の記事は UI/UX 絡みでそっち方面のエンジニアさんやデザイナーさん向けのネタを書きかけていたんですが、思いの外まとめ上げるのに時間がかかっています。なので今回は予定を変更して NikoNikoLog の次期大規模アップデートでの新機能をまたちょっとご紹介。

タイトル通りですが、この秋にリリースされる iOS 13 からサポートされる、iPhone のダークモードにも対応していますよ、ってお話です。

2019月08日09日

NikoNikoLog 開発の記録 (5) - ホーム画面に追加して使うとアプリじゃないのにアプリ(っぽく)なります。お知らせ?重大発表?

前回の記事では開発中の画面のスクリーンショットを一部公開しました(右の画像)。

「モバイルウェブ版の開発の話」としているのに、このスクリーンショット、Safari のアドレスバーが無かったりしていることにお気づきの方がもしいたら鋭いです。

NikoNikoLog の次期大規模アップデートでは、Safari で NikoNikoLog を開いた状態で「ホーム画面に追加」すると、ほぼそのままアプリのようなインターフェイスで使うことができるようになるんです。

2019月08日08日

NikoNikoLog 開発の記録 (4) - ニコニコカレンダー、初登場から10年の時を経て遂に生まれ変わる 【 開発中の画面を初公開!】

前回前々回はかなり開発寄りな記事になってしまいました。今回は遂に次期リリース予定の NikoNikoLog の開発中の画面のスクリーンショットを少し公開しちゃいます。

別に公開を勿体ぶっていたわけではないんですが・・・あくまでも開発中の画面です。実際、現時点では開発フェイズとしてはかなりリリースに近い段階に来ているのですが、それでも日々の開発やテスト、レビューの中で画面設計など変わる部分があったりします。

そこのところをご理解いただいた上で、開発中の画面をみていただけたら幸いです。

2019月08日07日

loggerjs の話と製品開発から生まれる成果物

個人の GitHub でですが・・・loggerjs を公開してみました。loggerjs は JavaScript でフロントエンドの開発を行う際に欠かせない console.log をもうちょっとうまいこと使いたいって願望から開発しました・・・なーんて書いてみるのもいいんですが、実際はそういう console.log を使った作業が、TAppKit の開発自体、そしてそれを利用している NikoNikoLog の次期大規模アップデート の開発には必要不可欠な状態になったことから、もともとは TAppKit への組み込みライブラリとして CoffeeScript で開発していたものを、コンパイル不要で弄りたい人は弄りたい放題になるはずの JavaScript に書き換えて公開しました。

loggerjs の概要

loggerjs は、以下のようにウェブブラウザの開発ツールの Console にログを出力します。

loggerjs

機能としては単純なものが多いのですが、主な機能は以下の通りです。

  • DEBUG, INFO, WARN, ERROR の4つのログのレベルに対応
    • 各レベルのログは接頭辞にレベルをつけて、指定された色(オプションでも設定可能)で出力
  • 初期化時に動作環境を設定してやることが可能(後述)
  • オプションでログの出力元の情報も付与可能、省略も可能(スクリーンショットの [INFO] ↳ MobileNikoNikoLogApp の部分はログの出力元)
2019月08日07日

NikoNikoLog 開発の記録 (3) - TAppKit が生まれ、その開発がはじまった

またまた前回に続き、NikoNikoLog のモバイルウェブ版の開発の話、しかもまた前回から引きずっているフロントエンド用フレームワーク開発の話です。

完全に開発者向けの記事が続いてしまって申し訳ありませんが、もうちょっとだけお付き合いください。


アトトックラボとは

株式会社アトトックメンバー が技術の話、デザインの話、キャラクターの話、ときどき脱線してガジェットの話やライフハックの話など好きなことを書いています。


連載記事


最近の記事


タグ