宮崎のホームページ制作会社Tedinc | プラグイン

menu 0982-60-1084

TEDINC OFFICIAL BLOG

こんにちわ、Tedincの林田です。

今回はInstagramの写真を取得しWEBサイトに反映させる上で手こずった項目について書いていきます。

Instagram反映までの流れ

1、Instagramのdeveloperのページに進みアプリケーションを登録
2、ユーザーIDとアクセストークを取得する。
3、Instafeed.jsとjQuery simplyScrollを使ってサイトに反映

今回の記事は1、2の項目にてこずった為、1と2について詳しく書いています。


1、Instagramのdeveloperのページに進みアプリケーションを登録


1,Instagramのdeveloperのページに進み、「Register Your Application」をクリック

deve



2,項目全てを入力して「Sign Up」をクリック

your website:あなたが使うWebサイト名
Phone number:電話番号の登録
What do you want to build with the API?:使用するAPIの目的
deve2



3、developerのページに戻るので、右上のメニューバーから「Manage Clients」へ進む

deve3



4、Manage Clientsのページで「Register a New Client」をクリック

deve4



5、Register new Client ID のページで全ての項目を入力

Application Name:アプリケーションの名前
Description:アプリケーションの説明
Company Name:会社名
Website URL:使用するサイトURL
Valid redirect URIs:Website URLと同じでOK
Privacy Policy URL: プライバシーポリシーの記載があるURL
Contact email:メールアドレス
deve5



6、Securityタブをクリックし、「Disable Implicit OAuth」のチェックを外す。

deve7-1


ここにチェックが付いていると、アクセストークンを発行するときに、エラーで返されます。

{“code”: 403, “error_type”: “OAuthForbiddenException”, “error_message”: “Implicit authentication is disabled”}


7、Manage Clientsのページに戻りデベロッパーの登録は完了。

表示されているCLIENT IDとREDIRECT URIを【ユーザーIDとアクセストークを取得する。】で使用するのでコピーします。

deve6


2、ユーザーIDとアクセストークンを取得する。


Instafeed.jsでユーザーIDとアクセストークが必要となります。

https://instagram.com/oauth/authorize/?client_id=【CLIENT ID】&redirect_uri=【REDIRECT URI】&response_type=token

1、上記URLの【CLIENT ID】と【REDIRECT URI】変更しブラウザでURLにアクセス

Manage Clientsのページに記載されている自分の情報に書き換え、URLをクリックすると下記のページが表示されるので「Authorize」をクリック
deve8



2、反映させるサイトが表示されるのでURLの中の文字をコピー

Instagramを反映させるサイトが表示されますが、URLを見ると
deve9
になっています。
この【access_token=】以下の文字を使用します。自分の文字を例にすると
ユーザーID(userId):48875156
アクセストークン(accessToken):48875156.64b8f1c.48d8baef107b438d8b4d98a8c51cb003
になります。


3、Instafeed.jsとjQuery simplyScrollを使ってサイトに反映

【Instafeed.js】



Instafeed.js


http://instafeedjs.com/
Instagramで最新のfeedを取得してくれるjQueryプラグイン
オプションが細かく設定できるすぐれたプラグインです。

【jQuery simplyScroll】



simplyScroll


横方向に自動スクロールしてくれるjQueryプラグイン
http://logicbox.net/jquery/simplyscroll/

この項目については詳しく載っている記事を掲載いたします。
参考記事:
jQueryでInstagramのフィードを取得して自動スクロールさせる





反映したもの


    まとめ

    今回は【jQuery simplyScroll】も使いたかったので、上のようなレイアウトにしましたがInstagramを使ったフォトギャラリーも【Instafeed.js】を使いCSSでレイアウトを行えば様々な見せ方を行えます。 よかったら参考にしてみてください。


    参考記事一覧

    Instagram のユーザー情報を取得+写真をサイトに表示+それを自動スクロールする jQuery
    InstagramのAPIで写真を取得する【準備編】
    jQueryでInstagramのフィードを取得して自動スクロールさせる


    こんにちわ。Tedincの林田です。

    Web制作(htmlやcss)や開発では必須となるテキストエディタ。

    自分に合ったより便利な物を使う事が作業効率を高めます。

    そこで、友人に勧められた

    Sublime Text

    を紹介したいと思います。

    制作に携わりながら、より良いエディタを探し求め生涯これを使い続けようと最近決意しましたw

    その理由はふんだんにあります。というか、現段階(2015年8月)でめちゃめちゃ人気のあるエディタです。

     

    理由1:魅力的なUI。

     

    ui



    理由2:便利なショートカット機能が沢山ある。

    (commandを使った便利すぎる機能の例)

    commandキーを押しながら、複数ヶ所を同時に選択して編集することができる機能。

    command + L  command押したままLを連打で次の列も選択できる機能。

    command + クリック   任意の場所にカーソルを置き、異なる単語を同時に修正できる機能。



    理由3:様々なプラグインが用意されいる。
    (Package  Control)

    Sublime Textの魅力はPackage  Controlというプラグインを導入すれば様々な便利なプラグインを導入する事ができます。

    Package Controlのインストール方法

    1、下記のリンクをクリックして、パッケージコントロールのインストールページを開きます。

    Package Controlのインストール

     

    2、Sublimetext2とSublimetext3が並んでいるので、利用しているバージョンのコードをコピーします。

     

    3、Sublimetextを開き、Ctrl + ‘(バッククォート) を押し、コンソールを開きます。

     

    4、先ほどコピーしたコードをペーストし、Enterでインストール完了です。

     

    Ctrl + Shift + P でPackage Controlが開きます。そこから必要なプラグインを入力し選択すればプラグインがインストールされます。

     

    様々なプラグインは色々記事が出ていますので参考にして下さい。

     

    Package Controlのプラグイン参考記事一覧

    特におすすめしたい、Sublime Textのパッケージ

    WordPress開発がサクサク捗るSublime Textおすすめパッケージ27個まとめ

    Sublime Textに導入しているオススメのプラグイン23選

     

    まとめ

    テキストエディタは無料から有料のものまで沢山ありますが、悩んでいてWebサイト作りやシステム、アプリ開発などを本気でやっていこうと考えいる方にはオススメです。

    備考

    ちなみにSublimeTextは有料《1ライセンスでUSD $70(約8400円)》で、SublimeText2は無料で使う事ができます。

    色んな方がオススメしているSublimeText是非使ってみて下さい。

    こんにちは。宮崎でホームページ制作をしているTedincの林田です。

    今回はWordpressに導入したJetpackというプラグインについて書いていきます。

     

    jetpack_img

    Jetpackとは?

    様々な機能がついたWordpressのプラグインで、主にサイトの統計情報や、ソーシャルとの連動、外観の変更など40個以上の機能がついた多機能のプラグインです。

     

     

    目的

    今回はクライアントからFacebookとBlogが連動したいという要望があったので、プラグインを探して見つけたのがこのJetpackです。FacebookはもちろんTwitter、Google+などとも連携できます。

     

     

    今回起こった問題は『連携はでているが反映されない』

    設定の方法は簡単に連携できました。パブリサイズ共有から連携したい物を選択すれば連携できます。

    jetpack_img2

    POINT

    パブリサイズ共有設定前に、連携したいソーシャルにログインしておくと作業がスムーズです。

    しかし、今回は設定がうまくいっているのに反映できない問題が起こりました。

     

     

    投稿のパブリサイズ共有の中のチェックボックスがとカスタムメッセージが変更できない

    この問題の理由はパブリサイズ共有のチェックを過去に投稿した記事で行っていたのですが、既に投稿が反映している記事に関しては変更ができないようになっているようです。

    jetpack_img3

    新規投稿で確認してみるとチェックボックスがもカスタムメッセージ変更できます。

     

    しかしソーシャルに反映されない。

    解決方法の記事を検索し色々と試してみました。問題定義をするために参考になればと思うので試した解決方法を記載します。

     

    Jetpackについているデバックで確認、他のプラグインを一度停止させて確認

    WordPressではプラグイン同士の兼ね合いでプログラム自体が正常に作動しない場合があります。他のプラグインを一度停止させ確認するとプラグインが正常に起動する場合があります。そしてJetpackにはフッターびデバックという項目があり、デバックをクリックするとJetpack自体がしっかりと動作しているのかを教えてくれます。

     

    解決した方法『パブリサイズ共有を一旦外し最初から設定しなおす』

    シンプルな事ですが今回最初から設定し直して問題解決できました。設定の際に
    このブログの他のユーザーもこの連携を利用できるようにしますか ?

    というチェックボックスがあります。 ユーザー設定は1人だったので以前はチェックしませんでしたがチェックを入れ設定すると反映できました。

     

    総括

    今回はJetpackについて書きました。多機能なので素晴らしいと思いがちですが、機能性が多すぎてユーザビリティに少しかけるかなというのが私の個人の感想です。(Webについて詳しい方ならなんら問題ないと思います。) しかしソーシャルの連動は簡単にでき便利でかつ統計情報もダッシュボードに掲載されるので、Wordpress内で全て行いたいという方にはオススメのプラグインです。

     

     

    wpp5

     

     

    こんにちは。Tedincのteruです。

    今回はWordpressで必須なプラグインを書いていきます。

    WordPressについては以前ブログ(WordPressをやってみよう)にも書きましたがオープンソースのブログ/CMS プラットフォームです。

    WordPressには様々なプラグインが用意されておりプラグインをインストールするだけで使用できる用になっています。

     


    All In One SEO Pack


    All In One SEO PackはSEO関連の各種設定を行うことができるプラグインで、固定ページや記事毎に「title」や「description」を設定したり「canonical」の設定などを行うことができます。SEOを対策には必須となっているプラグインです。

     


    Custom Post Type UI


    Custom Post Type UI Wordpressに元々付いている「投稿」(←は元々ブログ用のプラットフォームなので投稿機能が付いている)の他に更新機能を追加する事ができるプラグインです。(例 洋服屋さんの場合→在庫の洋服を追加、 飲食店の場合→新メニューの追加など)

     


    Advanced Custom Fields


    Advanced Custom FieldsはCustom Post Type UIなどで追加した項目の内容を変更できるプラグインです。Custom Post Type UIで追加した項目はデフォルトでは投稿と同じ内容となっています。(例 タイトル、記事、タグ、など)

    しかし、例えば商品を上げるページで洋服屋さんを例にあげた場合、必要な物は、写真、商品名、商品の説明などです。 そういった投稿自体を変更したい場合にAdvanced Custom Fieldsを使って簡単にカスタマイズすることができます。

     


    Contact Form 7


    こちらは簡単にコンタクトフォームを実装できるプラグインです。外装のカスタマイズは出力されるソースを見てCSSで変更すれば外観の変更もできます。

    実装したい固定ページをつくり発行された物を貼り付けるだけでOKです。

     


    Google XML Sitemaps


    Google XML Sitemapsは検索エンジン向けのXMLサイトマップを作成したり新しい記事を公開した時に自動的にサイトマップを更新してくれるプラグインです。こちらもSEO効果を上げるためには間違いなく必須のプラグインです。

     


    総括


    今回はホームページ制作会社としてお客様に提供する上で必須となる5つを選出致しました。

     

    Tedincはお客さまに効果的なホームページ提供を心掛けており、その中でも大事な

     

    SEO効果の高いホームページ

     

    お客さまが簡単に新商品などを更新できるホームページ

     

    にするために必須なプラグインです。

     

    その他にもWordpressには画像を圧縮できるプラグインや、SNSと連動できるプラグインなど便利なプラグインがあります。

     

    SEO効果などには抜群の効果を発揮しますのでよかったら参考にしてみてください。

     

    CONTACT US

    お気軽にお問い合わせ下さい

    お問い合わせはコチラ