全ての記事

wechat「小程序」について

2016-10-28 @sunderls

小程序 wechat mini-program

WeChatの「小程序 シャオ チャン シュ 」皆さんがご存知何でしょうか。簡単に言うとjs/css/htmlの技術でWeChat上走れるNative Appが作れるのです。

ここは自分からの感想をまとめます。(腕がいい人じゃないので、甘いところがあったら、ご容赦を)

タイムライン

  1. 2016.1.11 WeChatのボス張小龍が小程序の発想を公にした。小程序の誕生の経緯は、いま皆使ってるアプリが重すぎ、なぜならアプリが複雑でほとんどの機能が利用してない、ユーザーが簡単なタスクを完了するときにわざわざ別のアプリを起動しなくてもよくしたいっていう。
  2. 2016.9.21 private betaテスト,200名しかない。でもドキュメントとIDEは公開されて、誰でもみれる。https://mp.weixin.qq.com/debug/wxadoc/dev/
  3. 2016.9.23 ビデオ流出。http://v.youku.com/v_show/id_XMTczMzk4NTgwOA==.html

感想

1. Facebook Instant Articleとにてる。フロントの技術で、native appを走らせる

つまりユーザーに対して小程序が画期的じゃない。Facebookが1年前もInstant Articleをリリースした。ニュース提供者がhtmlに特殊なjs metaを入れたら、facebook appではこのhtmlを普通のwebviewで表示するのではなく、native componentsの組み合わせとして実行する、ユーザーに対してはすごくスムーズに見える。小程序はだいたい同じ発想だと思う。違うのはInstant Articleがニュース向けの者でcompoentが限られた、拡張性にては小程序が優れる、論理的にはなんでもできる状態。

1年経った今ではfacebook instant articleがすごく発展したとはいえない、washington postなど有名な新聞社が入ってるが、どうしても参加しない者もいある。理由の一つでは、webでパフォーマンスを改善する余地がいっぱいで、facebook向け専用の対応は入れたくない。

2. 小程序のコード見たら、React Native风とほぼ同じ。

まず小程序の公式例を見ましょう。https://mp.weixin.qq.com/debug/wxadoc/dev/?t=20161107

app.json にはアプリのconfig

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

一目瞭然だ。複数のページがあって、ヘッダー部分の文字や色など設定できる。

app.wxss

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

これはcssとほぼ一緒だね。

app.js

//app.js
App({
  onLaunch: function () {
    //APIを読んでデータを取得
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //ユーザーログインAPIを呼ぶ
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

ここは全てのページで利用できるglobal methodをappにつけて、アプリの初期化をする。

次はindex pageを見てみよう。

トップページ index.wxml

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

ここはhtmlを認識してようい、<view>,<text>など特殊なタグもある、data bindでは普通に括弧二つ。

トップページ index.js

//index.js
// app instanceを取得
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //event処理
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //app instanceのメッソード
    app.getUserInfo(function(userInfo){
      //データを更新
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

datathat.setData()に注意してほしい、これ、Reactのstatethat.setState()まった同じじゃない。

ではReact Nativeの例を見てみましょう https://facebook.github.io/react-native/releases/next/docs/state.html#content

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

<view>を注意してほしい、小程序と似てるのは明白だ。 一番違うのは小程序がwxml テンプレを提供してる、render()を避けてる。でもこれは根本的な違いじゃなくて、ただ開発者を楽にするためだと思う。

3. ユーザーに対しては、小程序は触れる、けど習慣が変わらないと思う

ユーザーが一番怠惰で一番好奇心を持つ者だ。小程序が公開されたら、WeChat内部では無論いっぱいなリンクが現れる。流出されたビデオからみると、現在はコンタクトリストに特別なアカウントを左にスワイプすると、「アプリを起動する」ボタンがタップできる。でもリンクで起動するのは必ずあると思う、なぜなら、シェアしやすいし、チャットやモーメンツなどで発散できる。でユーザーがどう受け取るのかは微妙、もしwechatを使用しながら小程序を見たら、多分ちょっと遊んだら忘れる(まあ、これは小程序本来の目的、使い捨てられるもの)、もしわざわざなにを探るや予約するなどであれば、おそらくwechatは起動しなく、直接専門のアプリを利用するのは妥当だと思う、そのアプリは必ず必要なものが入ってるし、wechatはチャットアプリっていう強い印象もユーザーからつけられた。

なので小程序が成功するかどうかの肝心なところはユーザーのアプリ利用習慣を変えられるかどうかっていうのだ。これはできないと思うのはもう一つの理由があるーーもしwechatにいっぱいな小程序が入ったら、ユーザーがどう小程序をアクセスするのは現在iOS/Androidのアプリと同じ問題になる。

4. WeChatに対しては小程序が幻な夢。破れても大丈夫

小程序が成功したらWeChatが一番ハッピーだ、ユーザーがWeChatに配る時間が増えるので。もし失敗しても問題がない、なぜなら既存のものが減ってないし、小程序がユーザーへ余計なものを提供するだけだ。

5. Appleに対して、小程序が問題だ。でもunder control

もしAppleの収入に影響が出たら、リンゴさんがただじゃすまないと思う。でもリンゴさんがルールを決める立場なので、なにかあたらWeChatを責めればいいなので、under control.

6. 開発者としては、試す価値がある。でも大きめなアプリでは遠慮すべき

個人的には小程序がチャットにつく付属する機能だと思う、なのでツールやカジュアルゲームしかなくて、開発者が簡単に作れる、costが低い。

でももししっかりとするアプリだと、小程序の開発コストが高すぎ。ユーザーが欲しがり屋だ、簡単なアプリでもどんどんいろんな機能が欲しくて、アプリがどんどん複雑になる。これは仕方ない、小程序の設計がただのミドルウェアで、完璧な複雑のアプリは作れない。もしアプリの試し版としてユーザーに提供し、さらにユーザーを本体アプリへ誘導するのはいい気がするけど、でもどうせアプリがインストールされてるし、app scheme で素直にアプリを立ち上げるのはいいじゃん。

7. エンジニア世界ではいいこと、すぐ冷えると思う。JSはちゃんと勉強すべき。

アプリがopen platformを提供するのはよくあること、皆全部やってる、WeChatの小程序が大胆的な一手だと思う。エンジニア世界に新鮮な血液を注いだ、皆いろいろイデアを出し続けそう。ネットの世界ではたくさんの壁がある、例えばOS、壁を壊すのはwebだともう、アプリを作るにはhybrid ソリューションがあるけど、まだ完璧じゃない。OS以下のAPPレベルの壁を壊せるもwebしかないと思う。でも小程序が他のチャットアプリ(LINEや、messagerなど)では動かない、これは一番嫌いなことだ。完全にweb appだたらどのアプリだろうと、デヴェロパーの手間がかからない。

8. 皆入り口を奪い合ってる

Appleが無限な可能性がある端末を生産してる、皆買う、名前はiPhone。ブラウザが無限な可能性があるアドレスバーを提供してる、皆そこにほしい情報を探す。WeChatが無限な可能性がある小程序の世界を作ってるけど、行けそうにはあまり見えないと思う、なぜなら、この入り口ーーWeChatがすでに「チャット」「コミュニケーション」「友達のステータスを把握」っていう前提があるのだ。

注:私WeChatはあまり使ってない、QQニュースはずっとやってる。うん、ニュースにあるグルメ写真を見たら、料理を作りたくなる;他人の旅行写真を見たら、エアチケットを買いたくなる;本のレビューを見たら、本を買いたくなる;あ、そうだ、QQニュースにも小程序が必要だ!なるほど、名前は「新程序 ニュー チャン シュ 」にしたらどうだ。(笑