Introduction¶

概要¶

Linkifyは、デザインを柔軟にカスタマイズできます。あなたのアプリのデザインに合わせて、自由にリンクやウィジェットのデザインをカスタマイズすることが可能です。

アプリケーションを選択¶

まずはじめに、カスタマイズしたいアプリケーションを選択して下さい。 カスタマイズページ左上のドロップダウンメニューからアプリケーションを選択することが可能です。

ウィジェットデザインをカスタマイズ¶

Widget Settings ではLinkify ウィジェットのポップアップデザインがカスタマイズ可能です。 ポップアップデザインは、Flat Design とBasic Design の両方から3 種類、合計6種類あります。 お好みのデザインをクリックし、画面左のプレビューでご確認ください。

リンクをカスタマイズ¶

Link Settings のタブをクリックすることでリンクの下線をカスタマイズすることが可能です。 設定可能項目は 下線の種類、下線の太さ、下線の色 の3 つです。 各項目のカスタマイズ結果は画面左のプレビューでご確認ください。

サービスをカスタマイズ¶

Service Settings のタブをクリックするこでウィジェットに表示されるサービスをカスタマイズできます。 ウィジェットに表示するサービスを変更するには、利用したいサービスをサービス一覧からサービスパレットへとドラッグ&ドロップしてください。 Linkify アプリケーションのキーワード抽出対象言語が日本語に設定されている場合、利用可能サービスとして楽天とWeblio 辞書が選択可能です。

設定を保存¶

カスタマイズが完了しましたら青い save ボタンをクリックして保存してください。 save ボタンを押さない限り変更した設定は保存されませんのでご注意ください。

プレビュー設定¶

Linkify のウィジェットが実際にあなたのウェブサイトやアプリケーションでどのように表示されるか想像するのは難しいかもしれません。 ぜひプレビュー画面の背景や文字色を変更した上でウィジェットがどう表示されるかご確認ください。 プレビュー画面下のカラーピッカーを使って背景と文字色を変更することが可能です。

スクリプトタグの追加¶

LinkifyをiOSに組み込むには表示するHTMLのヘッダに以下のようなスクリプトタグを追加します。

<script type="text/javascript"
  src="http://www-static.linkify.mobi/api/linkify.js?key=YOUR_API_KEY">
</script>

サンプルアプリケーションの作成¶

例として、Linkifyが組み込まれたiOS WebView applicationの紹介をします。今回は、Linkifyが導入された Yahoo! News のウェブページをWebViewで表示するといったアプリケーションを作成します。

WebViewの追加¶

XCodeの最初の設定で Single View Application を選択します。WebViewを追加するためには、storyboardのファイルを選択し、 Objects フォルダにあるWebView UIをiPhoneの画面にDrag&Dropします。

@interface ViewController : UIViewController{
  IBOutlet UIWebView *webView;
}

@interface ViewController ()
@end

@implementation ViewController

- (void)viewDidLoad
{
  [super viewDidLoad];
  NSURLRequest* req = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://news.yahoo.com"]];
  [webView loadRequest:req];
  webView.delegate = self;
}

- (void)webViewDidFinishLoad:(UIWebView *)view
{
  [webView stringByEvaluatingJavaScriptFromString:@"(function(){if(!window.linkified){var d=document,s=d.createElement('script');s.type='text/javascript';s.src='http://www-static.linkify.mobi/api/linkify.js?key=YOUR_API_KEY';d.getElementsByTagName('head')[0].appendChild(s);window.linkified=true;}})()"];

}

WebViewコンポーネントのひも付け¶

最後に、storyboardファイルに戻り、以下のようにWebViewコンポーネントのひも付けを行います。

Downloads¶

こちら から上記コードを含むサンプルコードがダウンロードできます。ソースコードはiOS 7対応となっております。

スクリプトタグの追加¶

LinkifyをAndroidに組み込むには表示するHTMLのヘッダに以下のようなスクリプトタグを追加します。

<script type="text/javascript"
  src="http://www-static.linkify.mobi/api/linkify.js?key=YOUR_API_KEY">
</script>

サンプルアプリケーションの作成¶

例として、Linkifyが組み込まれたAndroid WebView Applicationの紹介をします。今回は、Linkifyが導入された *Yahoo! News *のウェブページをWebViewで表示するアプリケーションを作成します。

<?xml version="1.0" encoding="utf-8"?></span>
<WebView
  xmls:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/webview"
  android:layout_width="fill_parent"
  android:layout_width="fill_parent"
/>

<manifest ... >
  <uses-permission android:name="android.permission.INTERNET" />
</manifest>

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  final WebView webView = (WebView)findViewById(R.id.webView);

  WebSettings webSettings = webView.getSettings();
  webSettings.setJavascriptEnabled(true);
  webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
      view.loadUrl("javascript:(function(){if(!window.linkified){var d=document,s=d.createElement('script');s.type='text/javascript';s.src='http://www-static.linkify.mobi/api/linkify.js?key=YOUR_API_KEY';d.getElementsByTagName('head')[0].appendChild(s);window.linkified=true;}})()");
    }
  });
  webView.loadUrl("http://news.yahoo.com");
}

ダウンロード¶

こちら から紹介した内容のソースコードがダウンロードできます。

スクリプトタグの追加¶

LinkifyをTitaniumに組み込むには表示するHTMLのヘッダに以下のようなスクリプトタグを追加します。

<script type="text/javascript"
  src="http://www-static.linkify.mobi/api/linkify.js?key=YOUR_API_KEY">
</script>

サンプルアプリケーションの作成¶

例として、Linkifyが組み込まれたTitanium WebView applicationの紹介をします。今回は、 Yahoo News! のウェブページをWebViewで表示するシンプルなアプリケーションを作成します。

var window = Titanium.UI.createWindow();
var webView = Titanium.UI.createWebView({url:"http://news.yahoo.com"});

webView.addEventListener('load', function() {
  webView.evalJS(
    "(function(){if(!window.linkified){var d=document,s=d.createElement('script');s.type='text/javascript';s.src='http://www-static.linkify.mobi/api/linkify.js?key=YOUR_API_KEY';d.getElementsByTagName('head')[0].appendChild(s);window.linkified=true;}})()"
      );
});

window.add(webView);
window.open();

ダウンロード¶

こちら から今紹介した内容のソースコードをダウンロードできます。

スクリプトタグの挿入¶

Linkifyをウェブページにに組み込むには以下のように表示するHTMLの <HEAD> タグ内にLinkifyのスクリプトタグを追加します。

<html>
  <head>
    <http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Linkify Test Page<title>
    <script type="text/javascript"
      src="http://www-static.linkify.mobi/api/linkify.js?key=YOUR_API_KEY">
    </script>
  </head>
  <body>...</body>
</html>

概要¶

Google検索向けAdSense とは、ユーザが開発者の設置したGoogle検索を利用する際、キーワードに基づいた広告を検索結果画面に反映させることで開発者が報酬を得る事が出来るサービスです。

Linkifyでは、Google検索バーの代わりにLinkifyのGoogle検索ボタンを利用する事によってこの機能を実現します。

LinkifyとGoogle検索向けAdSenseを連携させるためには、開発者ごとのGoogle AdSense IDが必要になります。 Google AdSenseに登録していない方は こちら から登録をしてください。

カスタム検索エンジンの作成¶

LinkifyとGoogle検索向けAdSenseと連携を行うためには、Googleカスタム検索エンジンの作成が必要です。

Google AdSenseにログインして 広告の設定 、 検索 、 カスタム検索エンジン 、と進みます。 新しいカスタム検索エンジン を選択してください。

カスタム検索エンジンの作成ページで以下のように選択してください。

• 検索の対象: ウェブ全体
• 国または地域: あなたの対象地域
• サイトの言語: あなたの対象言語

保存してコードを取得 をクリックします。

赤枠内の数字がURL構築に必要なIDとなるので、控えておいてください。

Google AdSenseのURL生成¶

控えたGoogle AdSenseのIDを下記テキストエリアに 半角英数字 で入力して URL生成 を押してください。

下記URLパターンがGoogle AdSenseから報酬を得るためのURLパターンになります。Linkifyを作成する時に必要となりますので控えておいてください。

Linkify Appの作成¶

作成したURLパターンをLinkifyに組み込みます。 ページ上部の Apps タブを選択し、 アプリケーションを追加 をクリックしてください。 既に作成済みのアプリケーションと連携したい方は該当アプリケーションを選択し、 編集する をクリックします。 必要項目を入力し、 Google AdSense for Search 欄に先ほど作成したURLパターンを貼付けます。

最後に アプリケーションを追加 を押してGoogle検索向けAdSenseとの連携は完了です。

なお、このページで設定した内容が反映されるまで最大24時間かかることがありますので、ご了承ください。

概要¶

Amazonアソシエイト とは、開発者のwebページ等にAmazonの広告を差し込むことにより開発者が報酬を得る事が出来るサービスです。

Linkifyでは、webページの代わりにLinkifyのAmazon検索ウィジェットと開発者のAmazonアソシエイトIDを結びつける事によりこの機能を実現します。

LinkifyとAmazonアソシエイトを連携させるためには、開発者ごとのAmazonアソシエイトIDが必要になります。Amazonアソシエイトアカウントをまだ取得していない方は こちら から登録してください。

AmazonアソシエイトID¶

Amazonアソシエイトアカウントをお持ちの方は こちら から、赤枠内のメールアドレスとパスワードを入力してサインインしてください。

サインイン後、ページ左上赤枠内のトラッキングIDをコピーしてください。

Linkify Appの作成¶

トラッキングIDをコピーした後 Linkify にログインします。

ページ上部の Apps タブを選択し アプリケーションを追加 をクリックしてください。

既に作成済みのアプリケーションと連携したい方は該当アプリケーションを選択し、 編集する をクリックします。 必要項目を入力し赤枠内の AmazonアソシエイトID 欄に先ほどコピーした自身のトラッキングIDを貼り付けます。

最後に アプリケーションを追加 を押してAmazonアソシエイトとの連携は完了です。

概要¶

eBay Partner Network とは、開発者のwebページ等にeBay の広告を差し込むことにより開発者が報酬を得る事が出来るサービスです。

Linkifyでは、webページの代わりにLinkifyのeBay検索ウィジェットと開発者のeBay Campagin IDを結びつける事によりこの機能を実現します。

LinkifyとeBay Partner Networkを連携させるためには、開発者ごとのCampaign IDが必要になります。eBay Partner Network にまだ加入していない方は こちら から登録してください。

eBay Campagin ID¶

eBay Campagin ID をお持ちの方は こちら から、赤枠内のメールアドレスとパスワードを入力してサインインしてください。

サインイン後、Campagin タブをクリックして利用したいCampagin ID をチェックしましょう。

Campagin List 内から赤枠内の対象Campaign ID をコピーしてください。

Linkify Appの作成¶

Campaign IDをコピーした後 Linkify にログインします。

ページ上部の Apps タブを選択し アプリケーションを追加 をクリックしてください。

既に作成済みのアプリケーションと連携したい方は該当アプリケーションを選択し、 編集する をクリックします。 必要項目を入力し赤枠内の eBay Campaing ID 欄に先ほどコピーした自身のCampaign IDを貼り付けます。

最後に アプリケーションを追加 を押してeBay Partner Network との連携は完了です。

概要¶

ブックマークレット を使用すれば、Webブラウザを使って、Linkifyを手軽に使いはじめる事が出来ます。Linkifyでは、WebKitベースのブラウザ(iOS Safari、Androidブラウザ、Google Chrome、Safari)をサポートしています。

下記のブックマークレット用のウィジェットをブックマークメニューやブックマークバーにドラッグ＆ドロップすることでLinkifyのブックマークレットを登録することが出来ます。

以上でブックマークレットの登録は完了です。登録されたブックマークレットをクリックすると、ご覧のページにLinkifyが適用され、使用することが出来ます。

基本的な質問¶

Linkifyの使い方¶

プラットフォームや対応言語¶

レポーティングやその他のサービス¶

技術的トピック¶