絵文字キーボード SDK_html/css_WEB-ITnose

Makemoji SDK

Makemoji は、モバイル アプリ用の無料の絵文字キーボードです。

キーボード SDK をインストールすると、アプリのすべてのユーザーが新しいトレンドの絵文字に即座にアクセスできるようになります。私たちの目標は、ユーザー エンゲージメントを高めるだけでなく、センチメント (ユーザーがどのように感じるか) と親和性 (ユーザーが好むもの) に関する実用的なリアルタイム データを提供することです。この広範なデータ収集により、ユーザーごとおよび企業の評価がユーザーベースとともに増加します。

以下の機能が含まれます

• 無料絵文字の豊富なライブラリ
• 722標準 Unicode 絵文字
• Makemoji Flashtag インライン検索システム

• 新しい絵文字は動的にロードされ、アプリの更新は必要ありません
• 分析ダッシュボードと CMS

SDK キーを取得するには、sdk@makemoji.com にメールしてください。

詳細

ライブラリのセットアップ

• 依存関係に CocoaPods を使用している場合は、以下を含めてください。

  pod "Makemoji-SDK"

• CocoaPods を使用していない場合は、必ず次のライブラリを含めてください。

  • AFNetworking 2.6.3
  • SDWebImage 3.7.3

• MakemojiSDK フォルダーをプロジェクトにドラッグします。

• Xcode で、アプリターゲットをクリックします ->構築フェーズ ->バイナリをライブラリにリンクし、次のライブラリを追加します。

    libsqlite3    libxml2    libz

• iOS 9 では、AWS S3 の例外をライブラリに含める必要があります。 App Transport の Info.plist。

<dict>    <key>NSAllowsArbitraryLoads</key>    <true/>    <key>s3.amazonaws.com</key>    <dict>        <key>NSExceptionAllowsInsecureHTTPLoads</key>        <true/>    </dict></dict>

SDK の使用法

初期化

MakemojiSDK の使用を開始するには、まず、 AppDelegate.

Makemoji ヘッダー ファイルを AppDelegate.m ファイルに追加します。

#import "MakemojiSDK.h"

次に、起動時に SDK キーをセットアップします。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {        // Override point for customization after application launch.        // setup your SDK key        [MakemojiSDK setSDKKey:@"YOUR-SDK-KEY"];        return YES;    }

セットアップMakemoji TextInput

次に、ビュー コントローラーをセットアップし、METextInputView をプロパティとして追加する必要があります。これを METextInputViewDelegate プロトコルに準拠させる必要もあります。

#import <UIKit/UIKit.h>    #import "METextInputView.h"    @interface ViewController : UIViewController <METextInputViewDelegate>    @property (nonatomic, retain) METextInputView * meTextInputView;    @end

viewDidLoad または init 中にビュー コントローラーで METextInputView を初期化します。 showKeyboard メソッドを使用して、テキスト入力フィールドをファーストレスポンダにします。

- (void)viewDidLoad {    [super viewDidLoad];    self.meTextInputView = [[METextInputView alloc] initWithFrame:CGRectZero];    self.meTextInputView.delegate = self;    [self.view addSubview:self.meTextInputView];}-(void)viewDidAppear:(BOOL)animated {    [super viewDidAppear:animated];    [self.meTextInputView showKeyboard];}

分離されたテキスト入力

キーボードから分離されたテキスト入力が必要な場合は、 detachTextInputView メソッドを呼び出してから、textInputContainerView をビューに追加する必要があります。

[self.meTextInputView detachTextInputView:YES];    [self.view addSubview:self.meTextInputView.textInputContainerView];

このモードでは送信ボタンとカメラ ボタンが非表示になるため、sendMessage メソッドにボタンをアタッチして呼び出す必要があります。テキストのキャプチャをトリガーします。

これを設定する方法の完全な例については、付属の MakemojiSDKDemo アプリを参照してください。

キーボードと入力サイズの変更の処理

次の処理を行う必要があります。キーボードの外観のサイズ変更とテキスト入力のサイズの変更。これらのイベントが発生すると、didChangeFrame デリゲート メソッドが呼び出されます。

-(void)meTextInputView:(METextInputView *)inputView didChangeFrame:(CGRect)frame {    self.tableView.frame = CGRectMake(self.tableView.frame.origin.x, self.tableView.frame.origin.y, self.tableView.frame.size.width, self.meTextInputView.frame.origin.y);}

メッセージの送信

didTapSend デリゲート コールバックは、[送信] ボタンをクリックしたときに MakemojiSDK テキスト ビューからプレーンテキストと HTML の辞書を提供します。

-(void)meTextInputView:(METextInputView *)inputView didTapSend:(NSDictionary *)message {    NSLog(@"%@", message);    // send message to your backend here    [self.messages addObject:message];    [self.tableView reloadData];}

messageDictionary は次の

{"html" を返します。 : 「HTML によるメッセージ」、「プレーンテキスト」 : "メッセージはプレーンテキストに変換されました"}

これをバックエンドに送信してメッセージを保存します。

displaySendButton を設定することで、組み込みの送信ボタンを表示または非表示にできます。 METextInputView のプロパティ

self.meTextInputView.displaySendButton = NO;

カメラ ボタン

これはカスタマイズ可能な標準の UIButton です。カメラ ボタンのアクションを処理するには、didTapCameraButton デリゲート コールバックを使用します。

-(void)meTextInputView:(METextInputView *)inputView didTapCameraButton:(UIButton*)cameraButton {    // Present image controller}

METextInputView の displayCameraButton プロパティを設定することで、内蔵カメラを表示または非表示にできます

self.meTextInputView.displayCameraButton = NO;

Hypermoji - URL 付き絵文字

ハイパー文字 (URL リンク付き絵文字) をタップしたときの Web ページの表示を処理するには、didTapHypermoji デリゲート コールバックを使用します

// handle tapping of links (Hypermoji)    -(void)meTextInputView:(METextInputView *)inputView didTapHypermoji:(NSString*)urlString {        // open webview here    }

メッセージの表示

HTML メッセージを表示するために最適化された UITableViewCells が含まれています。 MEChatTableViewCell は、iMessage の表示動作を模倣し、簡単な画像添付機能を備えています。 MESimpleTableViewCell は、広範なカスタマイズ オプションのために提供されています。

HTML メッセージの行の高さを指定するには、cellHeightForHTML メソッドを使用します。このメソッドは、パフォーマンスを向上させるためにセルの高さをキャッシュします。

// determine row height with HTML- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {    if (self.meTextInputView == nil) {        return 0;    }    NSDictionary * message = [self.messages objectAtIndex:indexPath.row];    return [self.meTextInputView cellHeightForHTML:[message objectForKey:@"html"]                                       atIndexPath:indexPath                                      maxCellWidth:self.tableView.frame.size.width                                         cellStyle:MECellStyleChat];}

setCellDisplay を使用して、左側または右側に表示するように MEChatTableViewCell を設定できます。これは、各メッセージの HTML を設定する前に行う必要があります。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {        static NSString *CellIdentifier = @"Cell";        MEChatTableViewCell  *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];        if (cell == nil) {            cell = [[MEChatTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];        }        // display chat cell on right side        [cell setCellDisplay:MECellDisplayRight];        // display chat cell on left side        if (indexPath.row % 2) {            [cell setCellDisplay:MECellDisplayLeft];        }        NSDictionary * message = [self.messages objectAtIndex:indexPath.row];        [cell setHTMLString:[message objectForKey:@"html"]];        return cell;    }

Emoji Wall

The Emoji Wall is a View Controller that allows your users to select one emoji from the makemoji library or the built-in iOS emoji.

To display the emoji wall, use the following:

// initialize the emoji wall view controller    MEEmojiWall * emojiWall = [[MEEmojiWall alloc] init];    emojiWall.delegate = self;    emojiWall.modalPresentationStyle = UIModalPresentationOverCurrentContext;    // wrap view controller in navigation controller    UINavigationController *navigationController =    [[UINavigationController alloc] initWithRootViewController:emojiWall];    [navigationController.navigationBar setBarTintColor:[UIColor blackColor]];    [navigationController.navigationBar setBarStyle:UIBarStyleBlackTranslucent];    [navigationController.navigationBar setTintColor:[UIColor whiteColor]];    // present the emoji wall as a modal    [self presentViewController:navigationController animated:YES completion:nil];

The search bar can be disabled by using the following when instantiating the controller

emojiWall.shouldDisplaySearch = NO;

When a user selects an emoji from the wall, the following NSDictionary is returned to the Emoji Wall delegate.

For Makemoji emoji:

{ "emoji_id" = 935; "emoji_type" = makemoji; "image_object" = "<UIImage: 0x7fdaa3f2e0a0>, {110, 110}"; "image_url" = "http://d1tvcfe0bfyi6u.cloudfront.net/emoji/935-large@2x.png"; name = Amused; }

For iOS emoji:

{ "emoji_id" = 18; "emoji_type" = native; name = "pensive face"; "unicode_character" = "\Ud83d\Ude14"; }

Reactions

Makemoji reactions allow you to add inline emoji reactions to any view. Here's how you set this up.

You will first want to init the reaction view and give it a frame, typically a height of 30 is the best, but you can use anyting from 25 to 40.

    self.reactionView = [[MEReactionView alloc] initWithFrame:CGRectMake(0, 0, your_width, 30)];

You will then want to provide the reaction view with a content id, which is a NSString. THis should be unique to the content you want to associate these reactions to.

    self.reactionView.contentId = @"article123";

Setting this contentId will retrieve available reaction data as well as retrieve your default reaction set.

If you want to listen for user reacting to this view, observe the MEReactionNotification key.

The notification will include the reaction data that was selected.

FAQ

• The Makemoji SDK is completely free.

• All emojis are served from AWS S3.

• We do not store your messages. Your app backend will have to process and serve messages created with our SDK.

• We do not send push notifications.

• Your app's message volume does not affect the performance of our SDK.

• Messages are composed of simple HTML containing image and paragraph tags. Formatting is presented as inline CSS.

• Will work with any built-in iOS keyboard or return type

• All network operations happen asyncronously and do not block the User Interface

Service Performance

• Avg Service Repsonse Time: 100ms

• Hosted with AWS using Elastic Beanstalk & RDS

• Scales seamlessly to meet traffic demands