最近の更新

ラベル Blogger の投稿を表示しています。 すべての投稿を表示
ラベル Blogger の投稿を表示しています。 すべての投稿を表示

2016年9月13日火曜日

google-code-prettifyを設定する方法(GitHub)

【目的】
Bloggerにgoogle-code-prettifyを設定し、ブログ上のコードを見やすくします。
※google-code-prettifyプロジェクトがGitHubに移動したため、設定を変更します。



【準備】
1.『google-code-prettifyを設定する方法』の手順で『google-code-prettify』を一旦設定しておきます。



【手順1】
1.「Blogger」にログインします。
2.管理画面のメニューから「テンプレート」をクリック。




【手順2】
1.「HTMLの編集」をクリック。




【手順3】
1.【準備】追加した5,6行目を削除して以下の3行を追加。
    <link href='https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.css' rel='stylesheet' type='text/css'/>
    <script src='https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.js' type='text/javascript'/>
    <script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js' type='text/javascript'/>

【手順4】
1.「テンプレートを保存」ボタンをクリック。




【手順5】
1.以下の様なコードを入力し、色付けして表示されれば成功です。
<pre class="prettyprint">
    public static void main(String[] args) {
</pre>



以上です。

2013年11月14日木曜日

<b:if>文

【目的】
Bloggerで<b:if>文を使用します。



【手順1】
1.「テンプレートのHTMLの編集画面を開く方法」の手順でテンプレートのHTMLの編集画面を開きます。
2.<body>タグの後行に以下の行を入力。
3.「テンプレートを保存」ボタンをクリック。

<b:if cond='data:blog.pageType == "item"'>
    個別ページのみ表示されます。<br/>
</b:if>




【手順2】
1.「ブログを表示する方法」でブログを表示します。
2.INDEXページには何も表示されません。




【手順3】
1.記事のページには表示されます。
































以上です。

レイアウトデータタグ(グローバル変動データ)

【目的】
Bloggerでレイアウトデータタグのグローバル(どこでも使用可能)な変動データを表示します。



【手順1】
1.「テンプレートのHTMLの編集画面を開く方法」の手順でテンプレートのHTMLの編集画面を開きます。
2.<body>タグの後行に以下の行を入力。
3.「テンプレートを保存」ボタンをクリック。
data:blog.pageType=『<data:blog.pageType/>』<br />
data:blog.url=『<data:blog.url/>』<br />
data:blog.pageTitle=『<data:blog.pageTitle/>』<br />




【手順2】
1.「ブログを表示する方法」でブログを表示します。
※「data:blog.pageType」は表示しているページのタイプが表示されます。
 index・・・トップページ
 item・・・記事ページ
 archive・・・履歴ページ
※「data:blog.url」は表示されているURLが表示されます。
※「data:blog.pageTitle」は表示されてるページのタイトルが表示されます。




【手順3】
1.記事を表示した場合。




【手順4】
1.2013年の11月の履歴を表示した場合。




【手順5】
1.2013年の履歴を表示した場合。




【手順6】
1.ラベルでその他を選択した場合。






























以上です。

レイアウトデータタグ(グローバル固定データ)

【目的】
Bloggerでレイアウトデータタグのグローバル(どこでも使用可能)な固定データを表示します。



【手順1】
1.「テンプレートのHTMLの編集画面を開く方法」の手順でテンプレートのHTMLの編集画面を開きます。
2.<body>タグの後行に以下の行を入力。
3.「テンプレートを保存」ボタンをクリック。
data:blog.title=『<data:blog.title />』<br />
data:blog.homepageUrl=『<data:blog.homepageUrl />』<br />
data:blog.encoding=『<data:blog.encoding />』<br />
data:blog.feedLinks=『<data:blog.feedLinks />』<br />




【手順2】
1.「ブログを表示する方法」でブログを表示します。
※「data:blog.title」はブログのタイトルが表示されます。
※「data:blog.homepageUrl」はブログのURLが表示されます。
※「data:blog.encoding」はページの文字コードが表示されます。




【手順3】
1.HTMLのソースを確認します。
「data:blog.feedLinks」はフィードのリンクが出力されています。



























以上です。

FontAwesome4.0.2を使えるようにする方法

【目的】
BloggerでFontAwesome4.0.2を使えるようにします。



【手順1】
1.「テンプレートのHTMLの編集画面を開く方法」の手順でテンプレートのHTMLの編集画面を開きます。
2.</head>タグの前行に以下の行を入力。
※Bootstrapを使用する場合はbootstrap.cssの後。
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.min.css" rel="stylesheet" media="screen" />




【手順2】
1.<body>タグの後行に以下の行を入力。
※Bootstrapを使用する場合はbootstrap.cssの後。
<i class='fa fa-trash-o fa-lg'>




【手順3】
1.「テンプレートを保存」ボタンをクリック。




【手順4】
1.「ブログを表示する方法」でブログを表示します。
2.以下の様に削除アイコンが表示されれば完了です。






























以上です。

JQuery2.0.3を使えるようにする方法

【目的】
BloggerでJQuery2.0.3を使えるようにします。



【手順1】
1.「テンプレートのHTMLの編集画面を開く方法」の手順でテンプレートのHTMLの編集画面を開きます。
2.</body>タグの前行に以下の行を入力。
※Bootstrapを使用する場合はbootstrap.jsの前。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>




【手順3】
1.「テンプレートを保存」ボタンをクリックすれば完了です。




































以上です。

日付のグループ化を削除する方法

【目的】
Bloggerで日付のグループ化を削除します。



【手順1】
1.デフォルトの設定ではINDEXページは以下の様に日付でグループ化されて表示されます。




【手順2】
1.また個別ページでも以下の様に日付が表示されます。




【手順3】
1.「Blogger」にログインします。
2.管理画面のメニューから「レイアウト」をクリック。




【手順4】
1.「ブログの投稿」の「編集」をクリック。




【手順5】
1.「投稿ページのオプション」の「日付」の選択を外す。




【手順6】
1.「保存」ボタンをクリック。




【手順7】
1.「ブログを表示する方法」でブログを表示します。
2.以下の様にINDEXページで日付のグループ化が削除されています。




【手順8】
1.また個別ページでも以下の様に日付がされていれば成功です。







































以上です。

2013年11月13日水曜日

Bootstrap3.0.2を使えるようにする方法

【目的】
BloggerでBootstrap3.0.2を使えるようにします。
※併せて「JQuery2.0.3を使えるようにする方法」も実施しておく必要があります。



【手順1】
1.「テンプレートのHTMLの編集画面を開く方法」の手順でテンプレートのHTMLの編集画面を開きます。
2.</head>タグの前行に以下の行を入力。
<link href='//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>




【手順2】
1</body>タグの前行に以下の行を入力。
<script src='//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js' type='text/javascript'/>




【手順3】
1.<body>タグの後行に以下の行を入力。
<a href="#" class="btn btn-primary">Hello, Bootstrap3 for Blogger!</a>
2.「テンプレートを保存」ボタンをクリック。




【手順4】
1.「ブログを表示する方法」でブログを表示します。
2.以下の様にボタンが表示されれば完了です。

































以上です。

ブログを表示する方法

【目的】
Bloggerの管理画面からブログを表示します。



【手順1】
1.「Blogger」にログインします。
2.上部のメニューから「ブログを表示」をクリック。



【手順2】
1.以下の様にブログが表示されれば成功です。






























以上です。

テンプレートのHTMLの編集画面を開く方法

【目的】
BloggerでテンプレートのHTMLの編集画面を開きます。



【手順1】
1.「Blogger」にログインします。
2.管理画面のメニューから「テンプレート」をクリック。




【手順2】
1.「HTMLの編集」をクリック。




【手順3】
1.以下の様にテンプレートの編集画面が表示されれば成功です。






























以上です。

上部のナビゲーションバーを削除する方法

【目的】
Bloggerの上部のナビゲーションバーを削除します。



【手順1】
1.以下の様に、画面の上部にはBloggerのナビゲーションバーが表示されています。




【手順2】
1.「Blogger」にログインします。
2.管理画面のメニューから「テンプレート」をクリック。




【手順3】
1.「Nabvar」の「編集」をクリック。




【手順4】
1.「オフ」を選択。
2.「保存」ボタンをクリック。




【手順5】
1.「ブログを表示」ボタンをクリック。




【手順6】
1.以下の様にナビゲーションバーが削除されていれば成功です。




以上です。

2012年8月16日木曜日

Google Data Java Client Library1.47.1を使用しBloggerのBlogの記事を作成する方法(下書き)

【目的】
JavaライブラリのGoogle Data Java Client Library1.47.1のBloggerのAPIを使用し、Blogの投稿を下書きで作成します。



【手順】
1.「Javaプロジェクトの作成方法」の手順で、「BloggerSample001-Login」といプロジェクトを作成。
2.「Google Data Java Client Library1.47.1の必須jarファイルをライブラリに設定する方法(Javaプロジェクト)」の手順で、Google Data Java Client Library1.47.1の必須jarファイルをライブラリに設定します。
3.「Google Data Java Client Library1.47.1の依存jarファイルをライブラリに設定する方法(Javaプロジェクト)」の手順で、Google Data Java Client Library1.47.1の依存jarファイルをライブラリに設定します。
4.「Google Data Java Client Library1.47.1のBloggerのjarファイルをライブラリに設定する方法(Javaプロジェクト)」の手順で、Google Data Java Client Library1.47.1のBloggerのjarファイルをライブラリに設定します。
5.「Main.java」を以下の様に入力。
import java.io.IOException;
import java.net.URL;

import com.google.gdata.client.GoogleService;
import com.google.gdata.data.Entry;
import com.google.gdata.data.Feed;
import com.google.gdata.data.PlainTextConstruct;
import com.google.gdata.util.AuthenticationException;
import com.google.gdata.util.ServiceException;

public class Main {
    public static void main(String[] args) {
        GoogleService myService = new GoogleService("blogger",
                "foolprogrammer-SampleClient");
        try {
            myService.setUserCredentials("foolprogrammer@gmail.com", "xxx");
            System.out.println("ログインに成功しました。");
        } catch (AuthenticationException e) {
            System.out.println("ログインに失敗しました。");
            e.printStackTrace();
            return;
        }

        try {
            createPost(myService,
                       getBlogId(myService),
                       "記事のタイトル",
                       "この記事はプログラムから投稿されました。",
                       true);
        } catch (ServiceException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private static String getBlogId(GoogleService myService)
            throws ServiceException, IOException {
        // Get the metafeed
        final URL feedUrl = new URL(
                "http://www.blogger.com/feeds/default/blogs");
        Feed resultFeed = myService.getFeed(feedUrl, Feed.class);

        // If the user has a blog then return the id (which comes after 'blog-')
        if (resultFeed.getEntries().size() > 0) {
            Entry entry = resultFeed.getEntries().get(0);
            return entry.getId().split("blog-")[1];
        }
        throw new IOException("User has no blogs!");
    }

    public static Entry createPost(GoogleService myService, String blogId,
            String title, String content, Boolean isDraft)
            throws ServiceException, IOException {
        // Create the entry to insert
        Entry myEntry = new Entry();
        myEntry.setTitle(new PlainTextConstruct(title));
        myEntry.setContent(new PlainTextConstruct(content));
        myEntry.setDraft(isDraft);

        // Ask the service to insert the new entry
        URL postUrl = new URL("http://www.blogger.com/feeds/" + blogId
                + "/posts/default");
        return myService.insert(postUrl, myEntry);
    }
}

6.「Ctrl+Shift+O」を押し、Import文を補完、「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
7.「Javaプロジェクトの実行方法」の手順で、「Main.java」を実行。
8.以下の様に表示されれば成功です。





















以上です。

2012年7月29日日曜日

Google Data Java Client Library1.47.1を使用しBloggerのBlogの投稿一覧を取得する方法

【目的】
JavaライブラリのGoogle Data Java Client Library1.47.1のBloggerのAPIを使用し、Blogの投稿一覧を取得します。



【手順】
1.「Javaプロジェクトの作成方法」の手順で、「BloggerSample001-Login」といプロジェクトを作成。
2.「Google Data Java Client Library1.47.1の必須jarファイルをライブラリに設定する方法(Javaプロジェクト)」の手順で、Google Data Java Client Library1.47.1の必須jarファイルをライブラリに設定します。
3.「Google Data Java Client Library1.47.1の依存jarファイルをライブラリに設定する方法(Javaプロジェクト)」の手順で、Google Data Java Client Library1.47.1の依存jarファイルをライブラリに設定します。
4.「Google Data Java Client Library1.47.1のBloggerのjarファイルをライブラリに設定する方法(Javaプロジェクト)」の手順で、Google Data Java Client Library1.47.1のBloggerのjarファイルをライブラリに設定します。
5.「Main.java」を以下の様に入力。
import java.io.IOException;
import java.net.URL;

import com.google.gdata.client.GoogleService;
import com.google.gdata.data.Entry;
import com.google.gdata.data.Feed;
import com.google.gdata.util.AuthenticationException;
import com.google.gdata.util.ServiceException;

public class Main {
    public static void main(String[] args) {
        GoogleService myService = new GoogleService("blogger",
                "foolprogrammer-SampleClient");
        try {
            myService.setUserCredentials("foolprogrammer@gmail.com", "xxx");
            System.out.println("ログインに成功しました。");
        } catch (AuthenticationException e) {
            System.out.println("ログインに失敗しました。");
            e.printStackTrace();
            return;
        }

        try {
            printAllPosts(myService, getBlogId(myService));
        } catch (ServiceException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private static String getBlogId(GoogleService myService)
            throws ServiceException, IOException {
        // Get the metafeed
        final URL feedUrl = new URL(
                "http://www.blogger.com/feeds/default/blogs");
        Feed resultFeed = myService.getFeed(feedUrl, Feed.class);

        // If the user has a blog then return the id (which comes after 'blog-')
        if (resultFeed.getEntries().size() > 0) {
            Entry entry = resultFeed.getEntries().get(0);
            return entry.getId().split("blog-")[1];
        }
        throw new IOException("User has no blogs!");
    }

    public static void printAllPosts(GoogleService myService, String blogId)
            throws ServiceException, IOException {
        // Request the feed
        URL feedUrl = new URL("http://www.blogger.com/feeds/" + blogId
                + "/posts/default");
        Feed resultFeed = myService.getFeed(feedUrl, Feed.class);

        // Print the results
        System.out.println(resultFeed.getTitle().getPlainText());
        for (int i = 0; i < resultFeed.getEntries().size(); i++) {
            Entry entry = resultFeed.getEntries().get(i);
            System.out.println("\t" + entry.getTitle().getPlainText());
        }
        System.out.println();
    }
}

6.「Ctrl+Shift+O」を押し、Import文を補完、「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
7.「Javaプロジェクトの実行方法」の手順で、「Main.java」を実行。
8.以下の様に表示されれば成功です。
































以上です。

Google Data Java Client Library1.47.1を使用しBloggerのBlogのBlogIDを取得する方法

【目的】
JavaライブラリのGoogle Data Java Client Library1.47.1のBloggerのAPIを使用し、BlogのIDを取得します。



【手順】
1.「Javaプロジェクトの作成方法」の手順で、「BloggerSample001-Login」といプロジェクトを作成。
2.「Google Data Java Client Library1.47.1の必須jarファイルをライブラリに設定する方法(Javaプロジェクト)」の手順で、Google Data Java Client Library1.47.1の必須jarファイルをライブラリに設定します。
3.「Google Data Java Client Library1.47.1の依存jarファイルをライブラリに設定する方法(Javaプロジェクト)」の手順で、Google Data Java Client Library1.47.1の依存jarファイルをライブラリに設定します。
4.「Google Data Java Client Library1.47.1のBloggerのjarファイルをライブラリに設定する方法(Javaプロジェクト)」の手順で、Google Data Java Client Library1.47.1のBloggerのjarファイルをライブラリに設定します。
5.「Main.java」を以下の様に入力。
import java.io.IOException;
import java.net.URL;

import com.google.gdata.client.GoogleService;
import com.google.gdata.data.Entry;
import com.google.gdata.data.Feed;
import com.google.gdata.util.AuthenticationException;
import com.google.gdata.util.ServiceException;

public class Main {
    public static void main(String[] args) {
        GoogleService myService = new GoogleService("blogger",
                "foolprogrammer-SampleClient");
        try {
            myService.setUserCredentials("foolprogrammer@gmail.com", "xxx");
            System.out.println("ログインに成功しました。");
        } catch (AuthenticationException e) {
            System.out.println("ログインに失敗しました。");
            e.printStackTrace();
            return;
        }

        try {
            System.out.println("BlogId=" + getBlogId(myService));
        } catch (ServiceException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private static String getBlogId(GoogleService myService)
            throws ServiceException, IOException {
        // Get the metafeed
        final URL feedUrl = new URL(
                "http://www.blogger.com/feeds/default/blogs");
        Feed resultFeed = myService.getFeed(feedUrl, Feed.class);

        // If the user has a blog then return the id (which comes after 'blog-')
        if (resultFeed.getEntries().size() > 0) {
            Entry entry = resultFeed.getEntries().get(0);
            return entry.getId().split("blog-")[1];
        }
        throw new IOException("User has no blogs!");
    }
}

6.「Ctrl+Shift+O」を押し、Import文を補完、「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
7.「Javaプロジェクトの実行方法」の手順で、「Main.java」を実行。
8.以下の様に表示されれば成功です。
































以上です。

Google Data Java Client Library1.47.1を使用しBloggerのBlogの一覧を取得する方法

【目的】
JavaライブラリのGoogle Data Java Client Library1.47.1のBloggerのAPIを使用し、Blogの一覧を取得します。



【手順】
1.「Javaプロジェクトの作成方法」の手順で、「BloggerSample001-Login」といプロジェクトを作成。
2.「Google Data Java Client Library1.47.1の必須jarファイルをライブラリに設定する方法(Javaプロジェクト)」の手順で、Google Data Java Client Library1.47.1の必須jarファイルをライブラリに設定します。
3.「Google Data Java Client Library1.47.1の依存jarファイルをライブラリに設定する方法(Javaプロジェクト)」の手順で、Google Data Java Client Library1.47.1の依存jarファイルをライブラリに設定します。
4.「Google Data Java Client Library1.47.1のBloggerのjarファイルをライブラリに設定する方法(Javaプロジェクト)」の手順で、Google Data Java Client Library1.47.1のBloggerのjarファイルをライブラリに設定します。
5.「Main.java」を以下の様に入力。
import java.io.IOException;
import java.net.URL;

import com.google.gdata.client.GoogleService;
import com.google.gdata.data.Entry;
import com.google.gdata.data.Feed;
import com.google.gdata.util.AuthenticationException;
import com.google.gdata.util.ServiceException;

public class Main {
    public static void main(String[] args) {
        GoogleService myService = new GoogleService("blogger", "foolprogrammer-SampleClient");
        try {
            myService.setUserCredentials("foolprogrammer@gmail.com", "xxx");
            System.out.println("ログインに成功しました。");
        } catch (AuthenticationException e) {
            System.out.println("ログインに失敗しました。");
            e.printStackTrace();
            return;
        }

        try {
            printUserBlogs(myService);
        } catch (ServiceException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private static void printUserBlogs(GoogleService myService)
            throws ServiceException, IOException {

        // Request the feed
        final URL feedUrl = new URL(
                "http://www.blogger.com/feeds/default/blogs");
        Feed resultFeed = myService.getFeed(feedUrl, Feed.class);

        // Print the results
        System.out.println(resultFeed.getTitle().getPlainText());
        for (int i = 0; i < resultFeed.getEntries().size(); i++) {
            Entry entry = resultFeed.getEntries().get(i);
            System.out.println("\t" + entry.getTitle().getPlainText());
        }
    }
}

6.「Ctrl+Shift+O」を押し、Import文を補完、「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
7.「Javaプロジェクトの実行方法」の手順で、「Main.java」を実行。
8.以下の様に表示されれば成功です。
































以上です。

関連記事