とにかく簡単にグッズ作成! SUZURIを使ってみました。

在庫リスクなし!オリジナルグッズを作って販売できるWebサービスまとめ

やることはグッズのデザインと値段を決めるだけ!
作成〜発送まで請け負ってくれるサービスのご紹介。

01

今回はSUZURIを実際に使ってみました。

SUZURI
https://suzuri.jp/

※ご利用の際はサイトの規約などをご確認ください。
※2015/09/30現在の情報です。

続きを読む とにかく簡単にグッズ作成! SUZURIを使ってみました。


WordPressのテーマ選びに悩んだ時は!

ホームページ制作をしている方は、一度くらいは使った事がある……と思う
『WordPress』

今まで、触った事が無かった方だと
『どのテーマを使ったら良いのか』『どのテーマが目的のデザインに合っているのか』など
イロイロと悩む事があるかと思います。

そんな時には、一番シンプルで分かりやすいテーマを使って構築するのが一番ではないでしょうか。
理解できない機能満載のテーマでは、何かあった場合の問題点を探すのにも時間がかかってしまいます。

では、テーマは何を使うか?
私が一番オススメするテーマが

『WPMEMO basic』
WPMEMO_basic

『無料WordPressテーマ「WPMEMO basic」を公開しました。』

テーマの特徴
WordPress3.0以上対応
IE6,IE7, IE8, IE9 , Firefox, Chrome,Safariで動作確認済み(ただし、IE6はカスタムメニューのドロップダウンが動作しません)
カスタムメニューに対応
ウィジェットに対応
無料・商用利用可
※利用の際の注意点を必ずお読みください。

このテーマ、本当に必要最低限のファイルしかありません。
imageフォルダは有っても、中身は何も入っていません!!
今まで通常のHTMLサイトを移行するには”持ってこい”のテーマです。
そして、WordPressの構造を学んだり、オリジナルテーマを作る時の基礎にもなりえます。
レスポンシブなサイトを構築しようとした場合でも、好きな物を組み込みながら制作できますので
WordPressに慣れている方も、簡単に使う事ができると思います。

もし、テーマ探しで悩んでいるようならクセの少ないテーマを使って構築してみてはいかがでしょうか。


「CSSだけでマウスオーバーでアニメーションしてくるキャプション」をやってみた

こんにちは。yasaiです。

シルバーウィーク突入ですね!
みなさんはたくさん休めそうですか?

1509css_caption

Ri-mode Rainbow様のブログで「画像にマウスを乗せると下からスライドして出てくるのをCSSだけで設置」というのがあったので、勉強がてら僕もやってみました。

Ri-mode Rainbowさんでは、マウスオーバーするエリアを設けてやっておられましたが、僕のは画像の親ボックスにマウスオーバーしたら画像がスライドしてくる仕掛けです。

sc20150919
【DEMO】

HTML

親要素を.photo、その中に画像と、キャプション用、キャプションというよりいろいろコンテンツを使えるように.captionでマークアップします。

CSS

※sassで書いてます。こちらの方が見通しが良い気がするので。

大まかにレイアウトの部分を抜粋しました。

要点は、

  • 親要素.photoを「overflow:hidden;」にして、表示エリア以外は非表示にする。
  • imgは親要素に対し100%にしたい。
    これは、画像要素の大きさのキャプションを表示しているわけではなく、親要素に対してのキャプション部分の大きさとしているため。上のCSSだと親要素よりも画像が小さかった場合にキャプション部分が画像からはみ出してしまいますね(汗)
  • キャプション部分は絶対配置で配置し、「top:100%;」で親要素の表示エリアからはみ出させて非表示っぽく。

です。

動作部分としては、

親要素はマウスオーバーされたときに、transitionを使ってtopの値を0までアニメーションさせています。

.captionのheightとhover時のtopの値を変更すれば、画像全体を覆わない高さのキャプション(帯っぽいやつ)など、応用はできそうです。

 

今回はちょっと軽めだけどこの辺で。こういうのやってるとCSSでいろいろ表現できるようになっていった覚えたてのころの気持ちが蘇りますね。CSS楽しいなぁ。

sassで書いてしまったので、CSSのリンクも載せておきますね。

150903image_caption

 

今回参考にさせていただいたRi-mode Rainbow様、ありがとうございました!!


バスケットボールスピリッツ電子書籍版販売開始

雑誌「バスケットボールスピリッツ」の電子書籍版がAmazon Kindleストアで販売されています。
ただ今発売記念キャンペーン実施中!
詳細は下記からご覧ください!!
banner150914_011
合わせてこれまでのバックナンバーの内容を紹介するページもできてます。
ちなみに皆さんは何で電子書籍読みますか??
専用の端末?スマホ?タブレット?

【Play Back バスケットボールスピリッツ】明日18日ついに電子書籍版が発売される、「バスケットボールスピリッツ」。今回はこれまでに発売されたvol.1〜5までを振り返ってみましょう。…

Posted by バスケットボール・スピリッツ on 2015年9月16日

皆さまより熱い希望をいただいておりました「バスケットボールスピリッツ」電子書籍版がついに発売決定!!いつでも、読みたい所で、お手持ちの端末で!発売日は9/18(金)、Amazonにてお買い上げいただけるようになります!今回の発売を記念して、9/18(金)〜24(木)電子書籍発売記念キャンペーンを実施します!!http://www.bbspirits.com/news/ebookd_kindle/

Posted by バスケットボール・スピリッツ on 2015年9月14日


WordPressの高速化(初級編 EWWW Image Optimizer)

サイトの高速化に取り組む仕事があったついでに、自分たちのブログがどんな状況か、
googlepage speed Insightsを見てみたところ、

speed001

0/100

驚異の0点。はじめて見ました。ひどい。

現状、このブログは素のWordPressttwenty fiftyの組合せで、きわめてプレーンな状態です。しかし、google様には問題だらけと言うことで、多くの指摘をうけました。

中でも、一番の心当たりとして、画像の最適化があります。メンバー皆が好きなように画像を貼りまくった記事をアップしていることから、かなり影響がありそうです。しかし、画像の最適化のために結構な枚数の画像をFTPでダウンロードしてから、処理の後、再度アップするのはかなり面倒です。

そこで今回はお手軽にプラグインを導入します。

ewww01

導入したのは、EWWW Image Optimizerです。プラグインページから新規追加でカンタンに導入できます。導入後はサイドメニューのメディアからBulk Optimizeを開き、「Start optimizing」を押すだけです。画像の数によっては、かなり時間が掛かりますので、そこだけは覚悟して押して下さい。

bulkoptimize

最適化が終わって、PageSpeed Insightsに再チャレンジ。

speed002

とりあえず、一気に25までスコアアップしました!(元が悪いと上げるのもカンタンです。)
そこそこ画像がたまっている環境ですと、いっぺんに処理できて楽です。オススメです。

他にも記事にしようかと、色々試したのですが、致命的では無くとも細々とトラブルが起きました。
特にキャッシュ系は環境を選びます。素の状態で、ほぼ問題なかったのは上記プラグインのみでした。

今回は検証のみだったので、お手軽なものを使いましたが、プラグインに頼らず、キャッシュや、DBの最適化などに取り組み、地道に改善してみたいと思います。

つづく。


Xcode 7のインストールから実機テストまで

h

Xcode 7でiOSアプリの実機テストが無料でできるようになりました。
デバイス登録の必要なく簡単な作業で実機テストできます。
インストールから実機テストまで試したので、その方法をまとめます。

 

前提条件

Xcode 7をインストールするにはMacOS X バージョン10.10(Yosemite)が必要です。
OS X バージョン10.9(Mavericks)では、インストールできませんでした。
また、Apple IDが必要ですので、無い方は取得してください。

1

 

Xcode 7をダウンロード

Xcode 7 beta6をダウンロードします。
下記のURLからダウンロードしてください。
https://developer.apple.com/xcode/downloads/

ダウンロードファイルが4GB近くありますので、通信環境をご確認の上、
ダウンロードを開始してください。

11

※2015/09/09現在 Xcode 7 beta6です。

ダウンロードボタンをを押すと
Apple Developerのログイン画面が表示されます。
10

お手持ちのApple IDを入力しSign inを押してください。
Sign inが成功すると、ダウロードが始まります。

 

インストール

ダウロードが終了したら、Xcode_7_beta_6.dmgを開きます。
Xcode_betaをアプリケーションにインストールします。
データ容量が大きいので、マシンのスペックによっては時間が掛かります。
2  3

インストールが終わりましたら、
Xcode_betaを開きます。
初回は、マシンのスペックによって起動まで時間が掛かる場合があります。

4

途中でライセンス同意のウィンドウが出たら、同意して進めていきます

無事に起動すると下記の画面が立ち上がります。

13

以上でインストールが完了です。

 

実機テストの為のプロジェクトの作成

実際にテストするために、テスト用のプロジェクトを作成します。
まず、Create a new Xcode projectをクリックします。

5

テンプレートを選ぶ画面になるので、iOSのApplicationから適当なテンプレートを選択します。

6

今回はテスト用でSingle View Applicationを使います。
選択したら、Nextボタンをクリックし次へ進みます。

7

プロジェクト情報入力する画面です。
テストなので、適当な文字を設定します。

Nextボタンをクリックしプロジェクトの保存先をしてします。

 

実機テスト

開発画面へ移ります。
テストですの最低限必要な項目を入力します。

8

① 読み込む端末のApple IDを入力します。
Apple Developerで使用したApple IDと違っても問題ありません。

② アプリが対応するOSのバージョンを設定します。
端末がiOS7で設定が8.0にすると読み込みができません。
端末のiOS以下の数値を設定しましょう。

ここでPCとモバイル端末をUSBで接続して端末を読み込みを行います。
初回は、時間が掛かると思いますので、焦らず待まちます。

端末の読み込みが終わったら

③ お使いの端末が表示されますので、選択します。

④ 再生を押すとビルドが開始され自動的にアプリが起動します。

 

端末にもアプリがインストールされて
しっかりアイコンが表示されています。

2015-09-09 16.01.18

以上のように
Xcode_7に端末情報を読み込めば簡単に実機テストができます。

iOSアプリ実装前にXcode_7をインストールし、自分用アプリを製作して使うこともできます。
是非、参考にしてください。

 

 


制作事例 社会福祉法人わかば福祉会様

ai

新発田市を中心に幼稚園と保育園を展開している法人様です。
入園者の父兄向けのサービスの向上のため、
ホームページのリニューアルを行いました。

公開 2015年9月1日
URL http://www.wakaba-net.ed.jp/ai/
●制作内容
・デザインの刷新
・CMSの導入