Submit Search
Upload
WordPress APIで作るモバイルアプリ
•
24 likes
•
10,746 views
アシアル株式会社
Follow
WordCamp Tokyo 2014のセッションでお話しした内容です。
Read less
Read more
Software
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 62
Download now
Download to read offline
Recommended
第22回オープンデータトーク 地理データ形式のこれから
第22回オープンデータトーク 地理データ形式のこれから
IWASAKI NOBUSUKE
JSRとJEPとJBSの見方や調べ方について
JSRとJEPとJBSの見方や調べ方について
Aya Ebata
ArcGISの便利な印刷周りの機能に、QGIS APIを駆使して挑んでみたお話
ArcGISの便利な印刷周りの機能に、QGIS APIを駆使して挑んでみたお話
Kosuke Asahi
Cesiumを用いた3次元リアルタイムデータの可視化について
Cesiumを用いた3次元リアルタイムデータの可視化について
Ryousuke Wayama
Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発
Kenjiro Kubota
実践 NestJS
実践 NestJS
Ayumi Goto
概念モデルって難しいですよね
概念モデルって難しいですよね
Takuya Kawabe
Amebaにおけるレコメンデーションシステムの紹介
Amebaにおけるレコメンデーションシステムの紹介
cyberagent
Recommended
第22回オープンデータトーク 地理データ形式のこれから
第22回オープンデータトーク 地理データ形式のこれから
IWASAKI NOBUSUKE
JSRとJEPとJBSの見方や調べ方について
JSRとJEPとJBSの見方や調べ方について
Aya Ebata
ArcGISの便利な印刷周りの機能に、QGIS APIを駆使して挑んでみたお話
ArcGISの便利な印刷周りの機能に、QGIS APIを駆使して挑んでみたお話
Kosuke Asahi
Cesiumを用いた3次元リアルタイムデータの可視化について
Cesiumを用いた3次元リアルタイムデータの可視化について
Ryousuke Wayama
Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発
Kenjiro Kubota
実践 NestJS
実践 NestJS
Ayumi Goto
概念モデルって難しいですよね
概念モデルって難しいですよね
Takuya Kawabe
Amebaにおけるレコメンデーションシステムの紹介
Amebaにおけるレコメンデーションシステムの紹介
cyberagent
Linked Open Dataとは
Linked Open Dataとは
Linked Open Dataチャレンジ実行委員会
Spring boot anane maryem ben aziza syrine
Spring boot anane maryem ben aziza syrine
Syrine Ben aziza
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Yoshitaka Kawashima
Large Scale Geospatial Indexing and Analysis on Apache Spark
Large Scale Geospatial Indexing and Analysis on Apache Spark
Databricks
SPA時代のOGPとの戦い方
SPA時代のOGPとの戦い方
Yoichi Toyota
画像認識AI "Einstein Vision" を試してみよう
画像認識AI "Einstein Vision" を試してみよう
Salesforce Developers Japan
AbemaTVのアーキテクチャの変遷 / AbemaTV DevCon 2018 TrackA Session A2
AbemaTVのアーキテクチャの変遷 / AbemaTV DevCon 2018 TrackA Session A2
AbemaTV, Inc.
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編
なべ
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
hideakikabuto
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
Dockerfile を書くためのベストプラクティス解説編
Dockerfile を書くためのベストプラクティス解説編
Masahito Zembutsu
ドキュメントを作りたくなってしまう魔法のツール「Sphinx」
ドキュメントを作りたくなってしまう魔法のツール「Sphinx」
Yoshiki Shibukawa
設計と実装で 抑えておきたい サービスクラスと例外
設計と実装で 抑えておきたい サービスクラスと例外
Takuya Sato
[Cloud OnAir] GCP 上でストリーミングデータ処理基盤を構築してみよう! 2018年9月13日 放送
[Cloud OnAir] GCP 上でストリーミングデータ処理基盤を構築してみよう! 2018年9月13日 放送
Google Cloud Platform - Japan
3週連続DDDその2 深いモデルの探求(ドメイン駆動設計 第3部)
3週連続DDDその2 深いモデルの探求(ドメイン駆動設計 第3部)
増田 亨
S3をDB利用 ショッピングセンター向けポイントシステム概要
S3をDB利用 ショッピングセンター向けポイントシステム概要
一成 田部井
開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpython
開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpython
tomitomi3 tomitomi3
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
Natsuki Yamanaka
機械学習デザインパターンの必要性と機械学習ライフサイクル
機械学習デザインパターンの必要性と機械学習ライフサイクル
Hironori Washizaki
GeoCSVのススメ
GeoCSVのススメ
AyumiShibamoto
WordPressサイトをiPhoneアプリにしてみた
WordPressサイトをiPhoneアプリにしてみた
Kiharu Sasaki
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Yuji Nojima
More Related Content
What's hot
Linked Open Dataとは
Linked Open Dataとは
Linked Open Dataチャレンジ実行委員会
Spring boot anane maryem ben aziza syrine
Spring boot anane maryem ben aziza syrine
Syrine Ben aziza
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Yoshitaka Kawashima
Large Scale Geospatial Indexing and Analysis on Apache Spark
Large Scale Geospatial Indexing and Analysis on Apache Spark
Databricks
SPA時代のOGPとの戦い方
SPA時代のOGPとの戦い方
Yoichi Toyota
画像認識AI "Einstein Vision" を試してみよう
画像認識AI "Einstein Vision" を試してみよう
Salesforce Developers Japan
AbemaTVのアーキテクチャの変遷 / AbemaTV DevCon 2018 TrackA Session A2
AbemaTVのアーキテクチャの変遷 / AbemaTV DevCon 2018 TrackA Session A2
AbemaTV, Inc.
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編
なべ
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
hideakikabuto
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
Dockerfile を書くためのベストプラクティス解説編
Dockerfile を書くためのベストプラクティス解説編
Masahito Zembutsu
ドキュメントを作りたくなってしまう魔法のツール「Sphinx」
ドキュメントを作りたくなってしまう魔法のツール「Sphinx」
Yoshiki Shibukawa
設計と実装で 抑えておきたい サービスクラスと例外
設計と実装で 抑えておきたい サービスクラスと例外
Takuya Sato
[Cloud OnAir] GCP 上でストリーミングデータ処理基盤を構築してみよう! 2018年9月13日 放送
[Cloud OnAir] GCP 上でストリーミングデータ処理基盤を構築してみよう! 2018年9月13日 放送
Google Cloud Platform - Japan
3週連続DDDその2 深いモデルの探求(ドメイン駆動設計 第3部)
3週連続DDDその2 深いモデルの探求(ドメイン駆動設計 第3部)
増田 亨
S3をDB利用 ショッピングセンター向けポイントシステム概要
S3をDB利用 ショッピングセンター向けポイントシステム概要
一成 田部井
開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpython
開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpython
tomitomi3 tomitomi3
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
Natsuki Yamanaka
機械学習デザインパターンの必要性と機械学習ライフサイクル
機械学習デザインパターンの必要性と機械学習ライフサイクル
Hironori Washizaki
GeoCSVのススメ
GeoCSVのススメ
AyumiShibamoto
What's hot
(20)
Linked Open Dataとは
Linked Open Dataとは
Spring boot anane maryem ben aziza syrine
Spring boot anane maryem ben aziza syrine
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Large Scale Geospatial Indexing and Analysis on Apache Spark
Large Scale Geospatial Indexing and Analysis on Apache Spark
SPA時代のOGPとの戦い方
SPA時代のOGPとの戦い方
画像認識AI "Einstein Vision" を試してみよう
画像認識AI "Einstein Vision" を試してみよう
AbemaTVのアーキテクチャの変遷 / AbemaTV DevCon 2018 TrackA Session A2
AbemaTVのアーキテクチャの変遷 / AbemaTV DevCon 2018 TrackA Session A2
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
Dockerfile を書くためのベストプラクティス解説編
Dockerfile を書くためのベストプラクティス解説編
ドキュメントを作りたくなってしまう魔法のツール「Sphinx」
ドキュメントを作りたくなってしまう魔法のツール「Sphinx」
設計と実装で 抑えておきたい サービスクラスと例外
設計と実装で 抑えておきたい サービスクラスと例外
[Cloud OnAir] GCP 上でストリーミングデータ処理基盤を構築してみよう! 2018年9月13日 放送
[Cloud OnAir] GCP 上でストリーミングデータ処理基盤を構築してみよう! 2018年9月13日 放送
3週連続DDDその2 深いモデルの探求(ドメイン駆動設計 第3部)
3週連続DDDその2 深いモデルの探求(ドメイン駆動設計 第3部)
S3をDB利用 ショッピングセンター向けポイントシステム概要
S3をDB利用 ショッピングセンター向けポイントシステム概要
開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpython
開発環境構築からはじめるPython VisualStudio Codeとpipenvで始めるpython
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
機械学習デザインパターンの必要性と機械学習ライフサイクル
機械学習デザインパターンの必要性と機械学習ライフサイクル
GeoCSVのススメ
GeoCSVのススメ
Viewers also liked
WordPressサイトをiPhoneアプリにしてみた
WordPressサイトをiPhoneアプリにしてみた
Kiharu Sasaki
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Yuji Nojima
WordPressと外部APIとの連携
WordPressと外部APIとの連携
Hidekazu Ishikawa
WordCamp Tokyo 2014 Security Session for Beginners
WordCamp Tokyo 2014 Security Session for Beginners
Shoko Matsuo
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
Shinichi Nishikawa
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
Mignon Style
Wct2014 「これからの情報発信セッション」
Wct2014 「これからの情報発信セッション」
Sosuke Eguchi
Word camptokyo2014 pdf
Word camptokyo2014 pdf
Shohei Tanaka
WordCamp Tokyo 2014
WordCamp Tokyo 2014
horike37
Launch a Web Service in 3 Days Using WordPress
Launch a Web Service in 3 Days Using WordPress
Kite Koga
AWS+WordPressでつくるFirefoxアプリ
AWS+WordPressでつくるFirefoxアプリ
Takayuki Miyauchi
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
アシアル株式会社
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
Takahiro Nakahata
WordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
フリーランサーの2014年振り返り
フリーランサーの2014年振り返り
Kiharu Sasaki
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
Tsuzurahara Tohru
System performance tuning
System performance tuning
Menandro Oba
Software Testing
Software Testing
Denmark Anthony Tan
オープンデータプラグイン紹介資料
オープンデータプラグイン紹介資料
Naokazu Nohara
Node js - Yns
Node js - Yns
Alex Amistad
Viewers also liked
(20)
WordPressサイトをiPhoneアプリにしてみた
WordPressサイトをiPhoneアプリにしてみた
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
WordPressと外部APIとの連携
WordPressと外部APIとの連携
WordCamp Tokyo 2014 Security Session for Beginners
WordCamp Tokyo 2014 Security Session for Beginners
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
Wct2014 「これからの情報発信セッション」
Wct2014 「これからの情報発信セッション」
Word camptokyo2014 pdf
Word camptokyo2014 pdf
WordCamp Tokyo 2014
WordCamp Tokyo 2014
Launch a Web Service in 3 Days Using WordPress
Launch a Web Service in 3 Days Using WordPress
AWS+WordPressでつくるFirefoxアプリ
AWS+WordPressでつくるFirefoxアプリ
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
WordPressで提供するWeb API
WordPressで提供するWeb API
フリーランサーの2014年振り返り
フリーランサーの2014年振り返り
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
System performance tuning
System performance tuning
Software Testing
Software Testing
オープンデータプラグイン紹介資料
オープンデータプラグイン紹介資料
Node js - Yns
Node js - Yns
Similar to WordPress APIで作るモバイルアプリ
WordPressAPI
WordPressAPI
Yuki Okamoto
20170809 AWS code series
20170809 AWS code series
Atsushi Fukui
AWS Black Belt Online Seminar AWS Amplify
AWS Black Belt Online Seminar AWS Amplify
Amazon Web Services Japan
Community_Board on WordPress With mobile application
Community_Board on WordPress With mobile application
Yuki Okamoto
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
Masayuki Abe
概説 Data API v3
概説 Data API v3
Yuji Takayama
Realm platform2019
Realm platform2019
昌桓 李
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜
[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜
Atsushi Fukui
PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~
schoowebcampus
マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介
Sunao Tomita
JAWSDAYS2016 Technical Deep DIVE
JAWSDAYS2016 Technical Deep DIVE
陽平 山口
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
Toru Yamaguchi
【2018/09/11】PAYでのReact Nativeにおける APIクライアント実装 について
【2018/09/11】PAYでのReact Nativeにおける APIクライアント実装 について
Natsuki Yamanaka
ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)
Atsushi Yokohama (BEACHSIDE)
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight
Amazon Web Services Japan
20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice
20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice
Amazon Web Services Japan
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
Similar to WordPress APIで作るモバイルアプリ
(20)
WordPressAPI
WordPressAPI
20170809 AWS code series
20170809 AWS code series
AWS Black Belt Online Seminar AWS Amplify
AWS Black Belt Online Seminar AWS Amplify
Community_Board on WordPress With mobile application
Community_Board on WordPress With mobile application
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
概説 Data API v3
概説 Data API v3
Realm platform2019
Realm platform2019
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜
[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜
PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~
マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介
JAWSDAYS2016 Technical Deep DIVE
JAWSDAYS2016 Technical Deep DIVE
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
【2018/09/11】PAYでのReact Nativeにおける APIクライアント実装 について
【2018/09/11】PAYでのReact Nativeにおける APIクライアント実装 について
ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight
20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice
20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
More from アシアル株式会社
MonacaとEducation活動の紹介
MonacaとEducation活動の紹介
アシアル株式会社
PWA 4 Business
PWA 4 Business
アシアル株式会社
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
アシアル株式会社
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
アシアル株式会社
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
アシアル株式会社
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
アシアル株式会社
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
アシアル株式会社
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集
アシアル株式会社
Web標準技術でiOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発
アシアル株式会社
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
アシアル株式会社
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
アシアル株式会社
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
アシアル株式会社
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめました
アシアル株式会社
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
アシアル株式会社
Gartner summit 2016
Gartner summit 2016
アシアル株式会社
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線
アシアル株式会社
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621
アシアル株式会社
20160308seminar2
20160308seminar2
アシアル株式会社
Nifty cloud mbaas
Nifty cloud mbaas
アシアル株式会社
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
アシアル株式会社
More from アシアル株式会社
(20)
MonacaとEducation活動の紹介
MonacaとEducation活動の紹介
PWA 4 Business
PWA 4 Business
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集
Web標準技術でiOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめました
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Gartner summit 2016
Gartner summit 2016
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621
20160308seminar2
20160308seminar2
Nifty cloud mbaas
Nifty cloud mbaas
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
WordPress APIで作るモバイルアプリ
1.
WordPressAPIで作るモバイルアプリ アプリケーションプラットフォームとしてのWordPress URL
: http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 1
2.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 2 自己紹介 „ 名前 • 岡本雄樹(HN:ジャスティス岡本) • yuki@asial.co.jp „ Webやプログラミングを始めた理由 • 自分のWebサイトを作るためWebサーバーを構築したのがきっかけでLinux やPHP・オープンソースの世界と出会う。 „ 略歴 • 大学生時代は創業したばかりの通販ベンチャーでECサイト立ち上げに関わ り、システム構築からサーバの運用などシステム面を一手に引き受ける。 • アシアル入社後も、その経験を生かしECサイトの自社パッケージ開発や多 数のEC案件に関わる。 „ 現在の仕事 • 現在は教育事業を担当しておりWeb技術の教育サービスを行っている。 • 著書として「イラストでよくわかるPHP はじめてのWebプログラミング入 門」がある。
3.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 3 本講座の目的 „ WordPressを使ってアプリケーションを作ろう • WordPressのWebAPI • JSON REST APIで投稿取得 • JSON REST APIで作るウィジェット „ モバイルアプリの作り方 • モバイルアプリ開発1:サイトビュワー • モバイルアプリ開発2:ジャスティス†ブックマーク „ 参考資料
4.
WordPressを使ってアプリケーションを作ろう URL :
http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 4
5.
アプリケーションプラットフォーム? „ 今後WordPressは「アプリケーションプラットフォーム」を指向するらしいです
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 5 • 基調講演を参考 „ アプリケーションとは? • WordやPhotoShopのような、特定の目的の為に使うソフトウェア 9 ブラウザもアプリケーション – Webサイトは通常、アプリケーションではない。 » ブログなどはコンテンツ。 – キーワード検索や翻訳など、特定の目的で使えるソフトが動くサイトはアプリケーション 9 LinuxやApacheやMySQLは応用ソフトやミドルウェアに分類されるためアプリケーションではない „ アプリケーションの例 • ニュースアプリ • RSSリーダーアプリ • ブラウザ • MS製品やAdobe製品、その他パソコンソフト全般 • etc,etc
6.
アプリケーションを開発するために必要なもの „ アプリケーションを開発するために必要なもの
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 6 • 入力 9 文字・数値・座標(マウスやタップから得られる情報を含む)等 • 出力 9 文字・数値・画像・アニメーション等 • 処理 9 何らかのプログラム • 保存 9 何らかのデータ
7.
アプリケーションを開発するために必要なもの „ これが基本。ゲームであっても入力に応じて何かを出力している。
入力処理出力 保存 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 7
8.
アプリケーションを開発するために必要なもの URL :
http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 8 „ WordPressもアプリケーション • Webサイトの表示や管理に特化している。 記事WordPress Web Page DB
9.
アプリケーションを開発するために必要なもの „ Webの管理画面やWebの閲覧画面から脱却できれば、新たな可能性が…
WordPress DB URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 9
10.
アプリケーションを開発するために必要なもの „ APIを使うことでWebサイトに限定しない使い方ができるようになる
入力API API 出力 WordPress DB Web経由で外部のシステム から利用できるAPIのことを 「WebAPI」 と呼びます URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 10
11.
アプリケーションを開発するために必要なもの „ カスタム三兄弟を使うことで扱うコンテンツも自由に定義することができる
WordPress カスタム フィールド DB カスタム タクソノミー URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 11 カスタム 投稿タイプ
12.
具体的なアプリケーションの例 URL :
http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 12 „ ブログエディタソフトもアプリです • 公式のiOSアプリ等
13.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 13 WordPressのWebAPI
14.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 14 WordPressのWebAPI „ WordPressのWebAPI • 昔からあるもの 9 XML-RPC WordPress API – コアの機能ととして用意されている – XML-RPCというやり方で通信を行う – データはXMLで返ってくる • 今注目されているもの 9 JSON REST API – 今後、コアに取り込まれる予定 – REST というやり方で通信を行う – データはJSONで返ってくる 9 その他 – JetPackのREST API – 各種プラグイン
15.
WebAPIの利用に必要な知識 „ WebAPIの利用に必要な知識のおさらい
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 15 • XML 9 汎用的なマークアップ言語 – HTMLもXMLで書けるしSVGもXML形式 9 データの保存形式としても広く使われている • JSON 9 データの保存形式として最近よく使われている 9 JSのオブジェクト表現 – とはいえ、JS以外の言語でも簡単に利用できる
16.
WebAPIの利用に必要な知識 „ WebAPIの利用に必要な知識のおさらい
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 16 • REST 9 APIの設計思想 • XML-RPC 9 APIのプロトコルの一種 – 仕様としてまとまっている – リクエストやレスポンスは常にXML » XMLの組み立てやパースが多少面倒
17.
WebAPIの利用に必要な知識 „ WebAPIの利用に必要な知識のおさらい
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 17 • 認証 9 第三者が勝手に記事を投稿出来ると困るので認証を行う、という考え。 • 認可 9 認証済みだからといって誰でも自由に記事を公開できてしまうと困るので、 個々のユーザーに権限を与える、という考え方。
18.
Same-Origin PolicyとCORSについて URL
: http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 18 „ Same-Origin Policyについて • 簡単に言うとブラウザに制限を掛けるための仕組み 9 例えば、JSによる外部のサイト(厳密にはオリジン)へのリクエストはこのポリシーで制限されている „ CORS(Cross-Origin Resource Sharing)について • Same-Origin Policyを緩和するための仕組み 9 JS用にAPI提供などを行いたい場合に利用できる 9 API提供サーバー側で特別なHTTPヘッダーを返すようにする – Allow CORS XML-RPC プラグイン „ 詳細はMozilla参照 • https://developer.mozilla.org/ja/docs/HTTP_access_control „ メモ • CORSだけなら固定のヘッダーを一行追加するだけ 9 BASIC認証も併用する場合、複雑な対応が必要
19.
WebAPIの利用に必要な知識 „ WebAPIの利用に必要な知識のおさらい
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 19 • BASIC認証 9 ユーザー名とパスワードによる認証 – BASE64でエンコードして送信するが暗号化しているわけではない » 暗号化が必要な場合はHTTPS通信をつかう 9 HTTPで定められているため、枯れており言語やフレームワークには依存しない • OAuth 9 アプリに権限を付与するための仕組み – 生のユーザー名とパスワードを持たせずに済む 9 OAuth1とOAuth2がある
20.
XML-RPC WordPress APIの特徴
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 20 „ メリット • 十分に安定している、確実に動く 9 公式のWordPressアプリもXML-RPCを使っている – カスタム三兄弟もそのまま使える 9 MonacaPressプロジェクトで利用したときにもちゃんと動いた „ デメリット • リクエストもレスポンスも全てXML 9 組み立てるのが少々面倒 – 結果もXMLで返ってくる 9 XMLやXML-RPC用のライブラリを使えばそんなに大変ではない • 認証 9 リクエストのXMLに直接ユーザー名とパスワードを入力する方式 – 手軽だが、アプリに権限の一部を開放するような仕組みは用意されていない 9 公開している記事の取得ですら認証が必要
21.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 21 JSON REST APIの特徴 „ メリット • RESTの仕組みはXML-RPCより簡単、といわれている • 結果がJSONで取得できる • 公開されている記事なら認証せずに取得できる „ デメリット • ドキュメントがまだ少ない 9 日本語のドキュメントは皆無 • カスタム三兄弟に対応するには少し手を入れる必要がある • 認証がBASIC認証とOAuth1しか用意されていない 9 OAuth1は難しい – OAuth2の方が簡単といわれている 9 JSで外部サイトとBASIC認証するのは難しい – Same-Origin Policyが大変
22.
JSON REST APIの認証と認可
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 22 „ 認証 • JSON REST APIでBASIC認証を利用したい場合 9 Basic Authenticationプラグイン „ 認可 • APIで投稿出来るようにしたいけど公開まではさせたくない場合 9 ユーザーの権限を管理者以外にする – 「寄稿者」などにする 9 プラグインで細かく設定する – User Role Editor プラグイン
23.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 23 JSON REST APIで投稿取得
24.
JSON REST APIで投稿取得するためのリクエスト例
„ JSON REST APIで投稿取得するためのリクエスト例 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 24 • 全件 9 http://b.j801.com/wp-json/posts • 特定の記事 9 http://b.j801.com/wp-json/posts/7 • 特定のカテゴリ 9 http://b.j801.com/wp-json/posts?filter[category_name]=events „ その他 • カテゴリ一覧 9 http://b.j801.com/wp-json/taxonomies/category/terms
25.
JSON REST APIでPHPから投稿取得
„ APIのURLに記事のID指定してGETリクエストする • 公開されている記事なら権限チェックも特になし <?php $url = "http://b.j801.com/wp-json/posts/7"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_exec($ch); getByJSONRESTAPI.php URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 25
26.
JSON REST APIでJSから投稿取得
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 26 „ こちらもXHRでリクエストするだけ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var url = 'http://b.j801.com/wp-json/posts/7'; var xhr = new XMLHttpRequest(); xhr.open("GET", url, false); xhr.send(); console.log(xhr.response); </script> </head> <body> </body> </html> getByJSONRESTAPI.html
27.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 27 レスポンスの例 „ JSON形式で情報が大量に返ってきます { "ID": 7, "author": { "ID": 1, "URL": "", "avatar": "http://0.gravatar.com/avatar/42fcbe74b0c48f70ffbffe57472382c8?s=96", "description": "", "first_name": "", "last_name": "", "meta": { "links": { "archives": "http://b.j801.com/wp-json/users/1/posts", "self": "http://b.j801.com/wp-json/users/1" } }, "name": "justice", "nickname": "justice", "registered": "2014-08-18T01:31:52+00:00", "slug": "justice", "username": "justice" }, "comment_status": "open", "content": "<p>http://j801.com</p> ", "date": "2014-08-18T10:36:47+09:00", "date_gmt": "2014-08-18T01:36:47+00:00", "date_tz": "Asia/Tokyo", "excerpt": "<p>http://j801.com</p> ", "featured_image": null, "format": "standard", "guid": "http://b.j801.com/?p=7", "link": "http://b.j801.com/archives/7", "menu_order": 0, "meta": { "links": { "author": "http://b.j801.com/wp-json/users/1", "collection": "http://b.j801.com/wp-json/posts", "replies": "http://b.j801.com/wp-json/posts/7/comments", "self": "http://b.j801.com/wp-json/posts/7", "version-history": "http://b.j801.com/wp-json/posts/7/revisions" } }, "modified": "2014-08-18T10:36:47+09:00", "modified_gmt": "2014-08-18T01:36:47+00:00", "modified_tz": "Asia/Tokyo", "parent": 0, "ping_status": "open", "slug": "j801", "status": "publish", "sticky": false, "terms": { "category": [ { "ID": 1, "count": 2, "description": "", "link": "http://b.j801.com/archives/category/%e6%9c%aa%e5%88%86%e9%a1%9e", "meta": { "links": { "collection": "http://b.j801.com/wp-json/taxonomies/category/terms", "self": "http://b.j801.com/wp-json/taxonomies/category/terms/1" } }, "name": "未分類", "parent": null, "slug": "%e6%9c%aa%e5%88%86%e9%a1%9e" } ] }, "title": "j801", "type": "post" }
28.
JSON REST APIで作るウィジェット
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 28
29.
JSON REST APIで作るウィジェット
„ JSON REST APIで作るウィジェット • ウィジェットにJSを仕込んで、タイトル一覧を表示する 9 JSON REST API経由でデータを取得して展開する URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 29
30.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 30 ウィジェットのコード „ ウィジェットのコード <ul id="bookmark"> </ul> <script> jQuery(function() { jQuery.ajax({ type: 'GET', url: 'http://b.j801.com/wp-json/posts', dataType: 'json', success: function(json){ jQuery.each(json, function() { var text = "<li><a href='" + this.link + "'>" + this.title + "</a></li>"; jQuery("#bookmark").append(text); }); } }); }); </script>
31.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 31 モバイルアプリの作り方
32.
一言でモバイルと言っても様々なモバイルOSが存在する „ 世界中で利用されているモバイル端末には、様々な種類のモバイルOSが搭載されており、アプ
リの開発者は複数OSへの対応が求められています。 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 32 Source: Gartner (November 2013)
33.
実はHTML5(とCSSとJS)で開発できます URL :
http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 33
34.
HTML5によるモバイルアプリの仕組み „ HTML5でマーケットに提出可能なアプリを作るためには「Cordova(PhoneGap)」というラ
イブラリを利用して開発します。CordovaはHTMLで作成されたコードをネイティブコードで パッケージングします。 HTML・CSS・JavaScript ネイティブコード URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 34
35.
JavaScriptからカメラ等の端末固有の機能も利用可能 „ カメラなどの端末固有の機能を呼び出す場合、開発者はJavaScriptで命令を記述します。する
とCordovaがネイティブコードによって対応する機能を実行します。 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 35 ネイティブコード カメラGPS 連絡帳 HTML・CSS・JavaScript
36.
国産の開発ツールをご用意させて頂きました „ クラウド上でハイブリッドアプリを作ることができる統合開発環境です。
„ 作成したアプリはApp StoreやGoogle Playなどで公開可能です。 • 有料で販売することもできます。 • マーケットを経由せずに配布することも可能です。 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 36 „ 無料から利用できます。
37.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 37 Monacaによる開発の流れ „ ブラウザだけで開発、テスト、ビルド(アプリの生成)までのすべての工程を行うことができ ます。 1. ブラウザで開発2. 実機で動作確認3. ビルドして配布
38.
アプリ開発講座もご用意させて頂きました „ はじめてのHTML5モバイルアプリ開発講座
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 38 • http://monaca.mobi/ja/training/
39.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 39 スライドは無料公開中 „ さぁ、モバイルアプリを作ろう!
40.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 40 モバイルアプリ開発
41.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 41 サイト記事一覧アプリ „ サイト記事一覧アプリ • jQueryMobileでUIを構築 • JSON REST APIで情報を取得
42.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 42 jQueryMobileの有効化 „ jQueryMobileの有効化 • JS/CSSコンポーネントの追加と削除
43.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 43 JSのコード „ JSのコード <script> /* リスト生成*/ $.ajax({ type: 'GET', url: 'http://b.j801.com/wp-json/posts', dataType: 'json', success: function(json){ $.each(json, function() { var text = "<div data-role='collapsible'><h3>" + this.title + "</h3><p>" + this.content + "</p></div>"; $("#home div.posts").append(text); }); $("#home div.posts").collapsibleset('refresh'); } }); </script>
44.
jQueryMobileのHTMLコード URL :
http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 44 „ jQueryMobileのHTMLコード <body> <div data-role="page" id="home"> <div data-role="header" data-position="inline" data-backbtn="false" data-theme="a"> <h1>サイト</h1> <a href="#home" data-icon="home" class="ui-btn-left ui-icon-home">home</a> </div><!-- /header --> <div data-role="content"> <div data-role="collapsible-set" data-theme="c" data-content-theme="a" class="posts"> </div> </div><!-- /content --> <footer data-role="footer" data-id="footer" data-position="fixed" data-tap-toggle="false" data-theme="a"> <div>Powerd By Justice</div> </footer><!-- /footer --> </div><!-- /page --> </body>
45.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 45 ジャスティス†ブックマーク
46.
ジャスティス†ブックマーク URL :
http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 46 „ ジャスティス†ブックマーク • ブックマーク管理サービス „ 仕様 • jQueryMobileでUI構築 • モバイルアプリ対応 9 ブックマーク一覧をアプリとして確認できる 9 カテゴリに対応 • ブックマークレット対応 9 閲覧しているページをブックマークレット一発で登録できるようにする
47.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 47 モバイルアプリ側 „ モバイルアプリ側 • ブックマークを一覧で表示 9 WordPressAPI経由で取得 • ブックマークをクリック(タッチ)すると外部ブラウザで表示する
48.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 48 ブックマークレットとは „ ブックマークレットとは • お気に入りに登録できるJSプログラム 9 閲覧しているサイトのタイトルやURLを外部に送信するようなプログラムも実現可能
49.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 49 モバイルアプリでの表示
50.
jQueryMobileのHTMLコード „ jQueryMobileのHTMLコード抜粋
<!-- /page --> <div data-role="page" id="home"> <div data-role="header" data-position="inline" data-backbtn="false" data-theme="b"> <h1>home</h1> <a href="#home" data-icon="home" class="ui-btn-left ui-icon-home">home</a> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" class="bookmark"> </ul> URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 50 </div><!-- /content --> <footer data-role="footer" data-id="footer" data-position="fixed" data-tap-toggle="false" data-theme="b"> <nav data-role="navbar"> <ul> <li><a href="#events" name="events">events</a></li> <li><a href="#speakers" name="speakers">speakers</a></li> <li><a href="#sponsors" name="sponsors">sponsors</a></li> <li><a href="#others" name="others">others</a></li> </ul> </nav><!-- /navbar --> </footer><!-- /footer --> </div><!-- /page --> <!-- /page -->
51.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 51 JSのコード „ JSのコード(config.json) {"queries": { "home":"http://b.j801.com/wp-json/posts", "speakers":"http://b.j801.com/wp-json/posts?filter[category_name]=speakers", "sponsors":"http://b.j801.com/wp-json/posts?filter[category_name]=sponsors", "events":"http://b.j801.com/wp-json/posts?filter[category_name]=events", "others":"http://b.j801.com/wp-json/posts?filter[category_name]=others" } }
52.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 52 JSのコード „ JSのコード(configure.js) // InAppBrowser document.addEventListener ("deviceready", onDeviceReady, false); function onDeviceReady() { $(document).on('click', 'a', function(e){ e.preventDefault(); var link = $(this); console.log(link.attr('href')); if (link.attr('rel') == 'external') { console.log('external'); window.open(link.attr('href'), '_blank', 'location=yes'); } else { $.mobile.changePage(link.attr('href')); } }); }
53.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 53 JSのコード „ JSのコード(configure.js) // make app_config object. $.ajaxSetup({ async: false }); app_config = {}; $.getJSON("js/config.json" ,function(data){ app_config = data; });
54.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 54 JSのコード „ JSのコード(configure.js) // make DOM (listview) $(function (){ $.each(app_config.queries, function(key, query){ $.ajax({ type: 'GET', url: query, dataType: 'json', success: function(json){ $.each(json, function() { var text = "<li><a data-ajax:'false' rel='external' target='_blank' href='" + this.content + "'>" + this.title + "</a></li>"; $("#" + key + " ul.bookmark").append(text); }); } }); }); $("#home ul.bookmark").listview('refresh'); });
55.
ブックマークレットでURLとタイトルを投稿 URL :
http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 55
56.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 56 ブックマークレット „ ブックマークレット • お気に入り登録できるJSプログラム 9 例えば、閲覧しているサイトの情報を外部に飛ばしたりできる • 諸注意 9 1行にまとめねばならない 9 空白等をURLエンコードせねばならない – ブックマークレット変換ツールみたいなものも存在する 9 返り値が発生しないようにせねばらなない(void化) 9 文字数制限が存在する • 実は外部ファイルが使える 9 外部ファイルなら1行縛りや文字数制限から解放される – ただしCORS問題からは解放されない – 読み込みは非同期に行われるので注意
57.
閲覧しているサイトの情報を飛ばす „ 閲覧しているサイトの情報を飛ばす
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 57 • 情報 9 タイトル – document.title 9 URL – location.href • 飛ばし方 9 XML-RPCを使う – ブックマークレットでJSON REST APIの投稿を行うのは大変なので…
58.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 58 ブックマークレット „ ブックマークレットのソースコード // ブックマークレットは「javascript:」から始める。返り値がvoidになるように対策。 javascript:(function(){ // 外部ファイルを読み込むためのscriptタグを生成 var s = document.createElement("script"); // scriptタグの属性srcに値として外部ファイルを設定 s.src = "http://b.j801.com/tools/b.js"; // 外部ファイルの読み込み完了時に処理が実行されるように設定 s.onload=function(){ postBookmarkByXMLRPC() }; // DOMにscriptタグを埋め込む document.body.appendChild(s); })()'
59.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 59 ブックマークレット „ 外部ファイルで読み込む関数postBookmarkByXMLRPC() function postBookmarkByXMLRPC () { var xml = '<?xml version="1.0"?>¥ <methodCall>¥ <methodName>wp.newPost</methodName>¥ <array>¥ <data>¥ <value><int>1</int></value>¥ <value>ユーザー名</value>¥ <value>!PASSWORD!</value>¥ <value>¥ <struct>¥ <member>¥ <name>post_title</name>¥ <value>' + document.title + '</value>¥ </member>¥ <member>¥ <name>post_content</name>¥ <value>' + location.href + '</value>¥ </member>¥ </struct>¥ </value>¥ </data>¥ </array>¥ </methodCall>'; var xhr= new XMLHttpRequest(); xhr.open("POST" , "http://b.j801.com/xmlrpc.php", false); xhr.send(xml); }
60.
ブックマークレットの登録方法 ブックマークレットをAタグで提供する場合の例 URL
: http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 60 „ お気に入りとして登録しましょう • ブックマークバーなどに表示しておくと便利です • ブックマークの編集から編集可能です <a href='javascript:(function(){var%2 0s%20=%20document.createElement("s cript");%20s.src%20=%20"http://b.j 801.com/tools/b.js";s.onload=funct ion(){postBookmarkByXMLRPC()};docu ment.body.appendChild(s);})()'> ブックマークレット</a>
61.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 61 参考資料
62.
URL : http://www.asial.co.jp/
│ Copyright © Asial Corporation. All Rights Reserved. │ 62 参考資料 „ JSON REST APIのマニュアル • http://wp-api.org/ „ JSON REST APIでカスタムフィールドを使う方法 • フォーラム:カスタムフィールドの内容をJSON REST APIで表示する 9 http://ja.forums.wordpress.org/topic/138386 • プラグイン:WP API Customizer (Kaito) 9 https://wordpress.org/plugins/wp-api-customizer/ „ JSON REST APIでoAuthを実現する方法 • 菱川さんのブログ: 9 http://notnil-creative.com/blog/archives/3301 „ Monaca • http://monaca.mobi/ja/
Download now