Quantcast
Channel: サイト制作覚書
Viewing all 44 articles
Browse latest View live

カスタム投稿でもマイリストを実装!wordpressプラグインのFavoritesが色々と優秀

$
0
0

こんにちは。今回はwordpressネタです。

現在進行形で会員サイトを作っていまして、マイリスト機能が欲しくなりました。

当初はWP Favorite Postsを使っていたのですが、カスタム投稿で失敗します。これについてはテンプレートの編集で解決出来たのですが、バージョンアップでテンプレートが様変わりしました。

面倒臭くなったので別の方法に移行しました。

WP Favorite PostsからFavoritesへ鞍替え

とりあえずWP Favorite PostsでCSSをカスタマイズしていた人は残しておきましょう。リスト表示のされ方が似ているので簡単に入れ替えることができます。

Favoritesって日本人ブロガーで取り上げてる人はいませんよね・・・めちゃくちゃいいぞ!

まず冒頭でも説明したカスタム投稿での実装ができること。マイリスト表示もカスタム投稿毎に出力できるので柔軟にカスタマイズできます。

そしてCSSの知識があればカスタマイズもしやすいし、お気に入り数のカウント表示なんかも『簡単』かつ『イイ感じ』に実装可能なんですよ。

参考までに実装したページをご紹介します→タイトル右下の黄色いボタンがマイリストボタンです

参考までにPHPとCSSを置いておきます

大したもんじゃありませんがPHPから


<span class="favorite-button">

<?php
the_favorites_count($post_id);
the_favorites_button($post_id, $site_id); ?>
</span>

カウント数を先に呼んで登録ボタンを次の行に書いてます。spanで囲っているのはデザインし易いからです。

アイコンはfort.awesomeを使っていて、プラグインの管理画面で文字を入力する箇所に貼り付けてます。

 

次はCSSですね。


.favorite-button{

background: #FFE203;
padding: 2px 4px 3px 15px;
border-radius: 5px;
margin: 5px 0;
float: right;}

.simplefavorite-button{

padding: 5px;
margin: 3px;
border: none;
background:#FF8F00;
color: #FFF;
border-radius: 5px;}

Chromeで適当にCSS書いて、そのまんま貼り付けただけの『雑な仕事』でござる。

リストをカスタム投稿ごとに出力

一覧ページは固定ページで作りました。ショートコードを貼り付けるだけです。

ショートコード上で色々カスタマイズができるので工夫の余地があります。たとえば私のショートコードはこんな感じです。


<h3>テストのマイリスト</h3>
[user_favorites user_id="" include_links="true" site_id="" include_buttons="false" post_types="test"]
<h3>動画のマイリスト</h3>
[user_favorites user_id="" include_links="true" site_id="" include_buttons="false" post_types="video"]
<span style="float: right;">[clear_favorites_button site_id="" text="※すべてクリアする"]</span>

post_typeの部分でカスタム投稿を指示してやります。カスタム投稿ごとに分けてやった方が親切じゃろ。

ちなみに私の場合、固定ページ特有のPタグ追加現象を回避しているので必要な人は各自で設定が必要です。

Pタグ問題の参考ページ

まとめ

鞍替えして良かった(^^♪


GCEでSFTP(FileZilla)を接続する方法

$
0
0

こんにちは。最近はGoogle Conpute Engine(GCE)を使う必要があって仕方なくコンソール上での作業に徹してきました。

が!!

私は単なるコピペプログラマーではありません。

グラフィカルUI上でしか作業をしないコピペプログラマーです!!(*‘∀‘)プログラマーッテナニ?

GCEでのFTP接続情報がみつからない!

おい!日本人!!GCE嫌いなのか?

某ジャングル系のクラウドより安いし良さげじゃないですか?

私は単なるコピペプログラマーではありません。

Google先生には必ず【日本語のページを検索】でお願いしています!

今回は自力で滅茶苦茶やってたら(意地になって)上手くいったので覚書にしておきますよ。

まずはGoogle Cloud SDKをインストール

インスタンスの編集画面(console.developers.google.com)の画面右上メニューからダウンロード→Google Cloud SDK

インストール中にpythonのインストールがあるんだけど、シングルユーザーでインストールすると失敗しました。

深く考えずに全員用にインストールすればOKでした。

起動すると

Enter project id you would like to use:

って聞かれると思うのでプロジェクト名を入力しましょう。

例:enoken-1525

 

たしかその後にGoogleアカウントと接続許可したりをほぼ自動で行ってくれたはずです。

 

この段階までくれば以下のコマンドでインスタンスを確認できます。

gcloud compute instances list

出力例:

NAME  ZONE MACHINE_TYPE PREEMPTIBLE INTERNAL_IP EXTERNAL_IP STATUS
eno-instance1  asia-east1-a  g1-small  99.11.1.8  222.311.123.456 RUNNING

sshキーをPC上に作成する

これまででプロジェクト名とゾーン名とインスタンス名が確認できてるので、以下のコマンドでSSHキーを作成します。

gcloud compute --project "enoken-1525" ssh --zone "asia-east1-a" "eno-instance1"

おそらくC:Usersユーザー名.sshの中に作られてます。

このあたりまではPuTTyとGCEの接続方法を書いたブログを幾つか見かけたので、私が間違っていても問題ないでしょー<(_ _)>

 

一番の問題!SSHキーをGCEに追加する

とりまインスタンスの編集に移ります。

 

画面中ほどにあるSSHキーで【+項目を追加】します。

 

ここに入力する内容ですが基本的には先ほど生成された【google_compute_engine.pub】の中身です。

けど丸ごとコピペでは通らないので以下のように編集します。

ちなみに改行は無い方が良いと思います。

ssh-rsa (暗号部分:例えばALKFDSKLL+AS・・・みたいな部分) ユーザー名@デスクトップの情報

このユーザー名は自動的にenokenとかになっていると思います。

@の後はFileZillaで使うには【外部 IP】を使います。ブラウザのURL部分に貼り付ければサイトにアクセスできるサイト公開先のIPです。

例:enoken@130.10.11.22

これを追加すればGCE側での設定は完了です。

FileZillaで認証キーを読み込む

あとはFTPソフト側で認証キーを読み込んで公開先のIPに接続してやるだけです。

 

ホスト名は実際にアクセスするとサイトが表示されるIPアドレス

ユーザー名は先ほどgoogle_compute_engine.pubの中でコピーした@の直前

読み込むkey fileはgoogle_compute_engine.pubではなくてgoogle_compute_engine.ppkです。

 

まとめ

GCEはデフォルト状態のSSHもバグが見当たらないし、動きも速くて使いやすいんだけど、FTPの接続方法を一つ取り上げても日本人の情報が少なすぎる。

真っ黒画面で白文字とか好きじゃないし、FileZillaぐらい簡単に使えないとテンション下がるよね。

ConoHaで気軽にプラン変更したら止まって困った

$
0
0

趣味で製作中のサイトを暫らく放置していたのですが、重い腰を上げて作業に入りました!

が!しかし、手始めにConoHaのプランを変更してメモリを増やそうと思ってたら『プラン変更中』のまま動きません。

まぁ、そんなこともあるよなぁって思いながら、サーバーを追加してみたら。

プラン変更が邪魔をして新しいサーバーも構築出来ない

きっと並列処理じゃないんですね。

でも、これって凄く困る。

試しにもう一つ追加してみようとも思ったんだけど、料金って加算されちゃいますよね。今は23時だし、問い合わせても対応は明日の昼ぐらいだと思います。

そして、気軽にやってしまった私に責任があるのだけど、プラン変更中のサーバーも削除したくない!SSHもFTPも繋がらない!!(バックアップ不可能)

まとめ

せめてプラン変更前にクローンを作っておけば何の問題もなかった。(DNSの割り当てで対処できた)

2時間後ぐらいにプランの変更が完了していたので、試しにプランを戻してみたら、やはり数時間は変更の時間が必要な様子。

問題なのはサーバーを起動状態で変更できないことなので、プラン変更時はクローンを用意してDNSが定着してから行った方が良さそう。

※5時間後の朝に見たらプラン変更中のままでした。手動で処理してるのかな?

フリー素材アイドルのMIKA☆RIKAが滅茶苦茶使える!!

$
0
0

フリー素材アイドルってなんやねん?

読んで字のごとく、MIKAとRIKAの写真をフリー素材として使用できるグラビアアイドルです。

つまり以下のような広告を作るのも自由ということ!3秒で完成しちゃいます!!

早速FreeGAの広告を作ってみた

早速FreeGAの広告を作ってみた

 

おぉ!ただ字を入れただけなのにイイ感じですね(^^)

やはり写真が良いものだと簡単に良いものが作れます。

ロゴを入れると永久に使用可能

公式サイトのHow toによるとダウンロード期間は2015年の12月31日まで

使用可能期間は2017年の12月31日までとなっております。

 

だがしかし!以下のロゴを付けた場合は永久に使用可能だとか

MIKA☆RIKAの公式ロゴ

MIKA☆RIKAの公式ロゴ

これはもう今年中にガンガン作って永久に使い続けるしかないね。

ちなみにフリーガで再配布するとかはダメ!

ダウンロードの際には利用規約が表示されるので一読して理解しておく必要があります。

ビジネスや美容、体のパーツ等のカテゴリも充実

フリー素材を探すうえで重要なカテゴリ分けもサポート体制はばっちりでした。

折角なのでもう一つ作っちゃいましたよ~!

FreeGaの広告(MIKA☆RIKA)

FreeGaの広告(MIKA☆RIKA)

やっぱり写真が良いと5分もかからずに出来ちゃいます。

記事を執筆しながらもMIKA☆RIKAの魅力にひきこまれ始めていますよ(*´▽`*)

 

ちなみに音声素材も提供されているようなので、そちらを希望の方もMIKA☆RIKAを利用してみてはいかがでしょう。

 

MIKA☆RIKAの公式サイト

〚WordPressの画像を横並び〛css1行で管理も簡単な方法

$
0
0

wordpressで画像を横並びにする方法は多数ありますが、stinger5を使用している私にとって〚最も簡単で管理もしやすい方法〛をご紹介します。

画像を横並びにする

画像を横並びにする

※使用テーマによっては思い通りになりません。思い通りにならない場合、良ければテーマやサイトのURLを教えていただけると一緒に考えることができます。このような作業は好きなので気軽にご相談ください。

下準備としてメディアを追加で〚左寄せ〛

とりあえず横並びにしたい画像をすべて〚左寄せ〛にしてください。

画像を左寄せにする

画像を左寄せにする

この時点では横並びが失敗するはずです(ほとんどのテーマの場合)。

上の画像のように横並びにならない場合も慌てる必要はありません。

また、今回紹介する方法では最後の画像を〚配置なし〛に指示する必要があります。

最後の画像だけ配置なし

最後の画像だけ配置なし

これをしないと画像の後に続くテキストや意図しない画像まで横並びになってしまいます。

 

普段の作業はたったこれだけです。

 

なおcssの話ですが、ここで横並びを指示した画像には〚.alignleft 〛というクラスが付与され、最後の画像に使った配置なしの画像には〚.alignnone〛が付与されています。

あとは〚.alignleft{float:left}.alignnone{overflow: hidden}〛を追加するだけ

それだけです。シンプルかつ管理も簡単でしょ。

cssのどこかに以下の一行を追加すれば簡単横並びの完成です。

 

.alignleft{float:left}.alignnone{overflow: hidden}

 

もっと色々やりたいなら〚WP Canvas〛というプラグインを使うのも良いのですが、これだけのためにプラグインを導入して処理を重くしたくないという方には最適です。

最近は〚overflow: hidden〛によるfloatの解除が流行っているようなので便乗してアイディアをひねりました。

ぜひお試しあれ。

【多言語サイト構築】簡単でプラグインに依存しない方法

$
0
0

WPMLとBogoとqTranslate(mqTranslate,zTranslate)を試した結果、Multisite Language Switcherにした話。

今回言いたいこと:Multisite Language Switcher

・プラグインへの依存が少ない

・マルチサイト構築は驚くほど簡単

・マルチサイトにした方がシンプルで問題も発生しない

 

この記事はマルチ言語サイト構築での教訓から、心からMultisite Language Switcherをお勧めする内容です。

Multisite Language Switcher以外のプラグインを止めた理由

上記で述べた3つのメリットがすべてですが、とにかくプラグインに依存したくなかったのが一番の理由です。

まずはそれぞれのプラグインが合わなかった理由を説明します。

WPMLやBogoを使うと他のシステムと干渉した

まずBogoやWPMLを止めた理由ですが、Bogoのような1言語1記事方式のプラグインはサイト内検索のプログラムを複雑化したためです。

通常であればget_postsのsuppress_filtersをfalseにすれば解決するようですが、該当サイトでは条件検索を構築していたため複雑になり過ぎました。

get_postsのsuppress_filtersで参考にしたサイト

凝ったシステムやプラグインを使う場合、多言語プラグインの多くは干渉しがちです。

それに1言語1記事方式でプラグインへの依存度も少ない(qTranslateと比較した場合)のだけど・・・大量に記事を書いた後にプラグインを外すと大変なことになります。

今後の値上げや更新の停止を思えば、プラグインへの依存は避けたいところです。

qTranslateは重い・・・それ以上に先が読めない

WPMLやBogoとの比較では動作が少し重かった。これから規模を拡大するには不安を感じます。

それ以上にqTranslateの更新は一年前で止まっており、今ではzTranslateやmqTranslateに移行しつつあります。

1記事複数言語方式のqTranslateではプラグインへの依存は非常に大きく、プラグインを外せばサイトが目茶苦茶になります。

qTranslate自体がどうなるのか解らないのだから、これではあまりにもプラグインに頼り過ぎていると思います。

Multisite Language Switcherなら全て解決できた

ここまでの批判的な意見はMultisite Language Switcherの特徴を引き立たせるためでもあります。他のサイトに当てはまるとは限りませんが説明します。

Multisite Language Switcherがプラグインに依存しない理由

それはプラグインを外しても問題ないからです。

Multisite Language Switcherが行っている作業は【異なる言語同士をリンクする】程度に留められているため、他のプラグインのような不具合は発生しません。

もしプラグインを外したとしても、今までマルチ言語サイトだったものが、『日本語のサイト』『英語のサイト』『中国語のサイト』・・・と分裂するだけで、サイトそのものは通常通り運用できるのです。

 

その状態であればプラグインに不具合が出ても、慌てて代替プラグインを探す必要がありません。

最悪のケースでも、Multisite Language Switcherを真似たシステムを組めそうなぐらいシンプルな仕組みといえます。

極端な話をすると、手作業でも主要部分のリンクを貼っていけば同じ状態まで持っていけるということです。

wordpressのマルチサイトは簡単に構築できる

Multisite Language Switcherと聞いて嫌悪感を抱いた人の中には、『マルチサイト』の構築を思い描いた人がいるかもしれません。

しかしマルチサイトの構築なんてものは、慣れれば10分程度で出来る作業なので、『手順通り』に作業をすれば何も恐れることはありません。

 

Multisite Language Switcherほどのメリットを数十分の作業で得られるのだから、是非オススメします。

MULTISITE LANGUAGE SWITCHER 使い方 インストール

以下はマルチサイトの構築を含めたMultisite Language Switcherのインストール方法がまとめらた、非常に親切なサイトの引用です。

リンク先も載せておきますが、リンク切れになって情報を得られなくなるのは勿体無いので、文章も残しておくことにしました。

私もPHPが好きな方ではないし、パッと見ただけで拒絶したくなるものですが、手順通りに作業すれば直ぐに出来てしまうはず。

何も考えずにコピペで出来てしまうような、素晴らしい記事だと思うのですが如何でしょう。

MULTISITE LANGUAGE SWITCHER 使い方 インストール

この『Multisite-Language-Switcher』は非常に高機能な、ブログを多言語化するツールです。

このWordpress用のプラグインの情報が日本語でほとんどないので、使い方を書いておきます。自己責任で使用願います。

①多言語化ネットワーク設定

wp-config.php を書き込み可として、以下を挿入。

/* Multisite */
define( ‘WP_ALLOW_MULTISITE’, true );
(『// 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。』の上に挿入)

リロード。

②ツール>ネットワークの設置

画面に従いインストール。

画面に従いwp-config.phpと.htaccess(RewriteEngine On以下のメイン部を入れ替え)を書き換えて、再ログイン。

③ネットワークの親画面から

サイトの追加をする。 パスはen等。

④言語ファイル.mo .poをwp-content/languages/ に コピー。it_IT.mo等。

⑤親からプラグインの新規追加。

Multisite Language Switcherをインストール。

それぞれのサイトの言語設定を行う。私はフラグのみ表示。

⑥試しにhelloWorldを同期してみる。右メニューから更新。

スクリーンショット 2014-09-08 2.17.50

⑦私は wp-content/themes/twentyfourteen/header.php の中程に以下を挿入。

<?php if ( function_exists( ‘the_msls’ ) ) the_msls(); ?>

⑧お疲れさまでした。ヘッダーに国旗が表示されれば成功です!

<おまけ>

⑨コメントもMultisite-Language-Switcher−Commentsをインストールできます。<?php comment_form(); ?>に替えて以下を挿入して下さい。

<?php global $mslsJoinedComments; switch_to_blog($mslsJoinedComments[‘primaryBlogId’]); ?><?php comment_form(array(), $mslsJoinedComments[‘primaryBlogPostId’]); ?><?php restore_current_blog(); ?>

注:上記は当方環境でのインストールとなり、参考するには自己責任でお願い致します。

ちなみにマルチサイト構築の説明に的を絞った素晴らしいサイトも見つけたのでリンクを貼っておきます。

WordPress マルチサイト機能を使ったんで、手順・やったことをまとめて綴ります

 

最後に

wordpressでマルチ言語サイトを構築する場合、複数言語を一つのシステムで処理しようとすれば、プログラムが複雑になるし不具合も起きやすい。

その点、Multisite Language Switcherでマルチサイトを構築することでwordpressのシステムはシンプルになる。

しかも、突然プラグインを使えなくなった場合でもサイトは崩壊することなく、各言語のサイトへと分裂するだけ。

 

マルチ言語サイト構築にとって、これほどメリットがあり、しかも簡単に構築できる方法は見当たりませんでした。

これからマルチ言語サイトの構築を考えている人はMultisite Language Switcherを検討してみてはいかがでしょう。

 

ちなみにマルチサイト構築時にケアレスミスをしたので、ケアレスミスをしそうな方には以下の記事もお勧めします。

wordpressのマルチサイトで【参加サイトに表示されない】

プラグインのCSSを探し当てて停止する私的なコツ

$
0
0

作業はfunctions.phpの編集で行います。

この手の作業は使用プラグインとバージョンによって微妙に異なるのですが、ちょっとしたコツがあるので紹介します。

functions.phpでwp_enqueue_scriptsを使う

今回はDownload MonitorでCSSを止めるコードを例にしながら説明します。

Download MonitorのCSSを停止する

結論から言うと、以下をfunctions.phpに追記することでCSSは読まなくなるはずです。

// download monitorのCSSを停止
add_action( ‘wp_enqueue_scripts’, ‘plugin_css_stop’ );
function plugin_css_stop() {
wp_dequeue_style( ‘dlm-frontend’ );
}

かつてはwp_print_stylesが使われていたのですが、今はwp_enqueue_scriptsを使うのが正しいです(2015年2月)。

『プラグインのCSS』等でググると似たようなコードが見つかるし、適用したいプラグインのコードをピンポイントで発見できればコピペでもOKです。

しかしマニアックなプラグインでもCSSやjavascriptを停止したい場合があるでしょう。

コピペせずに理解する為にも、まずはCSSが呼び出されるhead内を参照してみましょう。

<link id=”dlm-frontend-css” href=”http://freega.net/wp-content/plugins/download-monitor/assets/css/frontend.css” rel=”stylesheet” type=”text/css” media=”all”>

どうやらfrontend.cssというスタイルシートを毎回呼び出してくれているようです・・・全く意味が無いのに!(←あくまで私の環境の話)

なにはともあれブラウザの『要素を検証』機能等を使い、消したいCSSを特定できたならidを覚えておきます。【id=”ココ“】

要となるハンドル名はidの場合が多い

今度はfunctions.phpに記述するコードを解説します。

 

add_action( ‘wp_enqueue_scripts’, ‘ここは任意で決める‘ );

function ここは任意で決める() {
wp_dequeue_style( ‘ここがidになることが多い‘ );
}

 

黒字部分は変わらないのでコピペで使用できる部分です。

ここは任意で決める】は自分が理解し易いようにplugin_css_stopとしました。

ここがidになることが多い】部分はプラグインのハンドル名と呼ばれる部分でDownload Monitorの場合はdlm-frontendでした。

head内で確認したid=”dlm-frontend-css”から-cssを削除したものがハンドル名だったわけです。

 

これは必ずと言い切れる部分ではないですが、多くのプラグインはidをハンドル名にしています。

Download Monitorもバージョンアップ時にハンドル名が変わってしまいましたが、このidを見ることで推測が可能だったのです。

 

これ以外の方法によるハンドル名の特定方法を知らないので非常に助かっています。

(もしもハンドル名の特定方法を知っている方がおられたら、是非教えていただけないでしょうか)

JavaScriptを停止したい時にはwp_dequeue_script

たとえばContact Form 7のCSSとJavaScriptをformページ以外で読み込ませたくない場合は、functions.php内に以下を追記します。

add_action( ‘wp_enqueue_scripts’, ‘contact7_stop’ );

function contact7_stop() {
	if ( ! is_page( 'form' ) ) {
		wp_dequeue_style( 'contact-form-7' );
		wp_dequeue_script( 'contact-form-7' );
	}
}

Download Monitorのときと違うのはif ( ! is_page( ‘form’ ) ) {~}で囲ってformのページだけ除外していることと、wp_dequeue_script()を使ってjavascriptも読み込まなくしていることです。

ちなみにhead内のCSSは以下のようになっていました。

<link rel="stylesheet" id="contact-form-7-css" href="http://freega.net/wp-content/plugins/contact-form-7/includes/css/styles.css" type="text/css" media="all">

やはりidがハンドル名として使われていたようですね。

このハンドル名はjavascriptにも有効だったので、先ほどの例のように一纏めにできましたが、別のページを指定したい場合やハンドル名が異なる場合は分けて記述する必要があります。

※formはスラッグ名のこと。ID番号で指定したい場合は、 if ( ! is_page( 8) )のようにページのID番号で指定することも可能。

 

さいごに

この業界の進化は速いし、 wordpressもプラグインも更新の度に仕様が変わるので、今回の方法も長くは使えないかもしれません。

しかし、コードを眺める癖さえつけていれば些細な変更ぐらいは対応できるようになるし、グーグル先生に尋ねるよりも効率が良いと感じています。

そして誰かが発見したコツがネット上で共有されていき、少しずつ作業が簡単になっていくなら嬉しいことです。

 

それに・・・いつかはプログラムによるカスタマイズが不要になるほど、ツール側が進化するのでしょう。

それは寂しくも感じるのですが、便利な未来で自分は何を出来るのか、少し不安だけど凄く楽しみです。

WP Custom Fields Searchのキーワードで全角の日本語を検索できない解決方法

$
0
0
Wp Custom Fields Searchで全角検索

Wp Custom Fields Searchで全角検索

ワードプレスで絞り込み検索を行う場合、絞り込み検索の方法/KOTORIが大変参考になり実践しています。

プラグインを導入するよりも素晴らしいシステムが構築できるし『いいことずくめ』です、が!!

拘らないのであればプラグインの方が100倍楽です。

ちょうどよくWP Custom Fields Searchがアップデートしてくれたので使っちゃいました。(2015-07-27)

※ただしKOTORI様の方法で実際に組んだサイトは、文句のつけようがないぐらい理想的な検索システムになりました。改めてありがとうございます!

WP Custom Fields Searchで日本語のキーワード検索ができない

これは普通にできている人もいるようなのですが、今も制作中のフリーガというサイトでは検索できませんでした。

色々調べているうちに、プラグイン側でエラーが発生していることが原因だと判明しています。(決め手となったサイトを見失ってしまった(-_-;))

解決:プラグインのextra_search_fields.phpを1行削除

プラグインフォルダ内にextra_search_fields.phpがあるはずなので、中の888行目を消すと解決です。(私は以下のようにコメントアウトしました)

※WP Custom Fields Search ver0.3.27時

function getSuggestedFields(){
		return array(
			'all'=&amp;gt;__('All Fields','wp-custom-fields-search'),
			'post_content'=&amp;gt;__('Body Text','wp-custom-fields-search'),
			'post_title'=&amp;gt;__('Title','wp-custom-fields-search'),
			'post_author'=&amp;gt;__('Author','wp-custom-fields-search'),
/*'post_date'=&amp;gt;__('Date','wp-custom-fields-search'),コレを消す*/
		);
	}

コードを見てもわかるとおり、これを行うと日付をキーワードで検索できなくなります。(個人的にド~でもいいですわ)

はまってる人が少ないのか全然情報がないんですよね。
同じように困ってる人は試してみてください。

自分も忘れると詰みゲー状態になりかねないので、自分のためにメモメモ(..)


ConoHaとAWSとGCEを比べてみるとConoHaって凄いと感じつつwpXにも可能性

$
0
0

最近は興味深い技術が多すぎてサーバー選びも一苦労ですね。

さくらのVPSも石狩リージョンが初期費用無料なので2週間のお試しをするなら今ですよ!

ConoHaは楽で安くて速くて

まずVPSではあるのだけどクラウド的なプラン変更ができる。それなのにVPSとしても安い。さくらのVPSと比較すると少しベンチ結果が良かった(運かな)。

ここまでくると比較対象もクラウドになってしまい、AWSの網元を使ってみたのだけど最安プランのt2.microでは全然能力を発揮できない。AWSの草薙でも試したところアクセスがない状態では網元よりも若干サクサク感が出ていたものの、ConoHaの1Gプランでサクサク動いていることを思うとConoHaのVPSは凄いコスパなんだと実感する。

網元も草薙も相当凄い技術なんだけどt2.microなんかでは活かしきれないのでしょうね。

GCE(Google Compute Engine)が想像以上に凄い

最安プランでサクッとapacheのWordpressを入れて動かしてみると体感速度がこれ以上ないぐらい速かった。ベンチは流石に30req/secぐらいだったんだけど、AWSの東京リージョンよりも遥かに速いと感じるレスポンスは意外でしかなかった。これが流行ってノウハウが拡散され、料金もムーアの法則だかで下がり続ければ近い将来にも無双状態になる可能性がある。

現状ではAWSもGCEも転送量による課金が高すぎて、余程の敏腕エンジニアじゃなきゃコストに見合う使い方は無理だと思う。

 

最安プラン同士の比較だけどConoHaの草薙は一番速くて料金も安い。現時点の無双です。

 

私が手塩に掛けて育てたnginx1.9.5 +php7 +mysql5.7のリバースプロキシプロジェクトを3倍スコアの3万req/secで打ちのめした草薙。

草薙とConoHaの組み合わせは、サーバをちょっとかじったぐらいでは勝てる相手ではないでしょう。

番外編:wpXクラウドの可能性

これはレンタルサーバーなんだけどサイトの成長に合わせてプランを変更できる、名前の通りクラウド的なサービスです。

メールを使いたければネームサーバーではなくてCNAMEだけを向ければ良いし、マルチサイトは無理と言いつつも使えます(止めた方がイイかもだけど)。

サーバーの構築なんて好きじゃなきゃやりたくないだろうし、最大2500万pvを想定したプランまであるので500円(初期費用無料)から始めても夢とロマンがあります。

 

私は悪だくみました。

これでオブジェクトストレージを使えれば最強だと。

 

結果、S3もGCSもConoHaも全滅。意図的なのかは解りませんが、全てのプラグインはエラーになります。

このサービス、うまく嵌ればVPSを止めても良いかもって思わせるほどの可能性を秘めてますね。

私事

大きなファイルを皆で共有するサイトを作りたいのだけどインフラ問題は凄く悩ましいです。

アップロードやダウンロードの挙動が勉強不足で、例えば1Gを3人同時アップロードする場合ってメモリを3G消費するってことなのかな。この手のサービスはAWSもGCEも通信費用の問題でアウト。それでもAWSのS3ならWP-read onlyというプラグインがGitHub上で更新されていて、S3に直接アップロードする方式ならメモリも食わなそうなのにと未練がましく考えています。

BackblazeのB2というストレージも面白そうだけど待ってられないし、ConoHaのオブジェクトストレージを上手く使えるように頑張るしかないのかな。

なにから勉強すれば良いかが解らなくて辛いんだけど、ここさえ突破できれば夢も叶う気がするよ。

ふと。WordPressのKUSANAGIを使うとスケールアップの邪魔にならないか?

$
0
0

現在、AWSとConoHaで草薙様の恩恵を預かっております。

最近まではPHP7を色々と試していたのですが、KUSANAGI様が凄すぎてチューニングする気が失せたのですよ。

プロビジョニングは新規でしか実行できない

VPSやクラウドを使うのって成長に合わせたプラン変更ができるといった需要があると思います。

チューニングの内容を全部わかっていれば、プラン変更時にメモリの割り当てやらに手を入れれば対応可能なんですが、草薙様はプロビジョニング機能で半自動的に設定してくれてます。

じゃープラン変更時にプロビジョニングし直せばと思いましたが、プロビジョニングは新規でしか実行できない仕様なんですね。

4GBメモリの4コア構成以上で始めていれば、プランそのものの変更じゃなくてLBでの対応も出来そうだけど、512MBメモリの1コアを使っていて高画質動画の共有サービスなんかを扱いたくなったりするとスペック不足に陥って、プラン変更を余儀なくされる可能性も出てきますよね。その場合、草薙の再構築ができないから新しいプランに合わせたチューニングができなくなる。せめて、どんな部分が自動設定されているのかが解って、自分でも変更できる状態じゃないと厳しいですね。

まとめ

KUSANAGIに望むこと

  • メモリやCPU変更時の再構築を可能にしてほしい
  • それが無理なら何を変更すれば対応できるかを示してほしい

4コア2GBメモリでSSDが50GBもついて400円のscalewayをUnixBench

$
0
0

結論から言うとCPUは性能低い。けど、scalewayが凄いのは150円で50GBのSSDを増やし放題なこと(2015/11月)。このSSDはWEBサーバーにアタッチして容量を増やす仕組みになっているタイプで、それとは別にオブジェクトストレージも準備している最中らしいです。

それに2GBのメモリと50GBのSSDが付いて400円未満であることを考えると、LB構築してスケールアウトしたりDB分離したりしても5000円ぐらいで全部できそう。

scaleway

それと問題なのはリージョンがフランスだってことかな。Wordpressのデフォルト状態でも体感的に0.4秒ぐらい待たされてる感じがします。例えばAWSの最安プランのCPUだと東京リージョンでもscalewayと同じぐらいの体感速度です。丁度当サイトも同じぐらいの体感速度ですね。

UnixBenchの結果を置いときます

========================================================================
BYTE UNIX Benchmarks (Version 5.1.3)

System: scw-cb181d: GNU/Linux
OS: GNU/Linux — 3.2.34-30 — #17 SMP Mon Apr 13 15:53:45 UTC 2015
Machine: armv7l (armv7l)
Language: en_US.utf8 (charmap=”UTF-8″, collate=”UTF-8″)
18:09:33 up 2:57, 2 users, load average: 0.77, 1.12, 1.30; runlevel 2

————————————————————————
Benchmark Run: Mon Nov 02 2015 18:09:33 – 18:37:53
0 CPUs in system; running 4 parallel copies of tests

Dhrystone 2 using register variables 14633433.1 lps (10.0 s, 7 samples)
Double-Precision Whetstone 2217.1 MWIPS (10.0 s, 7 samples)
Execl Throughput 2994.3 lps (29.9 s, 2 samples)
File Copy 1024 bufsize 2000 maxblocks 171910.2 KBps (30.0 s, 2 samples)
File Copy 256 bufsize 500 maxblocks 47951.4 KBps (30.0 s, 2 samples)
File Copy 4096 bufsize 8000 maxblocks 506658.0 KBps (30.0 s, 2 samples)
Pipe Throughput 667361.7 lps (10.0 s, 7 samples)
Pipe-based Context Switching 189164.3 lps (10.0 s, 7 samples)
Process Creation 8391.9 lps (30.0 s, 2 samples)
Shell Scripts (1 concurrent) 4927.4 lpm (60.0 s, 2 samples)
Shell Scripts (8 concurrent) 637.4 lpm (60.1 s, 2 samples)
System Call Overhead 2390070.1 lps (10.0 s, 7 samples)

System Benchmarks Index Values BASELINE RESULT INDEX
Dhrystone 2 using register variables 116700.0 14633433.1 1253.9
Double-Precision Whetstone 55.0 2217.1 403.1
Execl Throughput 43.0 2994.3 696.3
File Copy 1024 bufsize 2000 maxblocks 3960.0 171910.2 434.1
File Copy 256 bufsize 500 maxblocks 1655.0 47951.4 289.7
File Copy 4096 bufsize 8000 maxblocks 5800.0 506658.0 873.5
Pipe Throughput 12440.0 667361.7 536.5
Pipe-based Context Switching 4000.0 189164.3 472.9
Process Creation 126.0 8391.9 666.0
Shell Scripts (1 concurrent) 42.4 4927.4 1162.1
Shell Scripts (8 concurrent) 6.0 637.4 1062.4
System Call Overhead 15000.0 2390070.1 1593.4
========
System Benchmarks Index Score 695.7

 

シングルコアで測定するとIndex Scoreが250ぐらいです。

4コアをフルに使ってもConoHaの2コアの1/3ぐらいということなので、メモリやSSDを沢山使いたいならscaleway、CPUで比較するならConoHaの方がコスパ良いですね。

まとめ

10台借りても5000円以下。総コア数が40コアで20GBのメモリ。500GBのSSD。

数字だけ見るとスゲェ!!

wordpress管理画面にはBasic認証が簡単で便利!

$
0
0
WordpressにBasic認証

WordPressにBasic認証

 

当サイトはwordpress(以下WP)で運営されています。

(2015/8時点でWP4.2.4)

当サイトでは管理画面のセキュリティ対策として以下を行っていました。

・海外からのアクセス制限

・ログイン回数の制限

・+α(最後の砦は秘密)

 

今まで運営してきたサイトでは、これで十分だったのですが当サイトでは・・・

毎回ログイン回数制限が発動している!

最初はヒヤヒヤしてパスワードを長くしたりIP認証をガチガチにしたりと、気を引き締めて取り掛かっていたのですが・・・

もう!めんどくさいんだよ!!

パスワードを変更すると自分が覚えられないし、IP認証を本格的に工夫するのは私ごときにはハードルが高い!

なにより!毎回ログイン回数制限を解除してからログインさせられる敗北感!!

 

もうサクッとパスワード入れて管理画面に入りたい

ならサクッとBasic認証をかませておけば解決するんじゃない?

確かに管理画面のログイン情報を入力する前に、管理画面にアクセスするためのログイン情報が必要になるけど、

毎回毎回、ログイン回数制限の解除作業を行うよりは絶対にマシ!!

 

どうせ攻撃を仕掛けてるのってプログラムかなんかでしょ?

とりあえずBASIC認証を抜けられた痕跡がないようであれば、十分かな?って思います。

サクッとBasic認証を設置する方法

手順は簡単。お馴染の【.htaccess】と【.htpasswd】をメモ帳で作って管理画面のディレクトリに配置するだけです。

一点注意があるとすれば配置するディレクトリのフルパスを正しく入力することですね。

解らなければ、以下のPHPファイルを置いてアクセスすれば確認ができます。

<?php
echo __FILE__;
?>

 

上記のPHPファイルをwp-admin等の任意の場所に配置して、実際にアクセスすることでフルパスが確認できます。

例えば:www.サイトURL/wp-admin/sample.php

※サイトURLの後は構築した環境によって多少ことなります。

【.htaccess】を作って配置する

メモ帳等で以下を作成します。

-------------.htaccess

AuthType Basic
AuthName “なんでも良い(半角英数字)”
AuthUserFile /…さっき調べたフルパス…/wp-admin(認証させたい場所)/.htpasswd
require valid-user

-------------

【.htpasswd】の場所は任意なのですが、上記では【.htaccess】と同じ場所に配置しています。

1行目と4行目はコピペで大丈夫です。

【.htpasswd】を作って配置する

ここではユーザー名とパスワードを書き込むのですが、暗号化が必要になります。

難しく考えないで以下のサイトで生成したものを貼り付ければ大丈夫です。

暗号化したパスワードを生成してくれるサイト

 

これらをサーバーの任意の場所にアップロードすればBasic認証が設置出来ました。

簡単だから最低でもBasic認証は設置しておこう!

これでもログイン回数制限が発動するようなら、Basic認証を抜けられているということになります。

想像以上に攻撃されていることになるので、もっと真剣にセキュリティ対策が必要でしょう。

管理画面へのセキュリティ対策を行っていない人がどのぐらい居るかは解りませんが、wpは想像以上に攻撃を受けているようです。

攻撃されていることにすら気が付いていない可能性があるので、とりあえず以下のプラグインを入れてみましょう。

ログイン試行回数を加えるプラグイン

ログイン試行回数を制限すると、いかに悪意のある者達がログインに挑んでいるのかが解ります。

毎日のように攻撃されていることが判明したならば、いつ被害にあうか解らない状態にあると考えられますね。

とりあえずサクッとBasic認証を設置してみては如何でしょうか。

他にもセキュリティ対策については沢山の角度から考えるべきだと思いますが、全く対策しないよりは絶対にマシですよ(;’∀’)

中野シスターズが凄い!商用フリーの3Dモデル

$
0
0

中野シスターズの3Dモデルが凄いです!

このクオリティーで改変可の商用フリーとは・・・!凄い!

商用フリーの中野シスターズ

商用フリーの中野シスターズ

詳しい利用規約は探せなかったけど※追記あり

つまり商用フリーで改変も出来て報告不要・・・ほぼ自由ですか!?

さっそく自作ゲームに使わせていただきますぞ!!

 

このキャラを使ってフリーガの無料素材にも応用できますね。

ポーズをとらせてこんなのをサクッと作ったり・・・

こんな広告素材を作ったり

こんな広告素材を作ったり

もしくはアレな感じなのもOK??

どこまでOKですか??

どこまでOKですか??

とりあえずTwitterでフォローしときました!

さすがに詳細も調べずに好き勝手な使い方をする勇気はございません。

でもカナリのレベルで好き勝手に使える素材なのではと想像しています!!

 

これからも目が離せないです!中野シスターズ!

公式サイト:商用フリーの3Dモデル!中野シスターズ

追記:readmeに禁止事項がありました!

readmeには以下のような重要な内容が書かれていました。

【利用条件】

  • どなたでも無料でお使いい ただけます。
  • クレジット表記やライセンスロゴの表示も不要です。
  • 利用申請や事後報告も必 要ありません。
  • 改変データの再配布も可能です。
  • 法人を含む商用利用の場合でも上記条件公序良俗に反するものでないこと。

【禁止事項】

  • 公序良俗に反するものでないこと。
  • 特定の信条、宗教、政治発言のために利用しないこと。
  • 弊社もしくは第三者に不利益を与える行為に利用しないこと。
  • 弊社もしくは第三者の信用や名誉を損なう行為に利用しないこと。
  • 改変データや中野シスターズを利用した作品が、当社の公式商品であるかのような誤解を招く利用をしないこと。
  • その他、当社が不適切と判断する行為に利用しないこと。

なるほど!気を付けます!

いかがわしい内容に使わなければ、ゲームのキャラに使ったりするのもクレジット表記なしの報告不要と解釈できますね!

素晴らしい無料データです!!

フリー素材アイドルのMIKA☆RIKAが滅茶苦茶使える!!

$
0
0

フリー素材アイドルってなんやねん?

読んで字のごとく、MIKAとRIKAの写真をフリー素材として使用できるグラビアアイドルです。

つまり以下のような広告を作るのも自由ということ!3秒で完成しちゃいます!!

早速FreeGAの広告を作ってみた

早速FreeGAの広告を作ってみた

 

おぉ!ただ字を入れただけなのにイイ感じですね(^^)

やはり写真が良いものだと簡単に良いものが作れます。

ロゴを入れると永久に使用可能

公式サイトのHow toによるとダウンロード期間は2015年の12月31日まで

使用可能期間は2017年の12月31日までとなっております。

 

だがしかし!以下のロゴを付けた場合は永久に使用可能だとか

MIKA☆RIKAの公式ロゴ

MIKA☆RIKAの公式ロゴ

これはもう今年中にガンガン作って永久に使い続けるしかないね。

ちなみにフリーガで再配布するとかはダメ!

ダウンロードの際には利用規約が表示されるので一読して理解しておく必要があります。

ビジネスや美容、体のパーツ等のカテゴリも充実

フリー素材を探すうえで重要なカテゴリ分けもサポート体制はばっちりでした。

折角なのでもう一つ作っちゃいましたよ~!

FreeGaの広告(MIKA☆RIKA)

FreeGaの広告(MIKA☆RIKA)

やっぱり写真が良いと5分もかからずに出来ちゃいます。

記事を執筆しながらもMIKA☆RIKAの魅力にひきこまれ始めていますよ(*´▽`*)

 

ちなみに音声素材も提供されているようなので、そちらを希望の方もMIKA☆RIKAを利用してみてはいかがでしょう。

 

MIKA☆RIKAの公式サイト

〚WordPressの画像を横並び〛css1行で管理も簡単な方法

$
0
0

wordpressで画像を横並びにする方法は多数ありますが、stinger5を使用している私にとって〚最も簡単で管理もしやすい方法〛をご紹介します。

画像を横並びにする

画像を横並びにする

※使用テーマによっては思い通りになりません。思い通りにならない場合、良ければテーマやサイトのURLを教えていただけると一緒に考えることができます。このような作業は好きなので気軽にご相談ください。

下準備としてメディアを追加で〚左寄せ〛

とりあえず横並びにしたい画像をすべて〚左寄せ〛にしてください。

画像を左寄せにする

画像を左寄せにする

この時点では横並びが失敗するはずです(ほとんどのテーマの場合)。

上の画像のように横並びにならない場合も慌てる必要はありません。

また、今回紹介する方法では最後の画像を〚配置なし〛に指示する必要があります。

最後の画像だけ配置なし

最後の画像だけ配置なし

これをしないと画像の後に続くテキストや意図しない画像まで横並びになってしまいます。

 

普段の作業はたったこれだけです。

 

なおcssの話ですが、ここで横並びを指示した画像には〚.alignleft 〛というクラスが付与され、最後の画像に使った配置なしの画像には〚.alignnone〛が付与されています。

あとは〚.alignleft{float:left}.alignnone{overflow: hidden}〛を追加するだけ

それだけです。シンプルかつ管理も簡単でしょ。

cssのどこかに以下の一行を追加すれば簡単横並びの完成です。

 

.alignleft{float:left}.alignnone{overflow: hidden}

 

もっと色々やりたいなら〚WP Canvas〛というプラグインを使うのも良いのですが、これだけのためにプラグインを導入して処理を重くしたくないという方には最適です。

最近は〚overflow: hidden〛によるfloatの解除が流行っているようなので便乗してアイディアをひねりました。

ぜひお試しあれ。


NGINXで外部DBのWordPress設定をしたらCan’t select database

$
0
0

最近は色々なサーバーで色々な試みをしているので色々な失敗を経験しています。

その中でも日本人のソースが足りないと感じたことの一つに、WordPressで外部ホストでのDBを使用する方法があります。

そうそう。初めて自宅サーバーで遊んだ時のOSがubuntuだったので、それ以外のOSに対するアレルギーがあったのですが、今はcentos7に浮気中です。ubuntu使ってると日本人の情報が少ないと感じることも多く、コピペプログラマーかつ日本人のサイトしか参考にしない(したくない)私にとって魅力的に映ったのです。

隣の芝生が青く見るだけかもしれませんね。

NGINXでdefine(‘DB_HOST’, ‘外部ホスト’);を設定したらエラー

NGINX構築時にエラーが出ると真っ先にブラウザキャッシュを疑う私です。物を失くしたときに盗難を真っ先に疑うタイプの私なので、NGINXに対しても在らぬ疑いをかけてしまうのですね。

しかし、99.999%はコードや作業手順で問題を発見します!

今回はwp-config.phpに問題があったようです。

今回やりたいこと

WEBサーバーとDBを分離してWordPressを構築する。

必要な設定を済ませてWordPressのインストール画面にアクセス

エラー発生:Can’t select database

  • ポートは間違いなく開放されている
  • ファイヤーウォールの設定にも間違いがない
  • wp-config.phpの内容でWEBサーバーのSSHからDBのMySQLにアクセスが可能
  • ログにも該当するエラーが見当たらない
  • 意味わかんないブッコロスゾnginx

問題となったwp-config.phpの内容

define('DB_NAME', 'wordpressdb');/**DBの名前*/
define('DB_USER', 'wordpressuser');/**DBのユーザー*/
define('DB_PASSWORD', 'passpass48');/**DBのパスワード*/
define('DB_HOST', '193.69.69.072');/**DBサーバーのIP*/
define('MYSQL_CLIENT_FLAGS', MYSQL_CLIENT_SSL);/**これないとSSLでアクセスできない*/
$table_prefix = 'orz_';/**これはwp_じゃない方がCool*/

結論・・・wp-config.phpを修正するよりも削除してやり直した方が良い

wp-config.phpを編集せずWordPress側で作った方が確実

いつもwp-config.phpを気楽に編集しながらWordPressのインストール画面にアクセスしていたのですが、今回に限って何度確認しても『Can’t select database』・・・

wp-config.phpを編集、確認しても解決しない。nginx.confとか全く関係ないとこまで疑ってド嵌り・・・

 

・・・数時間後・・・

 

wp-config.phpを消してWordpress側に任せたところ何事もなかったかのように成功。

 

外部DB内にwordpress用のテーブルも無事に作られていました。

まとめ

同じ失敗体験がGoogle(日本)にないとド嵌りする。

ログから該当するエラーが見つからない場合はnginxもphp-fpmも無実。

面倒くさい設定をした時こそ基本的なことに注意。

簡単に解決するのに頭固い自分に腹立つ。ブッコロスゾnginx(八つ当たり)

 

それよりIDCFクラウドのRDBどこいったんだろ?

IDCFクラウドとConoHaが2015年で最強!1点だけ注意

$
0
0

IDCFクラウドという一見マイナーなクラウド型のサーバーですが、私の中で世界一に決定しそうです。

小さく初めて大きく育てるならConoHaという素晴らしいサーバーもあります。同じぐらいCoolです!

まだ迷いはありますが、オブジェクトストレージをマウントした時の使い心地と10TBパックという面白いパックプランによってIDCFが少しだけ優位に立っています(自分のなかで)。

回線速い!料金解りやすい!無限ストレージ!優れた管理画面!

あれ?ConoHaのことかな??(IDCFの特徴と被る)

ConoHaなら+αでマシンスペックに対するコスパも良いようです。更に言うと全てにおいて従量課金がないし、2TBでも1万円/月のオブジェクトストレージ・・・やっぱConoHaにするかな(;´・ω・)

 

どっちも凄い!!

 

IDCFクラウドもConoHaも利用者のツボをついたサービスを安く提供してくれていて、しかもスケールアップ&スケールアウトが出来て拡張性にも優れているのですから非の打ち所がない(言い過ぎ?)。

管理画面なんて普段は真っ黒画面と戦ってるんだから無意味でしょ?と感じるかもしれませんがIDCFならファイヤーウォールの設定も管理画面で出来ちゃうし、mackerelとの連携でCPUやメモリの管理も一目で解る。管理画面上から問い合わせて管理画面上で対応してもらえる(しかも返事速い)。

個人的に楽だったのはs3cmd使わなくてもバケットの管理ができるオブジェクトストレージのUIがAWSのS3のような感覚で使えて便利です。

 

クリックでできることが多いと癒されますよ( ;∀;)

タイピングも遅いしコマンドも覚えてないしSSHなんて本当は嫌いですから。

 

オブジェクトストレージをマウントすればWordPressのメディアを無限にできる

実際にマウントしてみた感じだとアップロードは遅いのですが表示速度はそれなり。WordPressのプラグインで処理した場合だと実際に色々な不都合を経験してきたので、マウントして運用するメリットは大きいと考えています。s3fsあたりを使えば簡単に管理できました。

知らなかったのですが、ConoHaでもcloudfuseを使って実現できるのですね!?

色々と回り道してしまったけど、最終的にはIDCFとConoHaによるオブジェクトストレージ対決が決め手になりそうです。

想像以上に日本のサーバーが優れていた

世界には安くて優れたサーバーが沢山あると思い、有名どころは殆ど試してみたのですが、スペックやコストだけで比べても日本のサーバーは負けていません!むしろ勝っている!

フランスにはscalewayという面白いサーバーもありますが、スケールアウトだけで対応するにはCPUが弱すぎて不安です。

 

転送料を含むトータルコストで考えた場合、ConoHaとIDCFは世界でも突出した存在だと実感できました。

 

管理画面では不具合が多い(クラウド系サーバー共通)

これは日本でも海外でも体験したのでクラウド系のサーバー管理画面には共通の不具合が多いと思います。

特に海外だと孤立感がハンパないです。すぐに退会したいぐらい不安になります。

 

例えばIDCFで起きた一例

  1. IPアドレスを追加しようとした際にエラーが発生
  2. 何回やっても失敗する
  3. 実は裏で全て成功していた
  4. 金が掛かる!!早くIPを開放せねば!!
  5. エラー発生!開放不可能!
  6. 問い合わせるが土日だった・・・月曜まで無駄な課金が発生(;´・ω・)

scalewayでも表示が変になったり、IPの取得が出来なかったりしました。

ConoHaでの実例だとプラン変更に失敗して困りました。

 

管理画面は便利だけどSSH以上に慎重な作業をしないと、自分では対処できないだけに深刻な事態になってしまいます。

 

私事

IDCFとConoHaで迷い中ですが、IDCFの無料クーポンが余っているし再構築も面倒だし、そのままIDCFにしたい気持ちに・・・そろそろサーバー選定に疲れました。

それにしてもIDCFのRDBが全く見当たらない!!土日に作業したいのに土日に対応してもらえないジレンマ。

RDBが使えないのあれば、使えないことをハッキリさせたいです。RDBをあてにしないで構築して、あとで使えましたと言われるのが一番嫌。

ConoHaオブジェクトストレージをマウントしてWordPressでのメディア保存先にする

$
0
0

サクッとプラグインで実装するつもりでしたが断念しました。それ以上にマウントによるメリットも大きかったので、本日はOpenStack(swift)の勉強をすることにします。

とりあえずアヒルで確認しながら作業すると捗るかも!

サーバーの勉強をしている人なら、稼働させるぐらいは簡単な部類だと思います。幸いにも日本人の方がブログで資料を公開してくれているので、参考にしながら作業ができました。

しかしサーバーが起動不可能になる可能性があるので、必ずバックアップとってから作業してください。

cloudfuseを使ってオブジェクトストレージをマウント

日本一早くConoHaで実装した方のブログが参考になります。ただし、環境によってはサーバーが死にます!

s3fsと同様にマウント自体は簡単ですが、原因不明のエラーが発生すると半日掛かりの作業になる可能性があります・・・(と経験者の私が言っておこう)

ハマリポイントおよびマウントの手順

私の場合は無駄な勉強までしてしまったので半日掛かりでしたが、私より後に作業する人が同じ失敗をする必要はありません。世の中に失敗体験のブログが蓄積され、最終的にはコピペで作業できる情報が残されていけば幸いです・・・(とコピペプログラマーの私が望んでいます)

基本的には流連荒亡さんのブログをコピペ

ちなみに私の環境はCentOS7.1のConoHaの最安プラン、kusanagiテンプレートを使用して、NGINX1.9.6に変更しています。参考サイトの環境はCentOS6.5とのことなので、CentOS6.5~7.1まではコピペでOKでしょう。

以下、流連荒亡さんのページを保管する意味も込めてコードを置いておきます。(私のはWordPress用ですが基本的には同じ内容です)

準備からインストールまでのコード

 

必要パッケージをまとめてインストール

yum install libcurl libcurl-devel fuse fuse-devel fuse-libs libxml2 libxml2-devel openssl-devel gcc gcc-c++ make git

私の環境ではbzip2がなかったので以下も追加

yum install bzip2

pacoのインストールは参考サイトのまんま

 mkdir /usr/local/src/paco
cd /usr/local/src/paco
wget http://jaist.dl.sourceforge.net/project/paco/paco/2.0.9/paco-2.0.9.tar.bz2
tar xjf paco-2.0.9.tar.bz2
cd paco-2.0.9
./configure --disable-gpaco
make
make install
make logme

cloudfuseをインストールしてWordPressのメディアにマウント

まずはcloudfuseをインストールしてpacoの設定まで済ませます。

cd /usr/local/src/
git clone https://github.com/redbo/cloudfuse.git
cd cloudfuse
./configure
make
paco -D make install
/usr/bin/install -c cloudfuse /usr/local/bin/cloudfuse

catでもvimでも好きなのを使って、cloudfuseの設定ファイルを作ります。以下は例ですが、usernameとtenantはConoHaの管理画面で確認できます。

username-tenant-password

 

authurlについてはConoHaの管理画面でいうと、APIのエンドポイントにあるIdentity Serviceです。

 

 cd ~/

vi .cloudfuse

username=gncu123456789

tenant=gnct123456789

password=a1s23w5e5rr

authurl=https://identity.tyo1.conoha.io/v2.0

verify_ssl=True

パーミッションを変更しておきます。

 

chmod 600 ~/.cloudfuse

これで cloudfuse /マウントしたいパス/ を実行すればマウントできるはずです。

以下はConoHaのkusanagiを使用している場合の例です。

cloudfuse /home/kusanagi/hogehoge/DocumentRoot/wp-content/uploads

 

私はこの時点でフォルダが空ではなかったのでエラーが出ました。
cloudfuse -h で確認したところ -nonempty というオプションで回避できそうでしたが、私は空にして再挑戦したので未確認です。

ここまでで問題がなければ df -kh | grep cloudfuse でマウントされていることが確認できるはずです。

本番用に自動マウントの設定と不具合の解消

本番では手動でマウントしないと思うので重要なのはここからです。ちなみに現時点では権限問題が発生しているかもしれません。その辺りの問題も解消しながら自動マウントを設定していきます。

自動マウントの設定を追加

以下のコマンドで編集画面にはいります。

vi /etc/fstab

以下の設定を一番下にでも追加しましょう。

cloudfuse /home/kusanagi/hogehoge/DocumentRoot/wp-content/uploads fuse username=gncu123456789,tenant=gnct123456789,password=a1s23w5e5rr,authurl=https://identity.tyo1.conoha.io/v2.0,verify_ssl=True,_netdev,allow_other,defaults  0 0

 

 

ここは環境によっては重要なオプションを追加しました。実は参考サイトのコードをコピペして使ったら、私の環境ではサーバーが起動不可能になってしまったのです。
この参考になったのはCHANGE MAKERSさんのブログです。

_netdevはネットワーク起動後にマウントさせるというオプションらしく、これがないとサーバーが起動不可能になる可能性を秘めているとのことです。

それとallow_otherですが、私の環境ではマウント後のフォルダが権限不足になり編集不可能な状態に陥ったのですが、このオプションを追加することにより権限が正しく認識されるようになっています。

 

以上です!お疲れ様でした。

マウント状態の場合は一度以下のコマンドで解除しましょう。

umount /home/kusanagi/hogehoge/DocumentRoot/wp-content/uploads

 

 

最後に以下のコマンドを実行すれば自動起動まで完了です。

※reboot後に他の問題が発生しても自己責任でお願いします。ぜひ問題を解決して情報を共有しましょう!

mount -a

おまけ:アンマウントできねー

本来であれば以下のコマンドでマウントを解除します。

umount /home/kusanagi/hogehoge/DocumentRoot/wp-content/uploads

でもdevice is busyというエラーがでることがあります。

そんなときは・・・

umount -l /home/kusanagi/hogehoge/DocumentRoot/wp-content/uploads/

-lオプションを付けた方が賢いらしいです。参考サイトの綾小路龍之介さん

おまけ:ポストIDごとにフォルダ分け

参考にしたのは、くろねこハッピー工房さん!この方も天才でしょう。こんなコードを数分で書ければコピペプログラマーなんぞ続けていないんだけどなぁ( ;∀;)

このフォルダー構成は私の思い描いたシステムにピッタリはまりました!ありがたく使わせていただきます<(_ _)>テーマのfunction.phpで使用します

function wp_plupload_include_attachment_id( $params ) { 
 global $post_ID; 
 if ( isset( $post_ID ) ) 
 $params['post_id'] = (int) $post_ID; 
 return $params; 
} 
add_filter( 'plupload_default_params', 'wp_plupload_include_attachment_id' );

function wp_post_id_upload_dir( $args ) {
 $post_id = $_REQUEST['post_id'];
 if(!empty($post_id)){
 $newdir = '/' . $post_id;
 }else{
 $newdir = '/unknown_id';
 }
 $args['path'] = str_replace( $args['subdir'], '', $args['path'] );
 $args['url'] = str_replace( $args['subdir'], '', $args['url'] ); 
 $args['subdir'] = $newdir;
 $args['path'] .= $newdir; 
 $args['url'] .= $newdir;

return $args;
}
add_filter( 'upload_dir', 'wp_post_id_upload_dir' );

まとめ

天才の方々がブログを残してくれたため、たった一日の勉強で可能性が広がりました。

またOpenStackというオープンソースのおかげで、思い描いたシステムも想像以上に早く実装できました。

プラグインの不具合に悩まされたり、もっと簡単な方法を模索したりすることで『無為に長い時間を消耗する』よりは、ちょっとした勉強が一番の近道になるケースも多いのかもしれませんね。

 

ちっぽけなコピペプログラマーですが今日も幸せです。

利用させてくださった方々に心より感謝申し上げます!!

オブジェクトストレージのマウント手順を決めた【s3fs】【cloudfuse】

$
0
0

コピペプログラマーの私でもレスキューモードだけは頻発させたくありません。

マウントはetc/fstabを扱う繊細な作業なので、手順を覚書にしておきます。

風邪ひいて辛いので簡潔にいきます。

①サーバーを確実に再起動、②再起動前に確認

今回の要点は上の2点です。

特に①の対策を怠るとSSHも繋がらなくなりレスキューモードで修復する必要がでてくるので忘れないようにしたいです。

etc/fstabでは_netdevのオプションを追加する

これは世の中の方々は大抵していないのですが、環境によってはサーバーが起動しなくなります。

私は4つのサーバーでs3fsとcloudfuseを試したのですが、いずれも一回目は_netdevを付けないで試してみました。

 

結果:4回ともレスキューモードを起動する羽目にあいました

 

私のサーバー構築方法だと必須のオプションのようです。

※万が一、レスキューモードが必要になった場合は+8さんあたりを見ておけば大丈夫でしょう。

以下、自動マウントの設定

cloudfuseでwordpressをマウントする例(conohaオブジェクトストレージ)

vi /etc/fstab

cloudfuse /var/hogehoge/wp-content/uploads fuse username=gncu123456789,tenant=gnct123456789,password=a1s23w5e5rr,authurl=https://identity.tyo1.conoha.io/v2.0,verify_ssl=True,_netdev,allow_other,defaults 0 0

s3fsでwordpressをマウントする例(idcfオブジェクトストレージ)

vi /etc/fstab

s3fs#hogebaket /var/hogehoge/wp-content/uploads fuse allow_other,_netdev,nonempty,url=http://ds.jp-east.idcfcloud.com 0 0

 

_netdevはマウントの順番を後にしてくれるらしく、これをしないとサーバーが起動不可になりました。

allow_otherは仮想マシンの全ユーザーにアクセス許可するらしいのですが、これをしないと書き込み権限の反映などが上手くいきませんでした。

nonemptyはマウント先が空じゃない場合に必要なオプションです。無くてもOKな環境もあったのですが、必要な時もありました。

再起動する前に設定が上手くいっているか確認する

_netdevをつけておけば再起動は成功すると思うのですが、設定が間違っているとマウントされません。

手間なので再起動する前に試します。

まずアンマウントします。

umount /var/hogehoge/wp-content/uploads

 

あとは確認

mount -a
df –h

これでTB規模のバカでかいドライブが認識されていなければ再起動したところでマウントされないはず。

/etc/fstabを見直して何度もトライすれば、再起動の手間が省けます。

 

まとめ

今回は忘れると面倒くさい内容を改めて覚書にしました。

本記事を踏まえてIDCFのマニュアル前回の記事を参考にすれば今後も機械的にコピペを遂行できるはずだ(-。-)y-゜゜゜

webGLゲーム対応のアップローダーサイトを作った(IDCFオブジェクトストレージ)

$
0
0

Unity5のwebGLプレイヤーのことです(旧式プレイヤーも可能ですが推奨しません)。zipで上げてサーバー上で展開し、iframeやLightBox別窓で表示させているので、UE4とかゲーム以外でも同じように表示される仕様(になってると思う)です。

webGLアップローダーのmuut2015-11-23

メインサイトのFreeGAはConoHaのオブジェクトストレージを使うことに決定したのですが、IDCFクラウドのオブジェクトストレージって50GBも無料なんですよね。

折角なので簡単なサブサイトを半日ぐらいで作って、オンライン限定のゲーム共有サイトにしました。

ゲームをオブジェクトストレージ上で共有してサイト内で遊ぶサイト

サブサイトとはいえ1年ぐらい前から実現したかった内容なんですよ。長期間の試行錯誤を続けてきたものの、残念ながらFreeGAとは相性が悪かったので分離した形になります。

サイトのコンセプト

UnityやRPGツクールMVを扱うゲーム制作者が主なターゲットです。

スマホゲームとPCゲームの検索を明確に分けてプレイヤーの利便性も重視しています。

 

ゲームの制作者はWEBブラウザ用にビルド済のデータをZIP形式でアップロードし、ユーザー側はサイト内でプレイします。

 

最大アップロードサイズは400MB付近で様子を見ます。それ以上のファイルはフリーガにてダウンロードゲームとして公開してください。

muutによる高機能掲示板つき

これはオマケですが、あまりに素晴らしいシステムだったので導入しています。

muutでは与えられたコードを一行追加するだけで、とても高機能な掲示板が構築されます。サーバー負荷も小さく、運営に困るような制限もありません。

まぁ、muut自体がなくなったら使えなくなっちゃうのでメインサイトには使えませんがね。

以下はサイト制作に関する技術的な話

技術的な内容については1年以上も前から試行錯誤を続けてきたことですが、オブジェクトストレージをマウントできるようになったことで急加速的に実現されました。

基本はs3fs、Policy設定でつまずいたからs3cmdも併用

オブジェクトストレージといえばamazonのS3ですが、同じノウハウで扱えるサービスも増えてきました。

当分はIDCFオブジェクトストレージの無料枠内で運営していきますが、それを超えるぐらい成長する日が訪れるのであれば喜ばしいことですね。

s3cmdでPolicyの基本設定

s3fsでのパーミッションだけでOKかとも思ったのですが、403エラーで無理でした。問題の切り分け方法を画一できていないので潔く諦めます。

それに一番怪しいのは、s3特有のPolicyでしょう。

s3fsでの設定方法を知らないのでs3cmdで対応します(他の方法があれば教えて欲しいです)。

親切なことにIDCFのサイト内に解説が載っているので大丈夫ですね(^^♪

s3cmd setpolicyでUnicodeDecodeError

やばい!ascii関連のエラーが出た!!文字コードとか良く理解してないっす。

Problem: UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe2 in position 101: ordinal not in range(128)

結果:色々やったが的外れ

IDCFさんが用意してくれているPDF内で、下記の赤記号部分に問題を発見

{
“Id”: “Policy1381122551879”,
“Statement”: [
{
“Sid”: “Stmt1381122547899”,
“Action”: [ “s3:GetObject” ],
“Effect”: “Allow”,
“Resource”: “arn:aws:s3:::testbucket/*”,
“Condition”: {
“IpAddress”: {
“aws:SourceIp”: xxx.xxx.xxx.xxx/xx
},
“NotIpAddress”: {
“aws:SourceIp”: ” yyy.yyy.yyy.yyy/yy”
}
},
“Principal”: {
“AWS”: [ “*” ]
}
}
]
}

 

あれ!?

xxx.xxx.xxx.xxx/xx  →  “xxx.xxx.xxx.xxx/xx”だよね。

そもそも  ってどうやって入力するんだ!

 

実はIDCFさんからコピペすることが多いのですが・・・時々謎記号に変換された状態でペーストされます。

どの段階で問題が発生しているか解りませんが、まさにコピペプラグラマー殺しですね!!

所詮コピペプログラマー

いつでも殺される覚悟はしてきましたよ(´-ω-`)プログラマーニナリタイナー

 

ERROR: S3 error: 400 (MalformedPolicy): Policy has invalid resourceが発生

この変はケアレスミスです。

一つのIpAddress内で2つ指示したり、aws:SecureTransportを間違ってNotIpAddressの中で指示したり、IPアドレスの後の/24を忘れたり、”Resourc・・・・・・・・・たり・・・・・たり・・・・・・!

 

こんな短いコードで何回ミスしてるんだ!!

 

所詮コピペプログラマー

今回みたいにコピペを封じられたら、4行の中の3行は間違える自信があるよ( ̄ー ̄)

 

通信端点が接続されていません

エラーもなくなりポリシーも受理されたのに・・・全っ然見れない!!!

ついに最終奥義を使いました!!!

{
“Version”:”2012-10-17″,
“Statement”:[{
“Sid”:”PublicReadGetObject”,
“Effect”:”Allow”,
“Principal”: “*”,
“Action”:[“s3:GetObject”],
“Resource”:[“arn:aws:s3:::example-bucket/*”
]
}
]
}

これは全ての人がアクセスできてしまうというamazon公式の禁断コードです!

 

が!通らない!!!!!

 

もう完全に終わってる・・・・・・・・・・・・・・・・・・・

 

完!!

 

 

もう諦めて御粥作ってたのですが(風邪気味)、ふと、wordpressのメディアファイルも見れなくなってることに気が付きました。

 

根本的に変だと思い df -k で確認すると『通信端点が接続されていません』のエラーを発見。

 

 

えええええええぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇぇええええ?

 

・・・・・・・・・・

 

ええええええええええええええええええええええええええええええええええええええええええええええ!!?

 

ええ!?(ブチ切れ)

 

いつから見えない敵と戦っていたんだろう!!

s3fsでマウントしてるので、s3cmdをconfigureした辺りが怪しいのかも。

 

コンセントが抜けたパソコンを電気屋さんに修理してもらったかのような感覚です。

 

『umount』 して『s3fs バケット名』で解決

『umount』 して『s3fs バケット名』で解決・・・・しない!!

 

びっくりしたけど、2回連続でumountしたら解決したっぽい。

おそらく2回マウントされていたのだと思います。2回マウントすると同じのを2重にマウントしちゃうのか。

 

他にもいろいろありましたが、必死すぎて覚書にしている余裕もありませんでしたね。

いつも思うけど、一番肝心な大変だった内容ほど覚書に残せないものです。

FreeGA.netとmuut.freega.netをよろしくお願いします

muut.freega.netはサブサイトですがアイディア自体は一年越しに実現されたものなので思い入れがあります!

もちろんFreeGA.netについては一生運営する強い覚悟を持ちながら制作しているので、何年掛かろうと必ず素晴らしいサービスに成長させます。

サーバーの勉強をしていると面白そうなオープンソースなんかも多くて色々やってみたくなるのですが、そこはグッとこらえて最低限のジャンルに絞ったつもりです。

今後も規模は拡大せず着実な運営を続ける方針ですが、ご意見などがあれば気楽におっしゃって頂けると幸いです。

年内はFreeGAmuutもベータ版での運営になると思いますが、会員登録や利用をお待ちしております。

Viewing all 44 articles
Browse latest View live