AGN Web! - AGN Web! BLOG

welcartでショップを作ろう 1

必要に迫られて、自前のショッピングサイトを大至急立ち上げなくてはならなくなったので、（そんなのばっかり）welcartを導入してみました。その後実際の運用まで、何回かに分けて解説してみます。

１．Wordpressを導入します。
思い切り省略します。各自導入しておくこと。
Wordpressの設置も難しいようだと、以降の作業は厳しいと思います。
無料のレンタルカートや、弊社のような業者に依頼することも検討して下さい。

２．welcartプラグインを導入する。
ワードプレスのダッシュボードからプラグイン→新規追加を選びます。

welcartを検索します。見つかったプラグインをインストール。
※説明文が英語ですが、日本のプラグインです。

有効化します。

うまくいくとダッシュボードのメニューが増えてます。

３．テーマをWelcartデフォルトに変更。
外観ページからデフォルトテーマを選択。

４．確認
トップページがショッピングサイトになりました！当然ながら商品はありません。
これでカートが設置できました。「ここまで」は簡単ですね。

あとは、ショップとしてオープンするまでに、
・ショップの基本情報設定
・送料などの設定
・決済方法の設定
・新規商品の追加
・見た目を何とかする。（標準テンプレート）
・カード決済について
など主に各種設定が残ってます。漠然とスタートすると躓くところです。
テストで商品だけでも追加してみたいところですが、説明が長くなること必須なので、次回にします。

続きます！

追記
取り急ぎ、テストしてみたい方は、商品を追加して下さい。
流れはこんな感じ。
・事前に配送方法を名前だけでも設定してください。
・公開時エラーが出ないように適当に項目を埋める。
・ダミー商品のカテゴリをおすすめ商品にする。
・するとトップページに商品が出てきます。

商品詳細ページです。

カートに入れてみます。

入りました！
ここまでは簡単なんですけどね。ここからが大変です。

Illustratorで手描き風

ベジェ曲線大好き、SAKAIです。

あとからでも修正もしやすい、少しだけ手描き風な表現を
Illustratorのブラシを使って試してみました。
①ブラシの準備

まずは線画用のブラシを作成します。
抜きの細い部分と墨だまりの太い部分を線幅ツールで調整しつつ作ります。

それにラフをかけたものをアートブラシに登録。
※ブラシ登録すると自動的にアピアランスが分割されるので、ブラシの元データはとっておきます。

これを

長いライン
中くらいのライン
短いライン
と、3種類用意しました。

ブラシ1種類だと、ラフのかかり具合がパスの長さで違ってきます。

また、ラフをかけないブラシで作成→ラフ
でも同様にできますが、
ブラシに処理をかける上で、曲線部分に妙な隙間ができてしまいます…

なので少し面倒ですが、描くイラストのパスの長さにあわせて、ブラシを作成します。

②線
滑らかになりすぎないようにパスを引いていきます。
ここでも線幅ツールを使用して、微調整します。

③着色
着色用のパスを作成
塗り残しやはみ出し部分を作ったり、線にブラシを適用したりします。

そんなこんなで完成！ハロウィンきりんくん（仮）。
・ブラシのラフを強めにかける
・さらに不透明マスクで、ざらざらした質感を追加
・着色に絵筆ブラシを使用

↑お好みに合わせてプラスすると、より手描きっぽさがアップします！

ショッピングサイトのまとめ3

最近、ストーブ前から離れられないhaneです。

第3回目はコストパフォーマンスが良い「カラーミーショップ」です。

特徴

「カラーミーショップ」は、GMOペパボ株式会社が運営するネットショップが開業できるサービスです。
デザインのカスタマイズ性があり、上級者の方は独自のデザインを組み込む事もできますが、
ホームページ作成経験の無い初心者の方は、用意されている様々なテンプレートから
好きなテンプレートデザインを選んで設定をして、
自分好みのショップをカンタンに作る事も可能です。

メリット

●無料期間が30日間あるので、じっくり試用できます。
●デザインのカスタマイズ性が高いです。
●デジタルコンテンツダウンロード販売機能、定期購入機能、
会員価格の表示機能など、低料金の割に機能が豊富です。
●運営元のサポートや助け合い掲示板が便利。
不明点が合っても解決しやすい環境が整っています。

デメリット

●スマートフォン用に設定できるフリーページの上限が10ページしかありません。
●決済契約で長い時間がかかる場合がある。

＜こんな店舗におすすめ＞
●月々の運営予算を抑えたい場合
●試しに始めてみたいが、サイトはしっかりと作りこみたい場合
●デザインにこだわりたい場合

とても初歩的なjQuery(僕のスニペットの中から)

お昼に外に出たら霰と霙(漢字で書くとなんだかちょっと迷いますね)の中間みたいなのに降られたyasaiです。

急に冬っぽくなってきまして、北国生まれの寒がりにはちょっと厳しい季節になってきました。

長袖をせっせと着込んで、早速着ぶくれしてます。

ちなみに、暑いのも苦手です。ずっと春がいいなぁ。

さて最近はWordPressのお勉強していて、先日久しぶりにjQuery書いたら、「あ、PHPじゃない…」と思うくらいアホになってたわけでして。

これはいかんなぁということで、ごく初歩的なことからjQueryのおさらいをしてみたいと思います。

基本的には適当に保存してあったスニペットからですが…

「$(document).ready()」と「$(window).load()」

僕もはじめは呪文のように覚えてましたが、$(document).ready()と$(window).load()の違いについて。

まずは使い方。


その1
$(document).ready(function(){
  //ここに処理
});

その2
$(window).load(function(){
  //ここに処理
});

その1

$(document).ready(function(){

//ここに処理

});

その2

$(window).load(function(){

//ここに処理

});

どちらも意味合いとしては、「～が完了したら」ってことですが、

ここではざっくりつかむと、$(document).ready()のほうは、「HTML読みこみ終わったら処理」。

$(window).load()の方は「描画とかも終わったら処理」。って感じですかね。

だから、画像の高さを取得したいとかいう場合は、$(window).load()の方をつかわないとダメなんですね。

タイミングを見計らって処理「setTimeout()」

これもよく使いますよね。


var time = 1000;
$setTimeout(function(){
  //処理
},time);
//timeは何ミリ秒後に処理が始まるか。
//1秒後だったら1000。

var time = 1000;

$setTimeout(function(){

//処理

},time);

//timeは何ミリ秒後に処理が始まるか。

//1秒後だったら1000。

アニメーションさせるときとかによく使いますねー。


$(document).ready(function(){
  $(&#39;#btn&#39;).on(
    &#39;click&#39; : function(){
      var time = 1000;
      $setTimeout(function(){
        $(#content).fadeOut(1500);
      },time);
    }
  );
)}

$(document).ready(function(){

$('#btn').on(

'click' : function(){

var time = 1000;

$setTimeout(function(){

$(#content).fadeOut(1500);

},time);

}

);

)}

例えばこんな感じですかね。これで、#btnをクリックして1秒後に#contentがフェードアウトします。

今回はとても初歩的なところですけど、自分のリハビリもかねて算数ドリルです。
やっぱりなんでも日々触ってないと抜けていくもんだぁと実感している最近です。
抜けていくのはあっという間なのに、覚えられるものが年々少なくなっているのは、これどういうことなんでしょう?(苦笑)

ショッピングサイトのまとめ2

最近、友達に「もっと笑えばいいと思うよ」といわれるhaneです。

第2回目は「STORES.jp」です。

特徴

STORES.jp （ストアーズ・ドット・ジェーピー）は、月額費用「無料」のプランと月額980円のプレミアムサービスの2つのプランから選択できます。
決済方法は、クレジットカード決済以外にもコンビニ決済、代金引換、銀行振込を利用する事が可能です。
無料のプランは公開できる商品数に制限があるので注意が必要です。

メリット
●デジタルアイテムのダウンロード販売ができます。
●無料プランでもスマートフォン対応ページが表示されます。
●無料プランでもクレジットカード決済機能が使えます。
●無料の商品撮影サービスが利用できます。

デメリット
●公開可能なアイテム数は5つまでしか表示できません
(管理画面からの商品登録は5商品以上できます)。
●プレミアムサービスに契約していないとアクセス解析、独自ドメイン機能が使えません。
●HTMLやcssが直接編集できないので、デザインの自由度は低いです。

＜こんな店舗におすすめ＞
●無料で使用したい場合
●カード決済やコンビニ決済を利用したい場合
●独自デザインにこだわらない場合
●手軽にダウンロード販売や海外販売を行いたい場合

AGN WEBのキャラクターを作りました

AGNのweb事業部、広報担当の「きりんくん（仮）」です。

・親しみやすいフォルム→卵形？

・新しい情報を発信、提案→アンテナ？

・広い視野→背の高いもの？

そんなイメージを混ぜ合わせたら、こんなキャラが誕生しました。

一見キリン…？というような外見ですが、
時には、首（？）をのばして情報を受信＆発信します。

どうぞよろしくお願いします！

手軽にLive配信

YouTube、ツイキャス、Ustreame…などなど

現在、動画をアップして見てもらうサイトと同郷に臨場感のあるLive配信サービスも増え

一般の人たちでも気軽に配信ができるようになりました。

配信用のアプリも増え、若年層はツイキャス（TwitCasting）を使う方が多く

オフィシャルなLive配信ではUstreame、YouTube ライブが使われているようです。

では、気軽にLive配信を行うとしたら何が一番良いのか？

やはり、iOSやAndroid OSなどの携帯端末に対応したアプリケーションを提供している物が一番簡単に行えます。

画質など特にこだわりがなく、Twitterアカウントがあるのであれば「ツイキャス」が一番早く使えるでしょう。

ツイキャスでは30分を1枠として配信でき、見ている側はコメントや独自アイテムを配信者に送ることができます。

この独自のアイテムの中にコインがあり、配信中に5枚を閲覧者からプレゼントされると自動的に1枠追加され＋30分延長配信ができます。

配信者の幅広い希望に対応し、気軽にもできるのがUstreameです。

携帯端末用の閲覧・配信アプリやパソコン用の配信用のアプリなどを提供していますので、気軽に配信が行えます。

Ustreameは「枠」の概念がなく、すきなだけ配信する事ができますので、定点観測などの配信もすることができます。

YouTube Liveは、専用のアプリがないため配信用のアプリやエンコーダーを用意する必要があるようで、まだまだ気楽に配信と言う訳にはいかないようです。

待ち歩きLive配信をしてみよう。

・配信サービスは「ツイキャス」か「Ustreame」で配信できるアプリを利用。

・携帯電話のデータ通信料に余裕があれば、そのまま配信を行います。

・期間限定であればデータ通信用モバイルWi-Fiを日割りでレンタル利用した方が良いようです。

以上の1つか2つの機器で配信ができますので、アクティブに動き回りながらの配信ができてしまいます。

配信は今後、もっと気軽に行えるようになると思いますが

配信する際はプライバシーと著作権を考えて配信を行って下さいネ。

こんにちは。「天高く馬肥ゆる秋」ですね！みなさんアジア大会みてますか？昔ちょっとだけスポーツしてたのでスポーツ観戦は大好きです。最近は見るばかりで、運動不足感がハンパないですが。。。さて今回はWPでパーマリンクの変更がうまくいかなかった際のお話です。今回制作した案件では、ちょっとどのようなurlにしたいか、はっきり決められないところがあったので、まずはローカル環境の方でテーマいじったり、ゴリゴリCSS書いたりしてました。ようやくこれでいくよって指示がでたので、ローカルの方で、パーマリンク変更してしめしめうまくいったぞ、くらいに思ってたのですが・・・

あれ、本番サーバーだとうまくいかない・・・

今回は進捗の関係上少し早めにデータを本番サーバへアップしてたんですねー(制限はかけた状態で) それでは本番の方もパーマリンク修正しましょーポチポチと。やれやれ。。･･･ん、404ページでた？404404404･･･あれれ？なんかまちがえたかなぁ？ポチポチ、404… 「お探しのページ」探してください、お願いします! ということで、もうまたいろいろ調べに行きました。調べてみると似たような経験された方やっぱりいらっしゃいました。

なんで404ページなの？

結論からいうと、今回はサーバの仕様だったんですね。ちょうどWPが4.0にアップデートされたタイミングで、本番のWPの方もアップデートしようとしたときに、なぜかうまくいかなくて、雰囲気的に何か書き込みがうまくいかないからアップデートできないって感じで。そういえばパーマリンクの変更の時って自動生成される.htaccessがあったような、と思い出しまして。

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase /blog/ RewriteRule ^index.php$ – [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /blog/index.php [L] </IfModule><code> </code>

1
2
3
4
5
6
7
8
9
10

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /blog/
RewriteRule ^index.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]
</IfModule><code>
</code>

↑こういうのが書いてあるやつですね。本番サーバのぞいてみたら。。。ないっ。。。ちょっと確認したわけじゃないんですけど、サーバの仕様の関係で書き込み関係がうまくいかなかったようで、 .htaccessが自動生成されなかったみたいです。なので、.htaccessは自作してサーバにアップ、またサーバ会社の方に連絡してWPのバージョンアップの方も無事にできるようになりました。 .htaccessの方は、パーミッションの設定もお忘れなく！

WordPressのお引っ越し（サーバー切替え）

この記事は1年以上前に投稿されました。
公開時の情報を元に記述してありますので、最新版に対しては内容が陳腐化している可能性があります。ご注意ください。

先日、サーバー切替えに伴い、Wordpressを引越しさせました。そのときの手順を記録しておきます。

基本情報
移動元　お名前.com　共用サーバーSD
移行先　Xserver x20
ドメイン管理　valuedomain
ワードプレスバージョン 3.92
現在の記事数　192件

条件として、
・ドメインはそのまま使う。（変更無し）
・閲覧できない時間を極力出さない。
・更新できない時間も極力出さない。

大まかな流れ
・移行元から移行先へワードプレスの全ファイルを移動。
・phpmyadminを使って記事データのエクスポート。
・phpmyadminを使った記事データのインポート。
・移行先で　wp-config.phpの書き換え
・ドメインのネームサーバー変更。
・ドメインが切り替わったのを確認して最終チェック→完了
で、完了となります。

１．ワードプレス本体のコピー
データのコピーワードプレス内のフォルダ、ファイルを全て移行先のサーバーに移動します。 FTPソフトでダウンロード、アップロードで問題ありません。投稿時添付していた写真やカスタマイズ済みのテンプレートなどは、このとき一緒に移動されます。

２．記事データのエクスポート
次にphpmyadminを使って記事データをエクスポートします。ウィジェットの情報などDB内に記録されている情報はこのとき出力されます。しかし！お名前のSDサーバーには、phpmyadminが入っていません。自分でインストールからやる必要があります。
幸いやり方は、こちらに書いてありますので手順通り進めます。
http://guide.onamae-server.com/sd/3_12_15_25/
上手くいかない場合は、少し古いバージョンを入れるといいかもしれません。私はver4.0.0を入れました。

導入できたら、事前にサーバーのコントロールパネルから、MySQLの情報を確認し、DBユーザー、パスワードでログインします

次にデータのエクスポートです。現時点までの記事を出力します。

メニューエクスポートから、実行ボタンを押すだけです。文字コードがUTF8出ない場合などは適宜設定を変更する必要があります。ファイルは****.sqlの形式でダウンロードされます。

３．記事データのインポート
続いて、移行先のXserverの方で、MySQLのデータベースを作っておきます。通常、新しくワードプレスを設置する時と同じです。次に作ったDBに先ほどエクスポートしたデータをインポートします。Xsever側にはphpmyadminがはじめから入っているので、ログイン後、２．でダウンロードしたファイルをインポートします。
通常、設定変更は不要です。エクスポート時と条件を合わせて下さい。

４．設定ファイルwp-config.phpの書き換え
最後に、wp-config.phpを書き換えてアップします。
DB名やDBホスト名など、新旧サーバーで違う点を書き換えていきます。
[php]
// ** MySQL 設定 – こちらの情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define(‘DB_NAME’, ‘DB名’);

/** MySQL データベースのユーザー名 */
define(‘DB_USER’, ‘DBのユーザー名’);

/** MySQL データベースのパスワード */
define(‘DB_PASSWORD’, ‘パスワード’);

/** MySQL のホスト名 */
define(‘DB_HOST’, ‘DBのホスト名’);

/** データベースのテーブルを作成する際のデータベースのキャラクターセット */
define(‘DB_CHARSET’, ‘utf8’);

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define(‘DB_COLLATE’, ”);
[/php]

５．ネームサーバーの切替え

あとはネームサーバーの切り替えです。今回は、お名前サーバーからの切り替えですので、以下のようになります。

dns01.gmoserver.jp
dns02.gmoserver.jp
↓
ns1.xserver.jp
ns2.xserver.jp

設定後はひたすら待ちます。

６．完了！チェック
新サーバーで新しいワードプレスが立ち上がります。ログインできるか。過去記事の写真などがきちんと入っているか。（リンク切れはないか。）等をチェックし、問題なければ完了です。
お疲れ様でした。

補足。
・プラグインでエクスポートも出来ますが、それだと記事だけです。
・最近はphpmyadminがはじめから入っているサーバーが多いので、もう少し楽です。
・同一サーバー内での移動だとDB関係の変更がないので、さらに楽です。
・お名前SDサーバーのphpmyadminは対象外ドメインの領域にインストールしても問題ありません。
・むしろ問題あった時に再チャレンジしやすいよう、別ドメインの領域にインストールすべきです。

順を追って、丁寧に作業すればそれほど問題が出るような所は無いと思います。面倒な人は弊社のような業者にお任せ下さい。

【Adobe Muse】コードを書かずにコンタクトフォームを作る

コードがよくわからない、苦手…な方でも、簡単にwebサイトが作れてしまうAdobe Muse。

Museの便利な機能「ウィジェット」を実際に使用した作成例を、何回かにわけてご紹介します。

今回は「コンタクトフォームの作り方」です。

続きを読む【Adobe Muse】コードを書かずにコンタクトフォームを作る