Quantcast
Channel: インターネット | ゆうそうとITブログ
Viewing all 90 articles
Browse latest View live

Markdownで情報を記録・共有することに特化したソフトウェアKobito for Windows

$
0
0

Markdownとはテキストで文字修飾をしながら、記録できる記法のことです。
MacにはKobitoという定評のあるMarkdownエディタがあったのですがWindows版は出ていませんでした。しかし、今日気がついたところ2015年の5月にKobito for Windows というものが出ていました!
ということで、さっそくKobito for Windowsをダウンロードして試してみました。

Markdownが使えるとどのように便利なの?

Markdown記法とは、テキストで文字装飾をしながらメモを取ったり、簡単なマニュアルを作ることができるので覚えると色々使えて便利な記法です。WordPressでもJetpackプラグインを使ってMarkdown形式で記事を書くことができます。

文字の装飾でよく知られているのは HTML ですがそれよりもっと簡単に、メモを取りながらでも文字装飾ができるのがMarkdown記法の特徴です。

Markdown(マークダウン)は、**文章の書き方**です。デジタル文書を活用する方法として考案されました。特徴は、

- 手軽に文章構造を明示できること
- 簡単で、覚えやすいこと
- 読み書きに特別なアプリを必要としないこと
- それでいて、対応アプリを使えば快適に読み書きできること

などです。Markdownはジョン・グルーバー(John Gruber)によって2004年に開発され、最初は [Daring Fireball: Markdown](http://daringfireball.net/projects/markdown/) で公開されました。その後、多くの開発者の手を経ながら発展してきました。

のように記述することで、Jetpackのマークダウンが有効になっている状態のWordPressの投稿では

このように表示することができます。メールで書くような書き方でHTML的な表示をすることができるもの、のようです。

Kobito for Windowsのダウンロードとインストール

Kobito for WindowsはこのMarkdown記法をローカルプログラムとして記述できるソフトウェアです。ダウンロードしてインストールしてみます。

Kobito for windows

image

このWebサイトで Kobitoをダウンロード(無料) をクリック

kobito-v2.0.2.zip(数字はバージョンによって異なります)というファイルを保存します。

kobito-v2.0.2.zipを解凍します。

kobito-v2.0.2 というフォルダができて、その中にdistというフォルダがあり、その中にkobito-win32-ia32というフォルダがあります。この中の、

image8

kobito.exe をダブルクリックします。

image2

この画面がポップアップするので

image3

次へをクリック

image4

はい(どっちでもいいんですが) をクリック
image5

私の場合、Qiitaに記事は書かないので キャンセル をクリック

image6

これでKobitoのインストールが終わって、開始画面が表示されました。

Kobito for Windowsを使ってみる

Kobito for Windows を使ってみたいと思います。

新しい記事(文書)を作るには

ws000000

記事>新規作成 をクリックするか

ws000001

新規作成ボタン をクリックします

ws000002

このような作成画面になります。左側がMarkdown記法で記述するスペースが、右側がプレビュースペースです。

1行目にタイトルを入力…というところに

ws000003

タイトルを入力します。

ws000006

タイトルの下にMarkdown記法でH1タグの見出しをつけてみます。右側にプレビューされているのが分かると思います。

ws000007

保存 をクリックすると

ws000008

最初の画面に戻ってタイトルが「明日のblog記事」で保存されて右側にはプレビューが表示されます。

先ほど例として出したMarkdown記法の例の文章をいれてみると

ws000004

このようになり、右側には整形された文章がプレビューされます。

Markdown記法のルールを参照する

Markdown記法はローカルルールといいますか、方言的に解釈する媒体により多少の違いがあります。

Kobito for WindowsでのMarkdown記法 については

Kobitoヘルプ > Markdown記法について

あるいはKobitoのホーム画面の

ws000009

Markdownチートシートをクリックすると記法の一覧が参照できます。

WordPressで利用できるMarkdown記法については

WordPress.com Markdown quick reference

に記法の一覧があります。

たとえば、

~~~~
This is a 
piece of code 
in a block
~~~~

```css
#button {
    border: none;
}
```

のようにMarkdown記法で書いたときに、Kobitoでは

ws000010

このように表示されますが、WordPress だと

ws000011

こんな感じに 行番号付き で表示される、などの若干の違いもあるようです。

KobitoでMarkdownを使ってこの記事を書いてみました。

この記事は Kobito for Windows を使って書いてみました。

ws000012

いつもWordPressの投稿画面に直接、Markdownを使って書いてはいるのですがあまり記法を知らないので使っているのは h2タグに対応する ## だけでした。

今回は見出しの他、画像をいれたり太文字にしたり、リンクをつけたりということをすべて Kobito for Windows でやってみたのですが、初めて使った割にはかなり快適にblogを書くことができました。

若干困ったのが画像の貼り付けです。いつもならコピーしてあった画像をペーストするだけで貼り付けられることができますが、 Kobito for Windows では画像をファイルにしないと貼り付けることができませんでした。

またその画像ファイルもC:\Users\mika\Desktop_temp_24時間後に削除に置いたものはエラーになってしまって貼り付けられませんでした。もしや…と思ってc:\tempというフォルダを作ってそこに画像を置き、ドラッグ&ドロップで貼り付けたところうまく貼り付けることができました。

想像ですが「日本語のフォルダ名」には対応していないのかもしれません。

また、この記事をこのままコピペしてWordPressの投稿画面にはりつけると

ws000015

こんな風に、画像のところがファイル名のみの表示になってしまいました。

画像を一括でアップしてひもづける方法や思いつかなかったので、今まで通り

クリップボードにコピーした画像が色々なサイトで貼り付けられることについて記事を書きました。今回はWordPressの投稿や固定ページでも直接画像をクリップボードから貼り付けられ

を使って、画像は貼り付けました。

まとめ:総合的に見てKobito for Windows でblogの下書きをするのは効率的か?

画像の貼り付けについては今まで通りする、ということで「総合的に見てKobito for Windows でblogの下書きをするのは効率的か?」ということを考えてみました。

体感としては、効率的で今後も利用したい と思いました。

blogをWordPressの投稿画面で書いているとき、画像を貼り付けてもプレビューが同時に表示されているわけではないので何度も何度もプレビューを見たり、再読込をしたりして確認します。

Kobito for Windows を使ってblogの下書きをしていると、画像を貼り付ければその画像がblogのイメージで表示できるので安心して書き進めることができます。

後にWordPressの投稿画面で貼り付けるときも実際の画像を見ながら貼り付けるので安心して貼り付けることができて時間的には節約することができました。

またよく使う太字もアスタリスク2つで囲うという方法はとても簡単で、キーボードから手を離すことなく太字にできるので大変快適に書くことができました。いつもは手を離したくないためにあとでまとめて太字にしていましたが、今回はblogを書きながら太字指定も同時に指定してけたので、こちらでもかなり時間の節約となりました。

なにより、プレビューを見ながらblogが書けるのはとても快適でした。

ということで今後しばらくblogはKobito for Windows を使って書いてみようと思っています(^^)/

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

スマホの時、「今すぐ電話する」ボタンを表示、タップで電話する機能を追加する

$
0
0

毎月一度行っているWordPressもくもく会ではWordPressやWebサイト制作に関する四方山話をするのが楽しいです。先週行ったもくもく会では「スマホ表示の時に今すぐ電話するボタンが表示できるといいのだけどなぁ」という要望を聞きました。
確かに、スマホの時はそういうボタンを表示したいサイトもあると思います。ちょっと前に作ったお問合せボタンと同じようにtoastrでできるのでは?と思ったのでタップで電話する機能を追加してみました。

タップしたら電話するボタンを表示する

ちょっと前に書いたblog

たとえばこのブログを読んでいて、自分でやるのは不安なので有償で頼んでみたいと思うお客さん(がいるといいんですが!)がいたときに、すぐに聞けるようにお問い合わせのボタンが常に表示

Webページの右下に「お問い合わせ」というボタンを縦表示させる方法 というブログ記事でページの右下に「お問い合わせ」という縦書きのボタンを追加しました。 実際に追加してから見て

この2つの記事ではボタンをクリックするとお問合せページに飛ばす、ということをしました。ここで使っているjsのライブラリ toastr を使えば 電話するボタン も簡単に表示できそうなのでちょっと試してみました。

toastrを使うには、

toastrライブラリを使って「お問い合わせ」というボタンを表示する

この部分だけを読んで、toastrライブラリを準備してください。

タップしたら電話するボタンを表示するには、

  jQuery(document).ready(function() {
    toastr.options = {
      "closeButton": false,
      "debug": false,
      "newestOnTop": false,
      "progressBar": false,
      "positionClass": "toast-bottom-full-width",
      "preventDuplicates": false,
      "onclick": null,
      "showDuration": "300",
      "hideDuration": "1000",
      "timeOut": "0",
      "extendedTimeOut": "0",
      "showEasing": "swing",
      "hideEasing": "linear",
      "showMethod": "fadeIn",
      "hideMethod": "fadeOut"
    }
    Command: toastr["info"]("<a href='tel:080-9999-9999'><div style='width:100%'>今すぐ電話する</div></a>", "");
  });

このソースを toastr_tel.js という名前で、使っている 子テーマのjs というフォルダに(無ければフォルダを作る)保存します。ここで、かけてほしい電話番号電話するボタンに表示したい文字を指定します。divwidth:100% としているのはボタンのどこを押しても電話をする動作をさせるためです。これをいれないと文字の部分をクリックしたときしか電話をかけてくれません。

次に子テーマの functions.php

// toastr_tel.jsとCSSを読み込む
function my_scripts_toastr() {
        wp_enqueue_script( 'toastr_js', get_bloginfo('stylesheet_directory') . '/toastr/build/toastr.min.js', array(), false, true );
        wp_enqueue_script( 'toast', get_bloginfo('stylesheet_directory') . '/js/toastr_tel.js', array(), false, true );
}
    add_action( 'wp_enqueue_scripts', 'my_scripts_toastr' );
function my_styles_toastr() {
    wp_enqueue_style( 'toastr_css', get_bloginfo( 'stylesheet_directory') . '/toastr/build/toastr.min.css', array(), null, 'all');
}
add_action( 'wp_enqueue_scripts', 'my_styles_toastr' );

このソースを追加します。これはtoastrライブラリのjsとCSS、先ほど作ったtoastr_tel.jsを読み込む設定です。

スマホで「今すぐ電話する」ボタンの表示とタップしたら電話するかを確かめる

これで準備ができましたので、スマホで「今すぐ電話する」ボタンの表示タップしたら電話するかを確かめてみます。

この指定をしたWebサイトをスマホで見てみると、

こんな感じに、 今すぐ電話する ボタンが表示されています。

タップすると、

すぐに電話をかけることができるようになっています。

ボタンの色を変えたり、スマートフォンの時だけ表示するようにしてみる

たまたまですが、テスト用に使ったWebサイトの色とボタンの色が同じような色でちょっと目立たないので、ボタンの色を変えてみました。

使っている子テーマの style.css

/* toast カスタマイズ */
.toast-info {
    background-color:#ff6347;
}

を追加しました。これで再表示すると、

こんな感じに、ボタンの色が変わってだいぶわかりやすくなりました。

あと、PCのときはこのボタンを表示したくないので、

/* スマホのときだけ表示 */
#toast-container  {
    display:none;
}
@media (max-width: 767px) {
    #toast-container  {
        display:block;
    }
}

をいれました。これでPCでブラウザの幅が広いとき

ボタンが表示されなくなりました。PCでもブラウザの幅を縮めれば、

こんな感じにボタンが表示されます。

厳しくスマートフォンかどうかを判断するにはユーザーエージェントを使って判断する方法がありますが電話番号を表示するかどうか、だけでしたらCSSで幅を判定する程度でいいかなと思います。

まとめ:なんでもtoastrでやってみました

たまたま使ったtoastrというライブラリのデザインがいい感じだったので本来はトーストを表示するためのtoastrなのですが

参照

「ブラウザにお知らせを表示して自動的に消えるトーストを作る HTML編」でブラウザにお知らせを表示するトーストの作り方(お料理みたいですが…)について書きました。 今回はblo

お問合せボタンを表示したり、今回のように「今すぐ電話する」ボタンを表示したりしてみました。

実際にはCSSとJQueryを使って自作してもたいした手間ではないような気がしてきたので、もし同じようなことがあったらtoastrのライブラリ無しで作ってみようかな~と思っています(^^)/

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

Webサイトで本をめくるように表示することができるJQueryプラグインturn.jsを試す

$
0
0

Web制作をしているといろいろな要望を受けることがあります。Webサイトで本をめくるようにコンテンツを見せたいという要望があったときにさて、どんな方法があるだろうと思いました。
うっすらとJQueryのプラグインがあるんだろうなぁと思って検索をしてみました。いくつか見つかったのですが一番エフェクトが凝ってるなぁと思ったJQueryプラグイン「turn.js」を試してみました。

Webサイトで本をめくるように表示することができるJQueryプラグインturn.jsのサンプルを見る

http://www.turnjs.com/

このturn.jsのWebサイトから実際に本をめくるような動きを確認することができます。

並んでいる本をクリックして

ページの上下のどちらかをクリックしてめくると、このようにめくる途中、次のページが見えるようなリアリティのあるめくれ方をします。

写真だけでなく、

このようなHTMLも本の形に整形できます。テキストなので、chromeなら

右クリックして 日本語に翻訳 すれば

日本語で読むこともできます。

turn.jsをダウンロードしてHTMLに組み込んでみる

turn.jsをダウンロードしてHTMLに組み込んでみます。

http://www.turnjs.com/

トップページで Download をクリック

5396f77366f55-turnjs4.zip というファイルがダウンロードされるので、解凍します。

解凍すると 5396f77366f55-turnjs4 というフォルダの中に、turnjs4 というフォルダができています。

この turnjs4 フォルダをHTMLを作りたいディレクトリーにコピーします。

turn.jsの部分のコードは 本のようにページをパラパラめくる事ができるjQueryプラグイン「turn.js」! こちらのコードを参考にさせていただきました。ありがとうございます!

写真の本を作ってみようと思ったので、

Webサイトで使う素材をいろいろなサイトで探して使っています。今回は「商用利用可能」「センスが良い」「高画質」「無料」の写真素材サイトunsplashについて書きます。

こちらの記事にも書いた unsplash.com の写真を12枚使ってみました。縦長にしたかったので、

最近、フリー写真を提供している unsplash.com の写真を使わせていただくことが多いです。とてもきれいな写真が版権フリーで利用できるので助かっています。 スライダーで画

縮小革命を使って



498×646ピクセル
の大きさを指定して作ってみました。小さくした画像はHTMLを作るフォルダにimgという名前のフォルダを作ってそこにいれておきます。

コードは、

<!doctype html>
<head>
</head>
<body>
<div id="flipbook">
<div><img src="img/1.jpg" alt=""></div>
<div><img src="img/2.jpg" alt=""></div>
<div><img src="img/3.jpg" alt=""></div>
<div><img src="img/4.jpg" alt=""></div>
<div><img src="img/5.jpg" alt=""></div>
<div><img src="img/6.jpg" alt=""></div>
<div><img src="img/7.jpg" alt=""></div>
<div><img src="img/8.jpg" alt=""></div>
<div><img src="img/9.jpg" alt=""></div>
<div><img src="img/10.jpg" alt=""></div>
</div><script type="text/javascript" src="turnjs4/extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="turnjs4/lib/turn.min.js"></script>
<script type="text/javascript">
$(function(){
$('#flipbook').turn({
width:996,
height:646,
autoCenter: true
});
});
</script>
</body>
</html>

このように書いて book.html という名前で保存しました。

book.html をブラウザで表示してみる

作った book.html をブラウザで表示してみます。ローカルPCではFirefoxもしくはchromeもしくはIE11で確認することができました。WebサイトだとEdgeでも表示できると思います。

book

ページの上下をクリックしてめくることができました(^^)/

まとめ:オプションや指定の仕方でもっと凝ったことができそう

このサンプルはとても単純な形ですが、先ほどダウンロードした turnjs4 フォルダには samples というフォルダがありもっと複雑な表現をしたサンプルが入っています。

コードは難しそうですがサンプルのHTMLに全部書いてあるのでまねしながらやってみると同じように複雑な本の表現ができるのではないかなと思いました。高級なホテルや高級な商品のWebサイトにカタログのようにおいて見せるのにぴったりな感じの素敵なエフェクトができそうですよ(^^)/

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

【初心者向け】無料FTPソフトでオススメのFilezillaのインストールと設定と使い方

$
0
0

「FTPソフトってご存じですか?」って聞いたときに「もちろん」なのか「え?FTPソフトって何?」なのかは今までWebの制作などをしたことがあるかとか、いつからWebを触っているかによって違うと思います。
以前HTMLが全盛の頃はもちろんFTPでファイルをアップロードしないとコンテンツを更新できなかったので、初心者でも誰でもFTPソフトを使っていましたが、最近はWordPressなどのCMSでWebサイトを作ることが多いのでFTPソフトを知らなくてもコンテンツの更新ができるようになり、FTPソフトを知らない方も多くなってきました。
WordPressの個人指導などをしてるとやはり、FTPソフトを使った方がスムーズに行く場合もあるため、オススメのFilezillaの使い方などについて書いてみようと思います。

FTPソフトとは?

FTPソフトとは、Webサーバー(○○○レンタルサーバー)にファイルをアップロードするソフトです。図にすると

ftp

こんな感じになります。Webサーバーにあるコンテンツ(Webサイト)を閲覧者は見ています。赤の矢印部分で、管理者がコンテンツを投稿したり画像をアップロードしたりします。

Webサーバーと考えるとちょっと難しそうですが、日頃パソコン内で行っているファイルやフォルダを別のフォルダにコピーすることとやっていることは変わりません。赤の矢印部分で行っているのはファイルを別な場所にコピーするということです。パソコン内からサーバーにファイルやフォルダをコピーすることを「アップロードする」と言い、サーバーからパソコンにファイルやフォルダをコピーすることを「ダウンロードする」と言います。

WordPressではコンテンツはWebサーバーのプログラム上で(ダッシュボードの投稿など)入力できますし、画像メディアの追加でアップロードできます。

HTMLだけで同じようにコンテンツを作るときは、HTMLファイルで作成してFTPソフトでアップロードし、画像画像ファイルをFTPソフトでアップロードする、という方法でした。

WordPressで作ったWebサイトでもWordPressの機能として可能な方法(ダッシュボードからの投稿や写真のアップロード)以外でのファイルのアップロードやダウンロードは、以前と同じようにFTPソフトを使えばできるようになります。

無料のFTPソフトでオススメはFilezilla

無料のFTPソフトでオススメはFilezillaです。WindowsでもMacでも使えるフリーソフトです。

ダウンロードは
https://osdn.jp/projects/filezilla/releases/

パッケージ FileZilla_Clientのリリース からダウンロードします。Windowsの場合は32ビットと64ビットのどちらかを落とすことになりますが、私の場合はwindows10でOSも64ビットなので64ビット版を落とします。

exeファイルがダウンロードされるのでダブルクリックして開きます。



I Agree
をクリック

Next をクリック

Next をクリック

Next をクリック

Install をクリック

インストールが開始されて、

終了画面が表示されるので、Finishをクリック。インストールが終了しました。

さくらのレンタルサーバーにFTPでファイルをアップロードしてみる

Filezillaを使って、さくらのレンタルサーバーにFTPで接続してファイルをアップロードしてみます。

スタートメニューをクリックして

filezillaと入力すると表示されるので、クリックしてFilezillaを立ち上げます。



サーバーの設定
をします。

左上にある サイトマネージャーを開く をクリック

新しいサイト をクリック

あとで識別できるような名前を入れておきます

さくらのレンタルサーバーの情報を確認します。申込をしたときに来る2つめのメール [さくらのレンタルサーバ] 仮登録完了のお知らせ にFTPに関する情報が書いてあります。

契約サービスの接続情報 というところにある情報でFTPサーバーに接続します。

このように設定します。赤い矢印の部分もデフォルトではなく、この値に設定します。

接続 をクリックします。

接続できるとこのように左にローカルのPC、右にレンタルサーバーのディレクトリが表示されます。

Filezillaを使ってファイルをアップロード、ダウンロードしてみる

ファイルのアップロード

PC側とレンタルサーバー側で作業したい場所のディレクトリ(フォルダ)に移動します。PC側のアップロードしたいファイル(もしくはフォルダ)をクリックして、

サーバー側にドラッグします

ファイルがアップロードされます。

ファイルのダウンロードは、逆に

サーバー側にあるファイル(もしくはフォルダ)をクリックして、PC側にドラッグすると

このようにダウンロードすることができます。

オススメ設定:ファイルのアップロードが簡単にされないようにする

Filezillaはデフォルト状態だとファイルをダブルクリックすると転送(アップロードもしくはダウンロード)をするように指定されています。間違ってダブルクリックしたときも転送されてしまうのがちょっといやなので、設定を変更しました。

編集>設定 をクリック



ファイル一覧
をクリック

ダブルクリック時の操作ファイルをダブルクリックしたときの操作 で、表示/編集 を選択して

OK をクリック。これでファイルをダブルクリックしても転送されなくなります。

おまけ:FTPができるようになると何ができるのか?

FTPができるようになるとたとえば

・Webサイトにアップロードしたたくさんの写真を一気にダウンロード
・親テーマをダウンロードして中のファイルを子テーマにコピー、それをアップロード
・Webサイトのファイル一式をダウンロードしてXAMPPなどを使ってローカルPCでサイトをいじる

などなど、いろいろなことができるようになります。初心者でもWebサイトをいじっていくつもりの場合はぜひ入れておいた方がいいと思うソフトです(^^)/

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

【2016年秋版】GoogleMapに複数の吹き出しのある地図をWordPressのショートコードで表示する

$
0
0

「GoogleMapに複数の吹き出しのある地図をWordPressのショートコードで表示する」という記事を2016年の2月16日に書いたのですが、その4ヶ月後の6月からGoogle mapを利用するときにAPIキーが必要になりました。そのため、blogに書いた内容では表示できないことになっていたようです。
ということで、2016年秋版のGoogleMapに複数の吹き出しのある地図をWordPressのショートコードで表示する、記事を書いてみました。

Google Mapを利用するために必要になるAPIキーの取り方

最初に、Google Mapを利用するために必要になるAPIキーの取り方について書きます。

https://developers.google.com/maps/documentation/javascript/get-api-key

上記のAPIキーを取得するページに行き、

キーの取得 をクリック

続行 をクリック

この画面になります。

名前のところにあとで自分でわかりやすいような名前をつけます。キーの制限HTTPリファラー(ウェブサイト)にチェックを入れて、この HTTPリファラー(ウェブサイト)からのリクエストを受け入れるというところにある入力欄に、使いたいWebサイトのURLを入力します。

作成 をクリック

ポップアップでこの画面が表示されます。自分のAPIキーというところにあるキーをコピーしてテキストファイルなどで保存しておきます。このキーがGoogleMapを利用する時に使えるAPIキーです。

子テーマにGoogle Mapを表示するコードやライブラリを追加する

利用している子テーマにGoogle Mapを表示するコードやライブラリを追加します。

追加するファイルやフォルダはこのような構成になっています。

Gmapsのライブラリを子テーマにいれる

GMaps.jsのファイル一式をダウンロードして子テーマにいれます。

https://github.com/hpneo/gmaps

こちらのページの

Clone or download をクリックして、Download ZIP をクリック

gmaps-master.zip というファイルがダウンロードされるので解凍します。gmaps-masterというフォルダにgmaps-masterというフォルダがあります。このフォルダ名を gmaps に変更してから子テーマにフォルダごとコピーします。

子テーマのfunctions.phpにコードを追加する

子テーマfunctions.phpにコードを追加します。

// gmap.js
add_shortcode( 'gmap_data_prepare', 'gmap_data_prepare' );
function gmap_data_prepare($atts) {
    /* 引数を展開する */
    extract(
        shortcode_atts(
            array(
                'lat' => '35.6575244',
                'lng' => '139.3349708',
                'zoom' => 16,
            ),
            $atts
        )
    );

    wp_enqueue_script( 'googlemapapi', 'https://maps.googleapis.com/maps/api/js?key=取得したgooglemapのAPIキー', array(), false, true );
    wp_enqueue_script( 'gmaps', get_bloginfo( 'stylesheet_directory') . '/gmaps/gmaps.js', array(), false, true );
    // 地図を記述
    wp_enqueue_script( 'gmaps_data', get_bloginfo( 'stylesheet_directory') . '/gmaps_data.js', array(), false, false );
?>
<script id="gmaps_data" src="<?php echo get_bloginfo( 'stylesheet_directory'); ?>/gmaps_data.js"
    latx         ='<?php echo json_safe_encode($lat); ?>'
    lngx       ='<?php echo json_safe_encode($lng); ?>'
    zoomx       ='<?php echo json_safe_encode($zoom); ?>'
></script>
<?php
}
function gmap_data_show($atts) {
    /* 引数を展開する */
    extract(
        shortcode_atts(
            array(
                'class' => '',
            ),
            $atts
        )
    );
    return '
    <div class="row">
        <div>
            <div id="gmaps_map" class="'.$class.'"></div>
        </div>
    </div>
';
}
add_shortcode( 'gmap_data_show', 'gmap_data_show' );

function json_safe_encode($data){
    return json_encode($data, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
}

add_shortcode( 'gmap_data_set', 'gmap_data_set' );
function gmap_data_set($atts) {
    /* 引数を展開する */
    extract(
        shortcode_atts(
            array(
                'id' => '1',
                'name' => '8Beat',
                'lat' => '35.6575244',
                'lng' => '139.3349708',
                'class' => 'overlay',
            ),
            $atts
        )
    );
    ?>
<script id="gmaps_data_point<?php echo $id; ?>" src="<?php echo get_bloginfo( 'stylesheet_directory'); ?>/gmaps_data_point.js"
    latx         ='<?php echo json_safe_encode($lat); ?>'
    lngx       ='<?php echo json_safe_encode($lng); ?>'
    namex       ='<?php echo json_safe_encode($name); ?>'
    classx       ='<?php echo json_safe_encode($class); ?>'
></script>
<script type="text/javascript">
    var indexx = <?php echo json_safe_encode($id); ?>;
</script>
<?php
    // 地図にポイントを記述
    wp_enqueue_script( 'gmaps_data_point', get_bloginfo( 'stylesheet_directory') . '/gmaps_data_point.js', array(), false, true );

}

取得したgooglemapのAPIキー というところには、実際に取得したAPIキーで置き換えます。

style.cssに追加する

子テーマのstyle.cssにmap表示に必要なCSSを追加します。

/* gmaps */
#gmaps_map{
  display: block;
  width: 95%;
  height: 350px;
  margin: 0 auto;
  -moz-box-shadow: 0px 5px 20px #ccc;
  -webkit-box-shadow: 0px 5px 20px #ccc;
  box-shadow: 0px 5px 20px #ccc;
}
#gmaps_map.large{
  height:500px;
}

.overlay{
  display:block;
  text-align:center;
  color:#fff;
  font-size:16px;
  line-height:20px;
  opacity:0.8;
  background:#4477aa;
  border:solid 3px #336699;
  border-radius:4px;
  box-shadow:2px 2px 10px #333;
  text-shadow:1px 1px 1px #666;
  padding:0 4px;
}
.overlay_arrow{
  left:50%;
  margin-left:-16px;
  width:0;
  height:0;
  position:absolute;
}
.overlay_arrow.above{
  bottom:-15px;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:16px solid #336699;
}
.overlay_arrow.below{
  top:-15px;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-bottom:16px solid #336699;
}

/* overlay_cafe add */
.overlay_cafe{
  display:block;
  text-align:center;
  color:#fff;
  font-size:16px;
  line-height:20px;
  opacity:1;
  background:#44aa77;
  border:solid 3px #339966;
  border-radius:4px;
  box-shadow:2px 2px 10px #333;
  text-shadow:1px 1px 1px #666;
  padding:0 4px;
}
.overlay_cafe_arrow{
  left:50%;
  margin-left:-16px;
  width:0;
  height:0;
  position:absolute;
}
.overlay_cafe_arrow.above{
  bottom:-15px;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:16px solid #339966;
}
.overlay_cafe_arrow.below{
  top:-15px;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-bottom:16px solid #339966;
}

Gmapを表示するために必要なjsを追加します

Gmapを表示するために必要なjsを追加します。

gmaps_data_point.js 吹き出しを表示するjs
gmaps_data.js 地図を表示するjs

追加した2つのファイルはgmaps_ryus.zipこれをダウンロードして解凍してください。

解凍してできたgmaps_data_point.jsgmaps_data.jsを子テーマの直下に置きます。

マップや地点をショートコードで表示する

これで準備ができたのでマップや地点をショートコードで表示します。

地図だけを表示する

地図だけを表示してみます。

[gmap_data_prepare lat=35.6529115 lng=139.772094 zoom=13]
[gmap_data_show class="large"]

このように緯度経度とzoomを数値として指定したショートコードで投稿コンテンツを作成すると、

このような地図が表示されます。

複数の吹き出しを表示する

複数の吹き出しを表示するショートコードはこんな感じです。

[gmap_data_prepare lat=35.6575244 lng=139.3349708 zoom=14]
[gmap_data_set id=1 name='ハニカムステージ' lat=35.6578954 lng=139.3386372]
[gmap_data_set id=2 name='8Beat' lat=35.6575244 lng=139.3349708]
[gmap_data_set id=3 name='Wark' lat=35.6578086 lng=139.3131089]
[gmap_data_set id=4 name='Cafe de la poste' lat=35.6614742 lng=139.3306111 class="overlay_cafe"]
[gmap_data_set id=5 name='バーゼル富士森公園店' lat=35.653637 lng=139.3202639 class="overlay_cafe"]
[gmap_data_show class="large"]

投稿などでこのようにショートコードを指定します。各吹き出しはgmap_data_setで指定します。idは1から順に指定します。名前、緯度経度を指定して、バルーンの背景色を青ではなく緑にしたい場合はclass=”overlay_cafe” と付け加えておきます。これを表示すると、

こんな感じに複数の地点を表示する地図が表示ができました(^^)/

まとめ:技術は日進月歩。最新の状態でできるかどうかはとても大変

以前の記事を書いてからたった4ヶ月で、使えなくなっていたようです(>_<)。いつもいつも技術は日進月歩なので気がついてかつ時間があってかつ可能であれば今回のように最新の記事を書くことができますが、全部の記事を検証するのは無理なので古い記事は参考程度としていただくと助かります。

また、最近頻発している状況があるのですがブログにあるコードをコピーして動かしたときにエラーになってしまうということがあります。

原因は 2つ以上の半角スペースが全角スペースなどの文字コードに勝手に置き換わってしまう という現象です。現象は特定できたのですが、解決方法がまだみつかりません。

もしも、ブログのコードをコピペしておかしな動きになったときは2つ以上の連続した半角スペースを1つの半角スペースに置き換えていただくとうまくいくと思います。

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

スマホやタブレットでカード決済ができるSquare。iPhoneにさしてお試し購入してみた

$
0
0

ゆうそうと ではITの個別相談を業務として行っています。相談者の方とコワーキングスペースで相談に答えていますが、料金は今現在その場でいただいています。現金で受け取るだけでなく、場合によってはクレジットカードでも受け取れるようにしたいと思ったのでスマホでクレジット決済ができるSquareを導入することにしました。
Squareを購入して、設定をして、決済をするということを試してみましたのでそのことについて書いてみます(^^)/

Squareとは?

Squareとはお店や個人がお客様から料金を受け取るときに、スマホやタブレットののイヤホンジャックにさしたSquareにクレジッカードを通して、精算を行えるものです。

たぶんおそらく見たことがあると思うのですが、

こういうものです。これをスマホやタブレットにつけて

こんな感じにして、この四角いところに


* イメージ。これはセレオカードなので決済できません(^_^;

こんな感じにカードを通して、カード決済ができます。ICクレジットカードにも対応しています。

スマホやタブレットなのでお店などの場所にも限定されず、たとえばフリーマーケットでもカード決済ができるようになります(^^)/

まず最初にSquareを購入する

最短でSquareを始めたい場合はまずはじめにSquareを購入します。今は9月30日までSquare本体無料キャッシュバックキャンペーンをしているみたいですので、早めに手続きをすればキャッシュバックされるかも?です。

購入は

取り扱い店舗検索

にあるお店で購入するといいと思います。私はお店に行くのが面倒だったので、

Amazonで購入しました。他のお店より若干安かったのでお得かもです。プライムで注文したので翌日には届きました。

一つ注意点があります。イヤホンジャックにカードを読み取ろうとしたときに全然読み取れなくて「なにこれ~?」と思ったんですが 最新のSquareは充電が必要 ということだったのです。

本体を取り出した後の

さらにに、、、電源コードがありました。形状はアンドロイドのスマートフォンなどに使われている汎用的な充電のものでした。

このように充電します。赤色のときはまだ充電が足りません。充電が完了すると緑色に変わります。

しかしこれ、充電しておかないと使えないと困るなーと思ったんですが

こんな感じに携帯電源などでコードをつないでおけば(通常の電源でももちろんOK)充電が全くされていなかった状態でもすぐに使えるので安心しました。

また、PCのUSBポートからも

充電することが可能でした。

Squareに会員登録をする

Squareに会員登録をします。

https://squareup.com/jp

squareのトップページです。このページにある 無料アカウントを作成 をクリック

メールアドレスとパスワードを入力して 続行 をクリック

事業形態ごとに、


法人のとき

個人のとき

どちらかの入力方法で記入します。個人の時は公的な名称がなくても登録できるようなので、特に個人事業主として届け出ていなくてもOKみたいですね。ここで入力された名称や住所レシートの発行の際に使われます。



登録者個人
の情報を入力します。ここでの入力内容は表には出ない管理用の情報と思われます。

受取口座の情報を入力して、続行 をクリック

カードリーダーの注文画面になりますが、購入済みなのであとで注文するを選びました

これで、

こんな感じのPCでのSquare管理画面に入りました。

アプリのダウンロードと設定

メールを確認すると、

こういうメールが来ているので アカウント承認を完了する をクリック



メールアドレスとパスワード
を入力して、サインイン をクリック

管理画面に入りました。

このページにある

アプリをダウンロード をクリック

ポップアップした画面に スマホの電話番号 を入力して SMSで送信 をクリック

このようなSMSが届くのでリンクをタップ

この画面になるのでアプリをダウンロードします
* これだけだったらアプリを探してダウンロードしても同じだったかなと思いました(^_^;

Square のアイコンをタップ

アカウントはもう作ってあるので(スマホで登録もできるんですね)ログイン をタップ

メールアドレスとパスワードを入力して ログイン をタップ

通知の許可が表示されるので

すべて有効化して Squareレジをはじめる をタップ

あとで紹介する をタップ

注意事項が表示されるので OK をタップ

カードリーダーの使い方 が動画で表示されます。見たら × をタップして閉じます

自分のクレジットカードを使って100円のクレジット決済をする

この時点でSquareをイヤフォンジャックにさしておきます。

リーダーの準備が整いました と上部に表示されていればSquareが正しく接続されています。

100 と入力し ¥100のお会計 となったボタンをタップ

この画面になったら Squareにカードを通して決済をします。クレジットカードの場合矢印が書いてある方向にわりと素早く通すと決済できます。

決済が終わるとサインをする画面になるので

実際にはここでお客様にサインをしてもらいます

レシートを送信することができるのでSMSかメールでレシートを送信します。BlueToothのプリンタがつながっていればレシートを印刷することもできます。

レシートをメールで送ってみました。

こういうレシートが届きます。

管理者には

こういうように売り上げのメールが届きました。

PCの管理画面でも

こんな感じで売り上げを確認することができます(テストのため2回100円の売り上げを行いました)

手数料と入金されるまでの日数

PCの管理画面で

入金というところをクリック

次回の振り込み をクリック

こんな感じになっています。200円の売り上げに対して、手数料は6円、振込手数料もかかりません。これは~かなりお得な感じですね!

入金されるまでの日数は

Square からの入金スケジュール

こちらに書いてあります。なんと、三井住友銀行またはみずほ銀行を指定している場合は「翌営業日の正午ごろ」に入金されるようです、速い!

その他の金融機関でも1週間分をまとめて毎週金曜日の正午ごろに振り込まれる、ということですのでこちらも速いと思います!

ただし、一番最初は

こんな感じで、銀行の確認が取れるまでは振り込みがされませんので少しだけ待つことになるのかなと思います。

まとめ:iPhone7では使えない!?

ということで、とても素晴らしいSquareなのですが、最新のiPhone7はイヤフォンジャックが無くなってしまったため使うことができません、残念(>_<)、、、と思ったのですがそうではありませんでした。

イヤホンジャックに挿すクレカリーダは「iPhone 7」で使えるのか–Squareに聞いた

こちらの記事によると、

「iPhone 7/iPhone 7 Plusに同梱されるLightningとイヤホンジャックの変換アダプタでの利用は確認済み」

ということです。変換アダプターを使えばiPhone7でもSquareが使える、ということなので安心してSquareを導入することができそうです(^^)/

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

無料の画像編集ソフトGIMPは有料ソフトと遜色のない高機能 第1回インストールと画像の読み込み&縮小

$
0
0

最近WordPressの相談を受けることが多くなりました。画像を制作するときに無料で使えるソフトを試していましたが、フリー画像ソフトのGIMPはなぜか使っていませんでした。というのも昔使ったことがあったのですがそのときはちょっと使いづらいなぁと思っていたためです。
しかし、他に選択肢もなくなったので再度挑戦してみたところ「あぁもっと早く試せば良かった…」と思いました。WindowsでもMacでも使えるし、Webバナーを作るなど、いろいろな用途に使えそうです(^^)/。
第1回目の今回はGIMPをインストールして画像を読み込みんで縮小をしてみるところまでについて書いてみます。

GIMPのダウンロードとインストール

GIMPを窓の杜からダウンロードします。

GIMP

窓の杜からダウンロード をクリック

この画面になるのでしばらく待ちます。ファイルサイズが大きいのでちょっと時間がかかるかもしれません。

gimp-2.8.18-setup.exe というファイルがダウンロードされました。これをダブルクリックします。

インストール中の言語を選びますがJapaneseはなかったので、EnglishのままOKをクリック

Install をクリック

インストール中の画面です

インストールが終了するとこの画面になるので Finish をクリック。

GIMPを立ち上げて、画像を読み込んでみる

スタートボタンをクリックして GIMP と入力すると

このように GIMP2 が表示されるのでクリックします

最初の立ち上げだけちょっと時間がかかりますが、待ちます。

GIMPが立ち上がりました。背景が透けている(壁紙が見えてる)のにちょっと戸惑うんですが、慣れましょう!

GIMPで画像を読み込んでみます



ファイル>開く/インポート
 をクリック

画像ファイルを指定して、開く をクリック

この画像はとても大きなものなのですが、赤枠のところに出ている 12.5% で表示されて、画面内に収まるようにしてくれています。

読み込んだ画像を縮小してみる

Webなどで画像を使うために実際の画像の大きさを縮小します。

画像>画像の拡大・縮小 をクリック

この画像のは 7257ピクセルです。これを

1000ピクセルに縮小したいので、1000 と入力します。これ以外の高さなどの値は自動的に計算されて対応する数字に変わります。

拡大縮小 をクリック

やたら小さく表示されてしまいましたが、これは先ほどまで画像が大きかったので表示倍率が12.5%だったからです

表示倍率を100%にしてみると、

このようにちょうどいい感じに表示されました。

縮小した画像を保存する

元の画像は取っておきたいので、今縮小した画像を別名で保存します。GIMPの保存形式は通常、.xcfファイルとなります。今回の場合は単にjpg画像を縮小してjpgとして保存したいので、

ファイル>名前をつけてエクスポート をクリックします。.xcf以外の形式で保存するときは エクスポート を行うということになります。

名前 のところに任意の名前を入力して エクスポート をクリック。
* ファイル形式の選択というところをクリックすればjpgの他、GIFやPNGなど多くの形式が指定できます

オプション画面が表示されるので エクスポート をクリック

これで幅が1000pxに縮められたjpg画像ができます
*これが実際にGIMPで縮小した画像です↓

small_desk

つづき:画像の上に文字をいれて編集する

とりあえず、今回はインストールができて使い始められるところまでができればいいなと思って書きました。これから何回にも分けて使い方を書いていきたいと思います。GIMPはWebで使うバナーを作ったりするときの画像と文字を組み合わせるのにも使いやすかったです。有料の画像ソフトを持っていなくてもこれで十分に画像の編集ができると思います。他にもかなりの便利機能があるのでどんどんブログに書いていきます。

次回は

画像の上に文字を載せたり、編集したり、画像の一部を切り出したりするところまで書こうと思っています(^^)/。

書籍もたくさん出ていて、心強いです。

できるクリエイター GIMP 2.8独習ナビ Windows&Mac OS X対応 (できるクリエイターシリーズ)
ドルバッキーヨウコ オブスキュアインク できるシリーズ編集部
インプレスジャパン
売り上げランキング: 5,357
GIMP2.8 スーパーテクニック教本 (100%ムックシリーズ)
晋遊舎 (2012-08-27)
売り上げランキング: 225,252
はじめてのGIMP2.8 (BASIC MASTER SERIES)
羽石 相
秀和システム
売り上げランキング: 358,243

[Amazon sponsored link] GIMP 関連本
兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

無料の高機能画像編集ソフトGIMP 第2回 画像の上に文字を載せて任意の大きさの画像ファイルを作る

$
0
0

topimage

「無料の画像編集ソフトGIMPは有料ソフトと遜色のない高機能 第1回インストールと画像の読み込み&縮小」で無料の高機能画像編集ソフトGIMPの導入部分あたりについて書きました。機能がたくさんあるので複数回に分けて書こうと思っていますが、今回はその第2回です。
Webサイトを作るときにトップページの画像やバナーなどを自分で作ることがあると思いますが、そんなときにもGIMPは役に立ちます。ということで今回はGIMPで画像の上に文字を載せて編集し、任意の大きさの画像ファイルを作る方法について書きます。

画像の上にフォント・色・大きさを指定して文字を載せる

画像の上に文字を載せてみます。

まず、前回の

最近WordPressの相談を受けることが多くなりました。画像を制作するときに無料で使えるソフトを試していましたが、フリー画像ソフトのGIMPはなぜか使っていませんでした。とい

画像を読み込んで縮小しました。その画像に文字を載せてみたいと思います。

フリー素材の画像を読み込んで、幅を1000pxに縮めました。

文字を載せる前に画像を全部表示したいので

右側のウィンドウを X をクリックして閉じておきます。

画像が全部見えるようになりました。

文字を入力する A というボタンをクリックし、

Aa というところをクリックすると、

フォントを選ぶことができるので

好きなフォントを選びます

文字を入力したいあたりでクリックして、

文字を入力します。

文字の大きさを変えるには、文字を全部選択してから、

フォントサイズを変更します。

色を変更するには、文字を全部選択してから

カラーパレットをクリック

カラーパレットで好きな色を選んで OK をクリック

文字の色が変わりました。

文字を移動する

一回作った文字を移動できないというフリーソフトもあるのですが、GIMPはそんなことはなく移動することができます。

移動をするには

十字のような移動するためのマークをクリック

文字の上でクリック。このとき背景ではなく文字の色があるところをクリックするようにします。文字の色がないところをクリックすると背景が選ばれてしまうためです。

クリックしたまま、移動します。

一度決定したフォントを変更する

最初に決めたフォントではなく、やはり別のフォントにしたいときも後から修正が可能です。

文字をすべて選択して



フォントを指定
します



游明朝
に変更できました。

単純でないデータはxcf画像形式で保存しておく

前回は単純にjpg画像の大きさを変更しただけでしたので、エクスポートでjpg画像として保存しました。

今回のように文字をいれたりした画像は後でも変更が可能なように、GIMPのオリジナル書式であるxcf画像形式で保存をしておきます。

xcf画像形式で保存するには

ファイル>名前をつけて保存 をクリック

名前のところに任意の名前を入力して 保存 をクリックします。

これで後からでも文字などを修正することができます。

任意の範囲を切り取って別ファイルで保存する

今作った画像の上に文字が載ったものの一部を切り取って別ファイルとして保存したいと思います。

矩形選択 をクリック

保存したい範囲を選択します

編集>可視部分のコピー をクリック

ファイル>画像の生成>クリップボードから をクリック

新しいウィンドウが開いて、コピーした部分だけの画像が表示されます。

この状態は文字と画像が一体となっているため、このファイルはエクスポートでjpgなどの形式で保存したいと思います。

ファイル>エクスポート をクリック

名前のところに任意の名前を入力して エクスポート をクリック

ポップアップが表示されるので エクスポート をクリック

これで切り取った画像だけのファイルができあがりました。

topimage

つづき:便利なフィルター機能や、画像の背景を消す方法、その他便利機能

今回は画像の上に文字を載せて編集することについて書きました。機能がまだたくさんあるので、次回書くときは便利なフィルター機能や、画像の背景を消す方法、その他の便利機能などについて書いていきたいと思っています。

GIMPに関する書籍です。

できるクリエイター GIMP 2.8独習ナビ Windows&Mac OS X対応 (できるクリエイターシリーズ)
ドルバッキーヨウコ オブスキュアインク できるシリーズ編集部
インプレスジャパン
売り上げランキング: 5,357
GIMP2.8 スーパーテクニック教本 (100%ムックシリーズ)
晋遊舎 (2012-08-27)
売り上げランキング: 225,252
はじめてのGIMP2.8 (BASIC MASTER SERIES)
羽石 相
秀和システム
売り上げランキング: 358,243

[Amazon sponsored link] GIMP 関連本
兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

無料の高機能画像編集ソフトGIMP 第3回 写真を使ったバナー フィルタ-&文字の縁取りをする

$
0
0

gimpfuchi

無料の高機能画像編集ソフトGIMP について第1回、第2回とブログに書いてきました。第3回の今日は写真を使ったバナーを作りました。
GIMPのフィルター機能を使って写真を加工して、その上に載せた文字に縁取りをする方法について書きます!

バナーのサイズとバナーに使う写真について

今回作るバナーのサイズは 横:336px × 縦:280px(レクタングル大) の大きさのものを作ろうと思います。

いつもはフリー素材の写真でバナーを作ったりしますが、今回作るバナーはかなり本格的なものを作りたかったので有料素材サイト Fotolia で写真を選びました。

Fotolia

Fotoliaは有料なだけあってフリー素材写真集ではなかなか見つからないような写真も多数見つかるので、いざというときはこちらの写真を利用させていただいています。

こちらの画像を使いました。なるべく節約したかったので XS サイズにしました

GIMPで写真を読み込んでバナーのサイズにする

GIMPでダウンロードした写真を読み込みます。

このように表示されました。これを作るバナーのサイズに変更したいと思います。

画像>キャンバスサイズの変更 をクリック

このような画面がポップアップします。

キャンバスサイズに今回作りたいバナーの大きさをピクセル数で入力します

入力したサイズの枠が表示されるので

写真の中で切り取りたい部分に枠を移動します。



サイズ変更
をクリックすると

指定したサイズに変更されました。

写真の読み込みや縮小方法は

最近WordPressの相談を受けることが多くなりました。画像を制作するときに無料で使えるソフトを試していましたが、フリー画像ソフトのGIMPはなぜか使っていませんでした。とい

こちらを参照してください

写真にフィルターをかける

写真がこのままだとなんとなく印象が強すぎるので、フィルターをかけてみたいと思います

その前に、今変更した状態を保存しておきます。

ファイル>保存 をクリック

任意の名前.xcf という名前にして 保存 をクリック

フィルターをかけます

フィルター>芸術的効果>キャンバス地 をクリック

写真がキャンバス地に印刷したもののようになりました。

フィルターはとてもたくさんありますので色々試して、自分のイメージにあったものを使います。

文字を入力して、目立つように文字に縁取りをつける

写真の上に

文字を入力します。

文字の入力方法は

「無料の画像編集ソフトGIMPは有料ソフトと遜色のない高機能 第1回インストールと画像の読み込み&縮小」で無料の高機能画像編集ソフトGIMPの導入部分あたりについて書きました。

こちらを参照してください

GIMPでの文字の縁取り方法については検索して

GIMP2.8でテキストに縁取りをつけてみよう

こちらのサイトを参考にさせていただきました。ありがとうございます(^^)/

文字の縁取りをします。

文字のレイヤーの上で



右クリック
して 不透明部分を選択範囲に をクリック

こんな感じの表示に変わります。

この状態で 選択範囲の拡大 をクリック

選択範囲の拡大量 を 3 にして OK をクリック

こんな感じに変わります。



レイヤー>新しいレイヤーの追加
 をクリック

任意のレイヤー名(この場合は 文字ふち)を入力して、OK をクリック

レイヤーが追加されました。今追加したレイヤーを



文字のレイヤーより下
に持って行きます。

今現在の色指定は描画色が赤、背景色が白となっています。この状態で、編集>背景色で塗りつぶす をクリック

赤い文字の周りに白の縁取りができました!

同じ方法でもう1行青色の文字に白の縁取りをつけました。

できあがったバナーをエクスポートする

これで完成したのでまず .xcf ファイルを保存します。

ファイル>保存 をクリック

次に、Webなどで使える画像形式にエクスポートします。



ファイル>エクスポート
をクリック

Webで表示できる画像形式(jpgかPNGがいいと思います)の名称をつけて エクスポート をクリック

これでバナーが完成しました。
↓こちらになります。

tel042banner

* 余談ですがこの でんわ042スマホ は ゆうそうと で近日提供開始予定です!ご興味のある方はこちらからご連絡ください(^^)/

おまけ:ツールが表示されないときの表示の仕方

以前やったときは文字をクリックしたときに

フォントなどを指定する部分が下部に表示されていたのですが、今回やったところそれが表示されていませんでした。

そんなときは

ウィンドウ>ドッキング可能なダイアログ>ツールオプション をクリックすると

このようにフォント種類や大きさを選べるオプションが表示されました。

レイヤーも表示されていなければ、

img_57ec7a0f75b7e

ウィンドウ>最近閉じたドック>レイヤー… をクリックするか

ウィンドウ>ドッキング可能なダイアログ>レイヤー をクリックすると

表示されます。

つづき:画像の背景を消す方法、その他便利機能

今回は写真を使ったバナー フィルタ-&文字の縁取りをすることについて書きました。書きたいなと思ったことがだいぶ書いたのですがあとは「写真の背景を消す方法」と「便利機能」について書きたいなと思っています。

GIMPに関する書籍です。

できるクリエイター GIMP 2.8独習ナビ Windows&Mac OS X対応 (できるクリエイターシリーズ)
ドルバッキーヨウコ オブスキュアインク できるシリーズ編集部
インプレスジャパン
売り上げランキング: 5,357
GIMP2.8 スーパーテクニック教本 (100%ムックシリーズ)
晋遊舎 (2012-08-27)
売り上げランキング: 225,252
はじめてのGIMP2.8 (BASIC MASTER SERIES)
羽石 相
秀和システム
売り上げランキング: 358,243

[Amazon sponsored link] GIMP 関連本
兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

WebサイトをPCとスマートフォン/タブレットの同時表示ができるブラウザ Blisk。導入も簡単!

$
0
0

ブログで読んだり、勉強会で「これ、いいよ!」とオススメされて気になっていたブラウザーがあります。Blisk(ブリスク)という名前のブラウザです。
聞いてはいたものの、試してはいなかったのですが試してみたところとっても簡単に導入できました。
そんなWebサイトをPCとスマートフォン、タブレットの表示確認ができるBliskについて書いてみます。

Bliskのダウンロードとインストール

BliskのWebサイトはこちらになります。

Blisk

このページの

DOWNLOAD BLISK

とうボタンをクリックします

Mac版Windows版が現在公開中です。Windows版をダウンロードします。

ダウンロードされたインストーラーダブルクリックすると

chromeかな?と思ったのですが、どうもすでにBliskのブラウザが開いて使い方を説明してくれているようです。

NEXT をクリック

次のページも説明なので下にある

NEXT をクリック

3ページ目で説明は終わるようで



FINISH
をクリック。すると、

こんな感じでブックマークをインポートできるようですので Import bookmark now をクリックしてみます

なぜか私が普段使っているchromeがありませんでした。おそらくブックマークを Bookmarks HTML File にすればインポートできそうですが、後でもできると思うのでここではこのままCancelをクリックして終了しておきました。

ダウンロードしたexeをダブルクリックしただけですぐにインストールが完了した感じです。とても手軽でした。

BliskでスマートフォンとWebサイトを同時に表示してみる

BliskのURL欄にURLを入力してWebサイトを表示してみます。

一番左に、現在選択中のデバイス(この場合はiPhone6)、真ん中にスマホ/タブレット表示、右にPCでの表示となりました。

スマホ表示とPCでの表示を同時に見ることができるのはとても便利ですね(^^)/

単純に画面の幅を狭めているのではなくて、おそらくユーザーエージェントを切り替えているので、seesaaブログのように

iPhone+iPad FAN (^_^)v

レスポンシブでない対応方法(PC用とスマホ用でデザインが全然違う)で表示しているWebサイトの表示確認をするのにはさらに便利だと思いました(^^)/

デバイスの種類のところにあるこのマークをクリックすると

デバイスの種類の表示が隠れるので広い画面で確認することができます。赤矢印の部分をクリックすれば再度、デバイスの種類を表示することができます。

横向き表示やタブレット表示もできる

ブラウザの上部にある

このマークをクリックすると

横向きにした時の表示を確認することができます。

デバイスの種類から iPad mini を選んで

こんな風にタブレットでどのように表示されるかも確認できます。

縦にするとこんな感じです。

どちらをクリックしても表示が同期して変更される

スマホ用の表示でもPC用の表示でも

リンクをクリックすると

クリックしたPC用の表示だけでなく、スマホ用の表示も更新されます。

スマホの上でクリックしたときも

このようにスマホとPCの表示が更新されます。

まとめ:Webサイトを作っているときはBliskで表示確認すると安心です

Webサイトを作っているときはなかなか複数のデバイスでの表示確認ができませんが、Bliskなら簡単に多数のデバイスでの表示確認ができるので安心です。

上部にあるこのスマホマークをクリックすると、

通常のPC用の表示のみにもすることができるので、普段使うブラウザとしてBliskを選ぶという可能性もあると思います(^^)/

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

無料の高機能画像編集ソフトGIMP 第4回 写真の背景を切り抜く方法

$
0
0

無料の高機能画像編集ソフトGIMP について第1回第2回第3回とブログに書いてきました。第4回の今日はGIMPを使って、写真の背景を切り抜く方法について書きます!

GIMPで写真の背景を切り抜くときに便利な前景抽出選択のマニュアル

GIMPで写真の背景を切り抜く方法を検索していたら、GIMPのマニュアルページを見つけました

前景抽出選択

このほかにもマニュアルページのトップページを見ると


たぶんすべての機能について解説されているようなので、GIMPを使う際はこちらをブックマークしておきたいと思います(^^)/

背景を切り取りたい画像を適当な大きさに縮小する

背景を切り取りたい画像を読み込みます

この画像は新幹線名物のカッチカチに凍っているバニラアイスです(^_^;。この背景を切り取りたいと思いました。写真の大きさは1772×1772ピクセルと大きいので背景を切り取る前に縮小します。

縮小方法については、

最近WordPressの相談を受けることが多くなりました。画像を制作するときに無料で使えるソフトを試していましたが、フリー画像ソフトのGIMPはなぜか使っていませんでした。とい

で書いてありますので参照ください。

600×600ピクセルに縮小しました。

前景抽出選択を使って背景を切り抜く


前景抽出選択
を使って背景を切り抜いていきます。

前景抽出選択をクリック

カーソルが投げ縄マークに変わります。

s-ws000007

この投げ縄で残したい前景(この場合はアイス)を囲んでいきます。

s-ws000011

最初の位置にくっつけます。マウスを離すと

このように選択しなかった部分が青くなります。また、カーソルの形が投げ縄からブラシで描画に変わります。

ここからは、切り抜いた部分で残したい色の部分をなぞっていきます。

s-ws000015

一筆書きのように

s-ws000019

だいたいなぞったらカーソルを離します。すると

こんな感じに残る部分は写真のまま残ります。残したい部分で青くなっている部分は、追加で

s-ws000023

s-ws000031

なぞっていきます。するとなぞった部分が残る画像になっていきます。細かい部分は画像を拡大して確認します。

残したい部分が青くなくなるまでなぞったら、リターンキーを押します。すると、

s-ws000047

前景が選択
されます。

s-ws000049

ファイル>切り取り をクリック

s-ws000050

選択部分が切り取られました。

切り抜いた画像を新しい画像として生成して、ゴミを消す

切り抜いた画像を新しい画像として生成してゴミを消していきます。

s-ws000052

ファイル>画像の生成>クリップボードから をクリック

s-ws000057

切り抜いた部分だけの画像が貼り付けられました。

s-ws000058

まだ切り抜きたくない部分も残っているので、これを消していきます。

s-ws000059

消しゴムをクリック。

s-ws000063

消したい部分で消しゴムをクリックしていき、

s-ws000098

こんな感じに消していきます。まとまって大きな部分があったら、

ファジー選択 をクリックして、

まとめて選択して、

DELETEキーをクリックして、消すこともできます。ファジー選択の時、

ツールオプション の しきい値 を上げたり下げたりすることで、類似色の選択範囲を広げたり狭めたりすることができます。

jpgで保存する

切り取った前景をjpg形式で保存します。

s-ws000110

ファイル>エクスポート をクリック

s-ws000112

名前をつけて

s-ws000113

エクスポート をクリック。ファイルが保存できました。

切り抜いた画像はこちらです↓

%e3%82%a2%e3%82%a4%e3%82%b9

新幹線の座席が紺色だったのでにちょっと色が残ってしまってますが(^_^;、

%e3%82%a2%e3%82%a4%e3%82%b92

背景に色をつけるとアイスだけのすっきりとした画像として使えると思います!

まとめ:GIMPを使えばWebで使う画像の加工はすべてできると思います!

4回に分けてGIMPを使ってWebで使う画像を使うにはどうすればいい?ということについて書いてきました。

最近WordPressの相談を受けることが多くなりました。画像を制作するときに無料で使えるソフトを試していましたが、フリー画像ソフトのGIMPはなぜか使っていませんでした。とい
「無料の画像編集ソフトGIMPは有料ソフトと遜色のない高機能 第1回インストールと画像の読み込み&縮小」で無料の高機能画像編集ソフトGIMPの導入部分あたりについて書きました。
無料の高機能画像編集ソフトGIMP について第1回、第2回とブログに書いてきました。第3回の今日は写真を使ったバナーを作りました。 GIMPのフィルター機能を使って写真を加工し
無料の高機能画像編集ソフトGIMP について第1回、第2回、第3回とブログに書いてきました。第4回の今日はGIMPを使って、写真の背景を切り抜く方法について書きます!

GIMPを使えばWebで利用したい画像の加工はすべてできると思います!これ、という画像ソフトがないなと思っている方はぜひ試してみてください(^^)/

GIMPに関する書籍です。

できるクリエイター GIMP 2.8独習ナビ Windows&Mac OS X対応 (できるクリエイターシリーズ)
ドルバッキーヨウコ オブスキュアインク できるシリーズ編集部
インプレスジャパン
売り上げランキング: 5,357
GIMP2.8 スーパーテクニック教本 (100%ムックシリーズ)
晋遊舎 (2012-08-27)
売り上げランキング: 225,252
はじめてのGIMP2.8 (BASIC MASTER SERIES)
羽石 相
秀和システム
売り上げランキング: 358,243

[Amazon sponsored link] GIMP 関連本
兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

スラッグを日本語にしたいのに、書き換わらない!?Simplicityのカスタマイズでの設定方法

$
0
0

サイト移転の時、新しいWebサイトでも以前と同じURLで表示できるようにしておくと今までのGoogleでの検索結果から新しいWebサイトのページにもリンクするようになります。最近のお客様で、このようにしようと思ってスラッグを更新したのですが、何度更新しても入力したものとはスラッグが元にもどってしまう、という事例がありました。
その原因と対策について書きます。

スラッグを入力して更新しても別の名称になってしまう状況

スラッグを入力して更新してもなぜか元に戻ってしまう、という状況をくわしく聞いてみました。

まず、パーマリンクを確認します。

ダッシュボード 設定>パーマリンク設定 をクリック

パーマリンク構造投稿名 になっています。ということは固定ページのURLは http://サイトのURL/固定ページのタイトル になるはずです。

固定ページの編集画面を見ると、

URLは http://サイトのURL/page-2095 のような形になっていました。スラッグは、

このようになっていました。???と思いつつこのスラッグ

スケジュール として、

更新 をクリックしますが、更新されて再表示されると

元の page-2095 に戻ってしまっていました。「あれー???なんでーー???」と思ったのですが、これには理由がありました。

Simplicityは固定ページの日本語名URLを自動的に英語表記に変える仕組みがある

検索してこちらのページを見つけました。

Simplicityで日本語スラッグを使用したい場合の設定方法

なるほど、たしかにこちらのサイトのテーマはSimplicityを使っています。

Simplicityでは

以前のバージョンでは、スラッグを日本語表記にしても自動的に英語表記に変わるようになっていました。

と言うことになっているようです。以前のバージョンでは、と書いてありますがこれは以降に書いてあったのですが、「現在のバージョンでは日本語スラッグを設定によって使用できるようになったと」いうことのようです。

さっそくその設定をしてみます。

ダッシュボード 外観>カスタマイズ をクリック



その他
をクリック

下の方にある、日本語のスラッグを有効にする にチェックを入れる

上部にある、保存して公開 をクリック

これでOKです。

先ほどの固定ページの編集画面で

スラッグ

スケジュール として、

更新 をクリックすると

URLは http://サイトのURL/スケジュール となっていました(^^)/

複数ページのスラッグを変更するときはクイック編集で!

これで移転前のWebサイトのURLと合わせることができますね!もしも既にたくさんのページを作ってしまっていて、 複数ページのスラッグを変更するときはクイック編集が楽なのでオススメします。

方法は

ダッシュボード 固定ページ>固定ページ一覧 をクリック

修正したいページの下にある クイック編集 をクリック

このように部分的に編集ができるようになるので

スラッグタイトル をコピーペーストして、更新 をクリック

これでスラッグの更新ができますので、複数ページのスラッグをいっぺんに変えたいときはこの方法をオススメします(^^)/

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

Zopim Live Chat 無料版でWebサイトにチャットサービスを追加してみた

$
0
0

Webサイトを見ていて不明なことがあるときに、メールで問い合わせるのはいつ返事があるかわからないし、かといって電話をするのはちょっとおっくうだな、と思うときWebサイトにチャットでのお問い合わせがあれば迷わずチャットを使います。自分的にはチャットでなにかを問い合わせるのが一番気軽だからです。
今度新しいサービスを開始する予定なので、そのWebサイトにもチャットサービスをつけたいなと思ってチャットができるサービス、Zopim Live Chatの無料版を試してみました!

WordPressのプラグインZopim Live Chatのインストール

Zopim Live ChatはWordPress以外でもコードを記述すればどこにでもつけられるサービスのようです。実際のWebサイトはWordPressで作成するので、まずWordPressのプラグインをインストールしました。

ダッシュボード プラグイン>新規追加 をクリック

Zopim Live Chat と入力します。すると、

このプラグインが見つかるので 今すぐインストール をクリック

ボタンが有効化に変わるので有効化をクリック

Zopim Live Chatにアカウントを作成する

インストールが終了すると

ダッシュボードに Zopim Chat というメニューが追加されますのでクリックします

このような画面になります

画面の下にある Sign up now. をクリック

入力欄が表示されるので

このサービスで使いたい名前とメールアドレスを入力し、利用規約…同意します にチェックをつけて 無料アカウントに登録 をクリック

OK をクリック

届いたメールを開いて

Verify Your Email をクリック

追加の入力欄が表示されます

入力をしてから SAVE AND GO TO DASHBOARD をクリック

説明画面が3ページありますので > をクリックして進めて

3ページ目で Next をクリック

Fill in your details という項目を入力して Next をクリック

HTMLに埋め込む場合のコードが表示されます

Go to Visitor List をクリック

Zopimのダッシュボードになります。

WordPressのダッシュボードに戻って

今、zopimで登録したメールアドレスとパスワード を入力して Link Up をクリック

この画面に移動したらOKです。WordPressのこの画面からも Launch Dashboard をクリックすればZopimのダッシュボードに移動することができます。

Webサイトにチャットが追加された!

これだけでWebサイトを見ると

Webサイトの右下にチャットウィンドウが追加されました(^^)/

こんにちは。質問があるのですが、 と入力してリターンすると

デスクトップ通知と音「オッオー」が出て、他の作業をしていてもチャットで話しかけられたことが分かるようになっています。

管理者側からチャットに返事をするにはZopimのダッシュボードから行います。先ほどのデスクトップ通知をクリックするか、ダッシュボードの

一番下にある Serve 1 Request をクリック

こんな感じで質問が表示されます

下の入力欄に入力してリターンすると

Webサイトのチャット画面に返事が表示されます。こんな感じで会話を続けることができます。

チャットを終えるには、オプション をクリックして

このチャットを終了 をクリック

確認が出るので 終了 をクリックします

最後に評価するフォームが表示されます(設定で表示しないようにもできます)。スキップ をクリックすると

チャット欄の一番最後に チャットを終了しました と表示されます。

ダッシュボードの設定を日本語に変更する

ダッシュボードの設定を日本語にするとよりわかりやすいので変更しておきます。

右上の人の絵をクリックして、アカウント名をクリック

Preferences Dashboard Language というところが未指定なので

日本語 を選んで

Save Changes をクリック。これでダッシュボードが日本語で表示されます。

チャットにすぐに答えられないときのメッセージを日本語に変更する

チャットにすぐに答えずに放置しておくと

このように英語で離席中です、のようなメッセージが出ます。このメッセージだとわかりにくいので書き換えたいと思います。



設定>トリガ
をクリック

このような表示になるので



トリガを作成
をクリック

Chat Rescuer をクリック

画面下の方にある 訪問者にメッセージを送る の2つめのテキストエリアがメッセージのようですのでこれを

好きなメッセージに置き換えて、変更を保存 をクリックします。

これですぐに返事ができないときは

このようにメッセージが先ほど指定した、日本語のメッセージに変わりました。

スマホではどんな感じかBliskで見てみる

スマートフォンでもこのZopimは使えるようなのでどんな感じになるのかをBliskで見てみました。

こんな感じに左にiPhone、右にPCで表示されています。iPhoneの チャット をクリックすると

全画面でチャット画面が表示されました

iPhoneでもPCと同じようにチャットできるようです。

名前、メールアドレス、質問の入力を要求することもできる

ダッシュボード 設定>ウィジェット をクリックして

フォームをクリックすると

プリチャットフォーム という項目があり、IDが必要、質問が必要 にチェックを入れて 変更を保存 をクリックすると

このようにSNSでログインするか、名前とメールアドレスの入力を求められます。また質問をあらかじめ入力する欄が表示されるようになります。

まとめ:最初の14日間はプレミアム機能がすべて使えている状態

無料で使い続けることのできるZopim Live Chatですが、登録後14日間プレミアム機能がすべて使えている状態です。

有料プランについては、

https://zopimjp.com/plan/

こちらに書いてありました。

今回カスタマイズした チャットにすぐに答えられないときのメッセージを日本語に変更する トリガー機能なので無料版では利用できないようです。

ということは、長いこと返事ができないときに放置することになるのかな(^_^;?と思いますがその辺はとりあえず、どこかに「長い間お返事できないときは取り込んでおりますので、ご連絡先に後ほどお返事させていただきます」かなにかを書いておけばいいのかな~と思います(できるかどうかはまだ試していません)。

月々3,780円は結構な金額ではあるので1人で対応する場合はかなり躊躇してしまいますがすべての機能が使えている今の状態は快適なので、14日が過ぎて機能がどのぐらい減るかというのを見て、有償のプラン利用も検討したいと思いました!

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

Googleドキュメントはパソコンで音声入力ができるんです。PPAPも試しました。

$
0
0

先日、Webコンテンツをたくさん書くときにどんな工夫をしているかという勉強会で「Googleドキュメントの音声入力は結構便利」というお話を聞きました。
iPhoneだったら音声入力がついているのは知っていましたが、PC版のGoogleドキュメントでも音声入力ができると言うことは知らなかったので試してみました!

Googleドキュメントで音声入力の準備をする

Googleドキュメントはどのブラウザでも利用することができますが、音声入力に対応しているのはブラウザのChromeだけのようです。

ChromeでGoogleドライブ

Googleドキュメントを開いて

新しいドキュメントを作成 をクリック

新しいドキュメントの

ツール>音声入力をクリック
(このあと最初の1回だけ、マイクの利用を確認する画面が出ますのでOKします)

このマイクをクリックすると

マイクがくなり、音声入力状態になります。

Googleドキュメントで音声入力をしてみる

音声入力をしてみました↓

googlevoice

わりと認識力が高く、びっくりしました!GIFアニメだとゆっくりに見えますが、普通のスピードで読み上げているのにちゃんと変換してくれます。

もっと長文に挑戦してみました。

読むものがないので ゆうそうと のWebサイトを読んでみました。

長文の中には句読点、改行や記号があるのですがそれらは音声では入力できないようなのでその部分はキーボードで対応しました。

だいたい1回で入力できるのは1,2行でそれ以上進もうとするとマイクの入力が止まってしまうようでした。設定などで改善できるのかもしれないんですが。

い部分が思うように変換できなかった部分です。

・ゆうそうと というところが 輸送と 郵送と
・8Beat が it beat
・RYUS blog が 竜宮ブログ

固有名詞でかつ有名でない(^_^;、とか 8Beat の場合はまぁこれは英語だし仕方ないかなぁと

い部分が、おや?と思った部分です

・とーいっくきゅうひゃくはちじゅうごてん Toeic985点

おぉ…と思いました。とーいっく=Toeic にちゃんと変換してくれました。

・2回目のえいとびーと 8beat

最初に言ったときの方の発音が悪かったのかも?

・facebook youtube

このあたりの有名な固有名詞はちゃんと英語にしてくれるようです。

言語を指定できるので、英語で今話題のPPAPを入力してみた

この音声入力は言語を指定できるので自分の英語力を試してみたいと思いました。なにがいいかなぁ~と思ったときに、今流行の PPAP(Pen-Pinapple-Apple-Pen) をやってみようと思いました。

まず、マイクの言語を

English(United Kingdom)にしてみました。単にEnglishというだけでなくいろいろななまりで指定できるんですね(^_^;。とりあえず中学の時は英国英語だったらしい、ということでこれを選びました。

音声入力した結果です↓

あいはぶあぺーん と同じように歌ってみたら pain になってしまいましたが他はなかなか聞き取ってもらえていました。

言語はとてもたくさんあるので、いろんな言語をしゃべれる人は実力を測るのに使うと面白そうですね!

しかし…今日はちょっと窓を開けていた状態で音声入力のテストをしていたので、ちょっと気恥ずかしかったです(^_^;

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

WordPressのプラグインアップデートでエラーが起きたときの調査と対処方法

$
0
0

今朝のことですが、プラグインをアップデートしてから記事を書こうとしたら投稿画面が表示されずにいわゆる「真っ白画面」になってしまいました。
WordPressのプラグインアップデートはほぼ問題が起こったことがないのですが、前回のWordPressもくもく会でプラグインのアップデート自体で問題が起こったりもしていたので、今回はそういうときの調査方法や対処方法について書いてみたいと思います。

新規投稿をしようとしたら画面が真っ白になってしまった状況

WordPressの新規投稿をしようとしたら画面が真っ白でした。何も表示されませんし、ソースも表示されません。

ダッシュボードに入ろうと思ってもやはり何をクリックしてもすべてが真っ白です。

幸いなことにブログの表示は問題ないことを確認してちょっと安心しながら原因を調査しました。こういうとき、問題が起こる直前に何をしたか(あるいは何もしていないか)を明確にする必要があります。

今回直前に行った行動は「ログインして、プラグインのアップデートが2つあったのでアップデートをした」ということです。ということはこの行為が今の状況を招いたことにほぼ間違いがないだろうなと思いました。

アップデートしたプラグインは AMP と Search Meter です。

問題が起こったときの調査方法

問題が起こったとき、だいたいの場合は他にも同じことが起こってしまっている人がいます。自分が何かしてしまったのでは?と思いがちですがFTPでファイルを消しちゃったりしない限りは他からの要素で問題が起こることの方が圧倒的に多いからです。

Twitterで調べてみる

影響が大規模の場合はTwitterで検索をかけると同様の人がかならずつぶやいています。

例としては以前WordPress本体のアップデートで文字コードが変更されたときにエラーが起こってしまったときがあり、そのときは多くの人がつぶやいていました。

またTwitterで多くの人がつぶやいている場合は問題解決の方法を誰かが書いている可能性が高いですし、WordPress本体のように多くの人に影響がある問題となればすぐに改訂版が発表されることになります。ですのでまぁそういうときは問題解決方法を見て対処するか、次回のアップデートを待てばいいと思います。

Googleの検索でも結果は見ることができますが「今すぐ今起こっている問題を検索したい」というときはTwitterが一番早く調べることができます。

今回の場合ですが WordPress プラグイン でTwitter検索しても問題が起こっている、というTweetは見つかりませんでした。ということはそれほど大規模な問題ではなく、やはりプラグインのアップデートをした人だけに影響が出ている問題なのだろうと思いました。

Twitterでの検索はWordPressなどだけでなく、「サーバーのせいでWebサイトが落ちている」とか(レンタルサーバー名で検索)、「ネットにつながらない」とか(ocnなど通信会社名で検索)のときも調べるのに有効な方法です。

エラーログを取るようにして、実際のエラーが起こっている箇所を特定する

実際にはどこでエラーが起きているのか?ということを見てみたかったので検索してこのページを見つけました。

WordPressでダッシュボードにつなげようとしたら真っ白になった状態を復旧

私の場合とほぼ同じ状況が起こっていたようです。ログの取り方が書いてあったので、サーバーのwp-config.phpをダウンロードして

define('WP_DEBUG', false);

となっている箇所を

define('WP_DEBUG', true);
if(WP_DEBUG){
    define('WP_DEBUG_LOG', true);
    define('WP_DEBUG_DISPLAY', false);
}

と置き換えます。そして再度 新規投稿 をしようとして真っ白の状況を再現してみます。

サーバーのwp-contentdebug.logというファイルができたので、ダウンロードして中身を見ると

[12-Oct-2016 00:05:22] PHP Parse error:  syntax error, unexpected '[' in /xxxx/xxxxxxx/xxxxxxxxx/wp-content/plugins/search-meter/admin.php on line 665

というエラーが出ていました。プラグインのsearch meterでやはりエラーが起きていました。

該当行を参照すると、

    $results_array = [[__(‘Date’, ‘search-meter’), __(‘Search terms’, ‘search-meter’), __(‘Searches’, ‘search-meter’), __(‘Results’, ‘search-meter’)]];

という、行でした。この書き方がサーバーのPHPではエラーになる原因のようです。

プラグインではないか?という疑いの時は wordpress.org/plugins/ で調べる

search meterのアップデートで問題が起こって、でもすべての人の問題でもなさそう。PHPのバージョンかな?と思いました。

確認するためにプラグインのサポートページを見てみました。こういう場合は

https://wordpress.org/plugins/

wordpress.orgプラグインの情報を見ます。

search meter で検索をして

名称をクリック

どのプラグインでもサポート用にフォーラムがありますので View support forum をクリック

一番上に、私の状況と同じ方からの投稿を発見しました。

やはりPHPのバージョンの問題ということがはっきりしました。

私の場合、5.2ではありませんでしたが5.6でもありませんでした。

解決方法:レンタルサーバーのPHPバージョンを5.6にする

ということでさっそく、レンタルサーバーのPHPのバージョンを切り替えます。

XSERVER(エックスサーバー)での方法

エックスサーバー
のダッシュボードで

ホームページ PHP Ver.切替 をクリックして

PHP5.3.3 だったPHPのバージョンを

PHP5.6.22 に変更して バージョンを切り替える をクリック

これで 新規投稿 をクリックしたところ、問題なく使えるようになりました(^^)/

それにしても、、、PHPのバージョンはあえて指定していなかったので、以前ドメインを設定したときのデフォルトがPHP5.3.3だったようです。

さくらのレンタルサーバーでの方法

WordPressもくもく会で相談された人はさくらのレンタルサーバ
を使っていましたので、こちらでのPHPバージョンのアップ方法も書いておきます。

コントロールパネルからログイン後 アプリケーションの設定>PHPのバージョン選択 をクリック

こちらも今現在はPHP5.4となっているので

PHP5.6 を選択して 変更 をクリックします。これでPHPのバージョンをアップグレードすることができます。

おまけ:PHPのバージョンアップでエラーが出る可能性もあります

今回のようにPHPの新しいものでしか動作しないコードが書いてあるときは、PHPのバージョンをアップすれば動くようになります。

しかし、その逆にPHPの古いものでしか動作しないコードが書いてあるときは、PHPのバージョンをアップしたことで動かなくなりエラーが出る可能性もあります。

本来的にはプラグイン作者の人が今現在サポート外となっているPHPのバージョンでしか動かない場合は、動くようにメンテナンスしていく必要があるのですが、無償のプラグイン提供者ですので必ずしもそのようにしていけるということも難しいと思います。そのため、まれではありますが新しいPHPにした場合にエラーが起こるプラグインがあるかもしれません。

そういうときのためにも「多くの人が使っている」「実績のある」プラグインを使っておくと、良いかと思います。そういうプラグインならなにかエラーが起きたときに「動かない」と声を上げる人が多くなり、問題解決方法が見つかったり、作者によるメンテナンスが行われる可能性が高くなるからです。

いずれにしても問題が起こったときは落ち着いてTwitterの検索などから調べ始めると問題は解決できることが多いと思います(^^)/

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

商用可、フリーの音源サイトからビジネス動画に使えそうな音を選んでみました

$
0
0

動画を作るということは滅多にないのですが、先日あるビジネスっぽい動画を作る機会がありました。Webサイトなどでは音を使うことはまずないんですが、宣伝用の動画だとやはり音があった方がいいかなと商用可でフリーの音源サイトを探してビジネス動画に使えそうな音源を探してみました。

商用可の音源があるフリー音源サイトを探して

商用可の音源を探していて、

著作権フリー、商用利用可能な無料音楽がダウンロードできるサイトまとめ!動画にも最適

こちらのWebサイトを見つけ、参照させていただきました(^^)/

今回2つのWebサイトを紹介させていただきましたがその他にも、とてもたくさん音源Webサイトの紹介があります。

甘茶の音楽工房

甘茶の音楽工房

このサイトは楽曲が豊富で管理人の甘茶さんが趣味で制作された音楽をフリー素材として配布されています。

【利用について】利用規約

音素材を探す時にとても困るのが「音を聞いてみないとどんな感じのものかよく分からない」ということです。

この 甘茶の音楽工房 さんは イメージから音楽素材を探す という探し方ができて、


明るい おしゃれ ほのぼの 癒し しみじみ 悲しい 暗い シリアス 不気味 怪しい・コミカル 大人な雰囲気 雄大 激しい 疾走感

という曲のイメージから曲を選ぶことができます。ビジネス動画に使う音楽はなんとなく 明るくて ポップ 楽しい雰囲気 のものがいいなと思っていたので、 明るい おしゃれ ほのぼの 怪しい・コミカル あたりの曲を聴いて選んでみました。

雪うさぎのかけっこ

雪うさぎのかけっこ

・雪の上でうさぎがはねるような、楽しくてアップテンポな楽曲
・楽しく遊べそうな場所や人手を使ったサービスに向いている?

動画のBGMに使うとこんな感じです。
*音が出ますのでご注意ください!
*曲は冒頭の部分だけで、全体はもう少し長いものとなっています
*圧縮したせいか途中で音が途切れたり聞こえるかと思いますが、元の音は途切れのないきれいなものです。

エナジー

エナジー

・アップテンポでちょっと都会っぽい?ビジネスシーンにぴったりな感じの曲です。
・IT系の会社や新サービスの宣伝に向いているかと

動画のBGMに使うとこんな感じです。
*音が出ますのでご注意ください!
*曲は冒頭の部分だけで、全体はもう少し長いものとなっています
*圧縮したせいか途中で音が途切れたり聞こえるかと思いますが、元の音は途切れのないきれいなものです。

キャラメル工房

キャラメル工房

おだやかで、明るい、気持ちの良いリズムの曲です
・サロンやサービスの案内などに使うといいのでは?

動画のBGMに使うとこんな感じです。
*音が出ますのでご注意ください!
*曲は冒頭の部分だけで、全体はもう少し長いものとなっています
*圧縮したせいか途中で音が途切れたり聞こえるかと思いますが、元の音は途切れのないきれいなものです。

希望

希望

さわやかな朝、これから先に良いことが起きそう!という雰囲気
・コワーキングスペースやビジネスサロン、スクールなどにどうでしょう?

動画のBGMに使うとこんな感じです。
*音が出ますのでご注意ください!
*曲は冒頭の部分だけで、全体はもう少し長いものとなっています
*圧縮したせいか途中で音が途切れたり聞こえるかと思いますが、元の音は途切れのないきれいなものです。

SHW (エス エイチ ダブリュ)

SHW (エス エイチ ダブリュ)

ダンス系というかアップテンポで力強い、という印象の曲が多い配信サイトです。ストーリー性を感じさせる長い曲もあるのでゲームなどにも使われるのかな?と思います。

【利用について】フリー音楽素材ご利用ガイドライン

こちらでビジネス用にいいなと思ったのは Rao という曲でした。
実際に現在進行中のプロジェクトの宣伝動画で使ってみました。

RaO

動画のBGMに使うとこんな感じです。
*音が出ますのでご注意ください!
*圧縮したせいか途中で音が途切れたり聞こえるかと思いますが、元の音は途切れのないきれいなものです。
*写真は、有料素材サイト Fotolia のものを利用しています

おまけ:無料の音素材楽しいです!

いつもはPCの音を出さないようにしているのでほとんど聞いたことがなかったのですが、音が入っているとつい見てしまうものですね!

また音素材サイトの曲を聴いていると自分でも作りたい!という気持ちが湧いてきます。全くつくったことはないんですが(^_^;、フリーソフトなどでもできそうなのでいつかチャレンジしてみたいです!オススメのソフトとかあったら教えていただけるとうれしいです♪

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

遠隔操作ができるソフトTeamViewerを使って、iPhoneからPCを操作してみる

$
0
0

TeamViewerはPC間やPCとスマートフォンの間で画面を共有して操作ができるソフトウェアです。商用でない個人の利用なら無料で使うことができます。
ITの個別指導をしていると遠隔でPCの画面を共有して操作もできるとわかりやすいのに、と思ったのでまずはTeamViewerをインストールしてiPhoneから操作することから試してみようと思いました。

PCにTeamViewerをインストールする

TeamViewer

TeamViewerのトップページで

ダウンロード>TeamViewer をクリック

Windows、Mac、Linux、Chrome OS、Android、IOS に対応しているようです。Windowsタブがクリックされた状態で TeamViewerをダウンロード をクリック

TeamViewer_Setup_ja-jib.exe

というファイルがダウンロードされるのでダブルクリックして

個人/商用以外 にチェックをしてから  同意する – 終了 をクリック

インストールが始まり、終了すると

説明が表示されます。大きく分けて リモートコントロール

会議 という機能があるようです。この説明画面を閉じると

このようにTeamViewerが立ち上がった状態になります。赤枠の使用中のIDは利用者のIDとなり、ずっと同じIDを使うことになります。青枠のパスワードTeamViewerを立ち上げ直すときに毎回異なるパスワードになります。

PCのTeamViewerのインストールは終了です。

iPhoneにTeamViewer: Remote Controlアプリを入れる

iPhone側からPCをコントロールできるアプリをインストールします。

teamviewer
で検索するといくつかアプリが出てきますが、

赤枠で囲った TeamViewer: Remote Control の 入手 をタップします。ちなみに青枠の方は逆にPCからiPhoneをコントロールするときに使うアプリです。

操作に関する説明が4ページ表示されます。これが終了すると

この画面になり、パートナーのIDを入力することになります。ここでいうパートナーとは遠隔操作したいPCですので、先ほどの

赤枠の使用中のIDを入力します。数字は続けて入力します。入力後 リモートコントロール をタップ

s-img_1865

パスワードを入力する画面になるので、PC画面に表示されているパスワードを入力します。

操作説明が表示されて、続行 をタップすると

iPhoneの画面にPCのデスクトップが表示されました(^^)/。

それと同時にPCの方では

このように壁紙が黒くなり、右下にTeamViewerの表示が出て、外部から接続されているという状態が分かるようになります。

iPhoneからPCを操作する

iPhoneからPCを操作してみます。デスクトップにある

文書の上にカーソルを移動(指で動きます)して、ダブルタップすると

文書が開きました。

新規文書を作成して

iPhoneのフリップ入力で文章を入れることもできました。

文書に名前をつけて保存

保存されました。

画面を横にすれば、

もっとPCに近い感じで表示することもできます。

iPhoneからの操作は直感的で特に迷うことなく使えました。

セキュリティは大丈夫なの?

今回試した中で少し心配かな?と思ったのはセキュリティに関してでした。利用者のIDは変わらないため毎回変わるとは言え数字4桁のパスワードだと論理的に10000回、試みれば突破することが可能です。

しかし、そのパスワードも実は変えられることが分かりました。

PCのTeamViewerを立ち上げた時に表示される コンピュータ&パートナー の画面から 登録 をクリックして表示される画面で登録を完了させます。するとパスワードが数字4桁から英数6桁に変更されていました。

パスワードが変わると知らずにこの操作をしていたので、もしやオプションでできるのでは?と探したところ

その他>オプション

セキュリティ > ランダムパスワード(簡単なアクセス用) というところの パスワードのセキュリティレベル から色々なセキュリティレベルのパスワードを選ぶことができるようです。ここで数字4桁以外の安全なレベルのパスワードにすればセキュリティに関しては大丈夫なのかなと思いました(^^)/

iPhoneからPCを操作するのは、PCが立ち上がっていてかつTeamViewerが起動しているときしか行えません。設定によってはできるようになるのかもしれませんがデフォルトではこの状態なので知らぬうちにiPhoneから操作されるということはないと思われます。

iPhoneからPCを操作する、の使い道

PCは立ち上がっていないといけないしTeamViewerが立ち上がっていてそのときのパスワードも知らないといけない状態ではどういう使い道があるのかな?と考えてみました。

家や会社にパソコンがあり、自分は遠隔地にいる。そして家や会社に信頼できる人がいるときにPCとTeamViewerを立ち上げてもらってパスワードを教えてもらって遠隔操作するっていうかんじでしょうか(^_^;?

実際に私が使いたいのはIT個別指導をするときにお客さんのPCに一時的に入らせてもらって、中身を見ながら相談にのったりするということです。なので今回はPCが1台しかなかったのでiPhoneとの共有テストしかできませんでしたが、今度は2台のPCを使ってどのように遠隔操作ができるのか、ということを試していきたいと思っています。

商用で利用する場合は、
https://www.teamviewer.com/ja/pricing/

76,000円から、と結構な値段なので充分に検討したいと思っています!

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

「でんでんコンバーター」でepub形式のファイルを作成してKindlePreviewerで見てみた! Kindleで本を出版!その1

$
0
0

コワーキングスペース八王子8BeatではCoderDojo八王子を2年近く行っています。子供がプログラムを学べる道場です。完全無料で運営しているため、会場費などの負担は寄付により運営していますがぎりぎりです。買いたい本やRaspberry Piもあるのですがとてもまかないきれません。そこで、このブログで書いているScratch(子供用のプログラミングツール)の記事をKindleで出版してその売り上げから寄付をするのはどうだろう?という案が出ました。
以前からKindleでの出版(kdp)に興味があったので、まずはちょっとやり始めてみようと思いました。最初はepub形式のファイルを作ってくれる「でんでんコンバーター」を試しました。

Kindleで本を出版するにはどのような手順が必要なのか?


Kindleで本を出版
するにはどのような手順が必要なのかな?と考えたときに、わかったブログのことを思い出しました。

わかったブログはこのブログを書く前からとても参考にさせていただいているサイトで、著者のかん吉さんがビジネスに役立つ記事をかいておられます。

かん吉さんはKindleで複数の本を出版されています

人気ブログの作り方: 5ヶ月で月45万PVを突破したブログ運営術

ブログ起業: 10年9割廃業時代を生き抜くブログ×ビジネス戦略

1日30分練習でマラソンサブ3.5を達成する方法: 忙しいサラリーマンでもできる!

*余談ですが最近、紙の本も出版されて大好評です(^^)/

ゼロから学べるブログ運営×集客×マネタイズ 人気ブロガー養成講座
菅家 伸 かん吉
ソーテック社
売り上げランキング: 208

たしかKindleで本を出版されたときにそのノウハウを記事にしてくれていたと思いましたので探してみました。

誰でも簡単にKindle電子書籍を出版する方法 2015年版

この記事がとても参考になりそうです。Kindleで本を出版する流れとしては

大まかな流れ

– 原稿を書く
– 見出しなどをマークアップ
– でんでんコンバーターでEPUBファイルに変換
– プレビューワーで、プレビューついでに、mobiファイルに変換
– KDPにmobiファイル送信、出版手続き
– 販売開始

以上です。

このようなものになるようです。

「でんでんコンバーター」ってなんでしょう?

流れの中で、原稿を書くというのは、すでに書いてある記事

毎月第3土曜日に八王子CoderDojoを開催しています。明日がその開催日なのですが、今回は初めてのお子さんが多く参加するという話を聞きました。 お子さんは大概の場合ちゃんとし

これを使おうと思っているので、原稿を書く作業は終了しています。

次にマークアップする、ということをしたいと思いますがそのまえに「でんでんコンバーター」って何?というのが分かっていなかったので見てみることにします。

でんでんコンバーター

Webサイトはここになります。

でんでんコンバーターはアップロードされたテキスト等を電子書籍の標準フォーマットEPUB 3に変換して出力するウェブサービスです。

こんな感じで書いてあります。なるほど、epub形式にしてくれるWebサービスなのですね!

アップロードするのはテキストだけでなく、

テキストファイル (Markdown、PHP Markdown Extra、でんでんマークダウンの記法に対応)
画像 (PNG、JPEG、GIF)
CSSファイル
設定ファイル(ddconv.yml)

このような種類になっています。

WordPressで書いた記事を「でんでんマークダウンの記法」に対応させる

ということで、まずは WordPressで書いた記事を「でんでんマークダウンの記法」に対応させる ところからやってみました。

でんでんマークダウンについては メニュー の



でんでんマークダウン
をクリックすると使い方を見ることができます。

原稿はWordPressのブログ記事を使うので、記事を表示させて

記事の 編集 をクリック



テキスト
に表示された記事を全選択してコピーします。

テキストエディタに貼り付けます。

* このときのエディタはutf-8が保存できるもの(Windowsなら秀丸やサクラエディタ)を使います。

このファイルを文字コードUTF-8で保存しておきます。

段落

段落の書き方
mybook.txtの中に本文を書いてゆきます。通常の日本語の文章と異なる点は、段落と段落の間を一行空けることです。

とありました。WordPressのテキストタブで記事を書いているときと同じなのでこれはこのままでOKと思います。

見出しの付け方

見出し
# を使った記法 atx形式
Markdown PHP Markdown Extra でんでんマークダウン
見出しは半角のシャープ「#」を使って指定します。「#」の数によって

から

までの6段階のレベルを表します。

とありました。WordPressの記事を書くときにJetpackのマークダウンを使って書いているので、記事では
 

## h2の見出し

と書いているところを でんでんマークダウンに合わせると

## h2の見出し ##

前後に囲む形にすれば良さそうです。実際には

となっているところを

このようにしていきました。

通常の

<h2>h2の見出し</h2>

となっている場合も同じように
 

## h2の見出し ##

などに変更します。#の数が見出しの大きさに相当します。

改ページ

改ページ(ファイル分割)

でんでんマークダウンでは半角のイコール記号「=」が3つ以上で構成される行があると、その前後でHTMLファイルを分割します。通常、ファイルを分割した箇所は改ページされます。

EPUBは内容を複数のHTMLファイルに分割して作るのが一般的で、表示スピードも向上します。大見出しの手前など、本の内容に大きな区切りのある箇所に入れるとよいでしょう。

イコール記号「=」を3つ以上入れるか、ファイル自体を分割すると改ページされるようです。今回は短い記事なので「=」を3つ以上いれてみます。

記事の最初に書いているリード文の後の <!--more--> を

改ページの記号(===)に置き換えたり、

見出しの前

改ページの記号(===)をいれてみました。

でんでんコンバーターでepub形式のファイルに変換してみる

ということろまで来て、画像は?と思ったのですが、ちょっと時間がかかりそうだな~と思ったのと、epub形式にするとどんな風に見ることができるのかということを早く見てみたくてこの時点でepub形式に変換してみることにしちゃいました(ちょっと無謀)。

アップロードしてね というところから、さきほど編集して保存したファイルを指定、情報を入れてね というところでタイトルと作成者を入力、お好みでどうぞ の ページ自動生成の 扉ページと目次ページにチェックを入れて 変換 をクリック。

epubファイルが作成されたら、PCにファイルを保存します。

epub形式のファイルはできたようです。。。しかしこのままでは見ることができません。

Kindle Previewerをダウンロードしてインストール

かん吉さんの

誰でも簡単にKindle電子書籍を出版する方法 2015年版

Kindle Previewerを使ってepub形式のファイルを見るということが書いてありました。

Kindle 出版プログラム

このページの下部にある

img_58057c8ea4d2c

Kindle プレビューア v2.94 Windows(7 以降)対応版 今すぐダウンロード をクリックしてファイルをダウンロードします。
ダウンロードするファイルは186MBあるので時間がかかります。ダウンロードした

KindlePreviewerInstall.exe をダブルクリックしてインストールします。

OK をクリック

同意する をクリック



インストール
をクリック



完了
をクリック

インストールが終わりました

Kindle Previewerで作成したepub形式のファイルを見てみる

スタートから

Kindle Previewer をクリックして立ち上げます。

このような画面が表示されました。

作成したepubファイルを表示するにはこの画面にドラッグ&ドロップします。

KindleプレビューアがKindlegenを使って本をコンパイルしています。お待ちください… と表示されるのでしばらく待ちます。

コンパイルが終わると 警告があるらしいことが表示されてファイルがどこに出力されたのかが表示されました。

ここに の上にカーソルを載せると場所が表示されます

下向きのこのマークをクリックすると、

情報が表示されます。見てもよく分からなかったので OK をクリック

すると…

おぉぉ!ブログの記事がKindleっぽくなって表示されました。画像については特に何もしていませんでしたが表示されています!(とはいえちゃんと出版するにはこのままではダメだと思います)

ページ移動をクリックすると

次のページが表示されます。太字などについては特に何もいじっていませんが、ブログで太字だったところはここでも太字で表示されています。

当たり前ですが(^_^;、ショートコードを使ったところはそのまま表示されちゃうのであとで編集が必要です。

メニューバーにある 移動>扉 をクリックすると

扉ページが表示されました(^^)/

扉ページの次のページには目次が表示されています。リンクをクリックするとそのページに飛ぶようになっています。その他本文中の httpリンクなどもブラウザにリンクして見ることができるようになっていました!

これはもう…あとちょっとでKindleの原稿ができあがりそう!?

まとめ:WordPressの記事を使ってでんでんマークアップ形式にするのはとても簡単そう!

ブログ記事はたくさんあるのでいつかKindleで出版してみたいなと思っていましたがなかなかやってみるのが面倒で実際の作業はどんなものなのかを試しのが初めてでした!

感想としては、思っていたよりもずっと簡単にepub形式のファイルにして、そのあとにどのように見えるようになるのか?ということを確認できました。また、WordPressの記事を使ってでんでんマークアップ形式にするのは(たぶん画像以外は)ものすごく少ない修正で済みそうということが分かりました。

実際に出版するところまで持って行きたいので今後、画像をちゃんと入れるとか体裁を整えるなどをしていき近々Kindleで配布できるようにしていきたいと思います(^^)/

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

EPUB形式のファイルに画像を挿入して大きさを編集する Kindleで本を出版!その2

$
0
0

Kindleで本を出版してみようと思ってまずは、でんでんコンバーターを使ってEPUB形式のファイルを作りKindlePreviewerで見てみました。
その際は、すぐに結果が見たかったので画像はHTMLのままプレビューして確認しました。Kindleで出版するにはちゃんと画像も添付して編集し直す必要があると思うので今回は画像を挿入して編集してみました。

ブログで使われている画像を一括して取得する方法

前回のブログはこちらです。

コワーキングスペース八王子8BeatではCoderDojo八王子を2年近く行っています。子供がプログラムを学べる道場です。完全無料で運営しているため、会場費などの負担は寄付によ

Kindleで出版しようとしているものはこのブログの

毎月第3土曜日に八王子CoderDojoを開催しています。明日がその開催日なのですが、今回は初めてのお子さんが多く参加するという話を聞きました。 お子さんは大概の場合ちゃんとし

この記事です。このブログで使われている画像をKindleで出版するためにダウンロードしたいと思いました。一つ一つのダウンロードするのは面倒だったので、一括して取得しました。

FirefoxChrome

右クリックして、名前をつけてページを保存

保存 をクリック

ブログのタイトルがついたフォルダができます。この中に

HTMLファイルや画像ファイルが一式入っています。ここにブログで使っているすべての画像が保存されています。



画像以外
の形式のファイルを削除して、

ブログ記事に関係ない画像ファイルを削除します。

Kindleで出版用に作っているテキストファイル同じフォルダに画像をコピーします。

EPUB形式のファイルに画像の指定を入れる

でんでんコンバーター を使ってEPUB形式のファイルを作成しています。

コワーキングスペース八王子8BeatではCoderDojo八王子を2年近く行っています。子供がプログラムを学べる道場です。完全無料で運営しているため、会場費などの負担は寄付によ

でんでんマークダウンで画像を入れる

画像を挿入するには、

画像 直接リンク

にある方法でできるようです。

EPUB形式にするためのテキストファイルを開いて、今はブログのままの
 

<img alt='' class='alignnone size-full wp-image-20916 ' src='http://ryus.co.jp/blog/wp-content/uploads/2016/09/img_57db2c111c29b.png' />

こういうコーディングになっている部分を、

![](img_57db2c111c29b.png)

のように書き換えてみます。ちゃんと表示できるかどうかを見たかったので、原稿ファイルをtest.txtというファイルにコピーして、最初のページ部分以外を削除して保存しました。

でんでんコンバーター

で、

ファイル選択 をクリックして、今編集したテキストファイルと使っている画像Ctrlを押しながら2つ選択して指定して変換をクリック。

KindlePreviewerでコンパイルする前にざっと見るだけなら 作成したEPUBをプレビューする にチェックをするとWeb上で簡易的に表示ができます。

画像が表示されました。

HTMLタグで画像を入れる

しかし、元の原稿がHTMLなものでこの形にするのには結構手間がかかりそうです。でんでんコンバーターで変換後のコード

<img src="img.jpg" alt="代替テキスト" />

このようにHTMLなので、HTMLのまま編集した方が早そうです。テキストエディタで不要な部分

http://ryus.co.jp/blog/wp-content/uploads/2016/10/

class='alignnone size-full wp-image-\d{5} ryusImageAdvertise'

を空文字に置き換えて一括置換しました。

画像を挿入した結果を目視確認してみる

全部の画像を入れた後に、でんでんコンバーターでEPUB形式のファイルを作ってざっと確認してみます。

できたものを見てみると、画像が壊れているものがありました。ファイルをアップロードし忘れていたようです。あと、先ほどのHTML一括変換はPNGファイルだけしか書き換えないものだったのでGIFファイルの部分を編集し直しました。

これを繰り返して、画像が全部表示されている状態を確認したら、

EPUBファイルを保存します。

KindlePreviewerでエラーが発生!

保存したEPUBファイルをKindlePreviewerにドラッグ&ドロップしてみたところ、

Kindleプレビューアは本のコンパイルに失敗しました

と表示されてしまいました(>_<)。画面の下矢印をクリックして詳細を見てみると

警告(prcgen):W14225:Mobi could not be built with HD images because it exceeds the maximum file size limit. Falling back to Mobi building with SD images

というエラーが出ています。画像ファイルの大きさ?と思って、フォルダを見てみましたが

画像ファイルの一番大きいものでも1Mより小さいし、フォルダ全体の大きさも

6N程度なので、Kindleの制限

コンテンツ ファイルのサイズを縮小する

を見ても、

アップロードできる原稿ファイルの最大サイズは 650 MB です。Amazon KDP では、このサイズ以下の Word 文書 (doc および docx)、MOBI、ePub、HTML、および PDF ファイルを変換できます。

KDP のコンテンツとして使用できる 1 つの画像ファイルの最大サイズは 5 MB です。最大サイズよりも大きいファイルを送信すると、変換に時間がかかったり変換が失敗することがあるため、この制限を超えないようにしてください。

全く問題がないです。さて、困ったなと思って、エラーメッセージで検索したところ、

Warning about HD images when converting from epub to mobi

こちらの情報を見つけました。

自動翻訳した結果を見ると、 Dropboxに保存しているとそのようなエラーが出ていたようだ、ということが分かりました!!!

確かに、このフォルダはDropboxに保存しています。ということで、フォルダごと

デスクトップに移動して、もう一度KindlePreviewerにドラッグ&ドロップしてみると

コンパイルはできるようになりました(^^)/。

画像の大きさを変更してみる

OK をクリックしてコンパイルできた内容を確認します。

画像がちゃんと表示されています。しかし、実際に参照するのには画像が小さくて分からないです(^_^;。画像はimgタグで表示しているので

<img alt='' src='img_57db2c111c29b.png' style="width:100%" />

このようにstyleで幅を適宜指定してみました。

コンパイルし直してみると、

こんな感じにちょっとずつ本っぽくなってきました(^^)/

まとめ:画像を入れるときは大きさやページ替えなども必要

このように画像を入れるときは画像の大きさを一つずつ適切な大きさにしたり、画像と説明が別のページに行かないように1ページずつチェックしてページ替えなどを使って編集することが必要かと思いました。

Kindleで出版する前に、表紙を作るとか、連絡先を書くとかそういうこともしたいと思っています。あと2回ぐらいブログの記事を書いたらKindleで出版できるんじゃないかなぁと期待しています(^^)/

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

パターンで作るフリーの背景画像サイト「Bg-Patterns」は使い勝手が良くて超おしゃれ

$
0
0

このところKindleで本を出版しようとしてその1その2とブログを書いています。その3ではいよいよ表紙を作ろうかなというところになりました。自分はデザイナーではないのでどんな風に作ればいいかわからなかったのですが子供向けの本を参考に「表紙の背景は明るい感じの幾何学模様で!」と思いました。そして検索したところとっても良いフリー背景サイト「Bg-Patterns」を発見したので今回はこちらの紹介をしようと思います。

Bp-Patternsではセンスのいい背景素材が豊富に配布されています!

Bp-Patterns

ネットで検索して、このサイトを見た瞬間にデザインがかっこよくてしびれました(^^)/

こちらの素材は

WEBやDTP、ビジネス資料などで使える背景素材を商用可でフリー(無料)ダウンロードできる『Bg-Pattrens』。
色や形、サイズも自由にカスタマイズして自分のオリジナルの背景を作ろう。

商用も可能なフリー素材です。

メニューのカテゴリーから、自分がほしい素材のカテゴリーを選んで

一覧の中から背景を選ぶことができます。

気に入った背景をカスタマイズしてダウンロードする方法

使いたい背景が決まったら背景素材をダウンロードするのですがそのときに、カスタマイズをすることができます。

モンドリアン風ですごくかっこいいです!この画像をクリック

このページに遷移します。右側に今の状態で背景として使ったときの状態がプレビューされています。

1:背景のパターンがいくつかありますので好きなものを選びます
2:サイズ 背景のサイズを変えることができます
3:ファイル ファイル形式を選択します
4:グランジ ダメージ加工のあり/なしを選びます

サイズをLLにしてみました。この状態で使いたいので 表示中のパターン画像をダウンロード をクリックします。PCの任意の場所に保存されます。

実際に背景を素材として使う方法

保存したファイルは p-pt_0251-xl_pt_02510.jpg このような名前のものでした。このファイルを開くと

このように、一通りのパターン部分だけの画像となっています。この画像の場合はこのままでも使えそうですが、パターンを繰り返して表示させたい場合はHTMLを作ると繰り返した状態の画像になります。

HTML拡張子(xxxxx.html)のファイルを作り、そこに

<html>
<head>
</head>
<body background="p-pt_0251-xl_pt_02510.jpg">
</body>
</html>

このようにbodyの背景を今ダウンロードした画像ファイル名にしてブラウザで表示させると

このように繰り返した状態の背景になります。私の場合は画像の素材として使いたいので、ブラウザで表示された背景をハードコピー(画面キャプチャ)して、画像ソフトなどで加工をしました。

うーん、背景がかっこいいとなんだかとてもかっこいい(^^)/

SPECIALカスタマイズ

と、最初はそのように繰り返しのパターンを取得していたのですが、SPECIALカスタマイズ という方法で好きな大きさの画像を作ることができることが判明しました(>_<)。SPECIALカスタマイズはそれだけでなく、より細かなカスタマイズができます!

このパターンをクリック

プレビューの左端にある SPECIALカスタマイズ をクリック

サイズを決める

このような画面になって のところでダウンロードする画像のサイズパターンのサイズを決めることができます!

色を決める

背景の色と使われている色の数分だけ1つずつ指定することができます。ランダム色変更 をクリックすれば、デザイン知識のない人でも何度かクリックするうちに

こんな風に自分の好みの組み合わせにたどり着けるかもです。

グランジを追加する、グランジのサイズを変更する

グランジとはダメージ加工のことで、グランジのパターンを選んだりサイズを変更したりすることができます

試しに

こんな感じに指定すると、画像は

このようにダメージ加工が施されました。

効果を追加する

ここから集中線などの効果を追加することができます。

試しに、この効果をクリックすると

このような画像になりました。

カスタマイズした画像をダウンロードする

カスタマイズした画像は

この PNGダウンロードJPGダウンロード をクリックすることでダウンロードできます。

その前に

使いたいサイズとパターンの大きさを決めました。

ダウンロードしたファイルを開くとこういう画像ができていました。

パターンを使ったヘッダーやバナーに使えそうですよね(^^)/

おまけ:Bg-Patternsで選んだ、お気に入り

すべてを見たわけでは無いんですが、今回使った以外で見つけたお気に入りのパターンをこちらに貼っておきます。

シームレスなカラフルな横のストライプ背景

北欧風のデザインが素敵です。

シンプルな丸の重なりパターン

シンプルな丸が使い勝手良さそうです。上下逆にしてもいいかな?

四葉のようなパターン素材

これもやはり北欧風というか…バナーとかに使ったら良さそうです!

パターンが素敵でかっこよくて、カスタマイズも自由自在にできるこんなサイトを作っていただきTopeconHeroesさん、ありがとうございます(^^)/

兎本美佳
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。
Viewing all 90 articles
Browse latest View live




Latest Images