福岡県筑後市のホームページ制作会社

株式会社はねオンライン

佐藤

はじめてのJavaScript~ジャンケンゲームを作ってみた!~

2018年3月8日

アプリ開発プロジェクトに向けて、JavaScriptを基礎から勉強中の佐藤です!

ドットインストールのJS無料講習を受講し終えた記念に、ジャンケンゲームを作ってみました。幼少時よくやった懐かしのアーケードゲーム『ジャンケンマン』(今でもあるところにはあるらしい)を意識してます。

ジャンケンに勝ってコインを5枚集めよう!
WIN:コイン+1 LOSE:コイン-1

START
One More!
GAME OVER
GAME CLEAR

var coin1 = document.getElementById('coin1'); var coin2 = document.getElementById('coin2'); var coin3 = document.getElementById('coin3'); var coin4 = document.getElementById('coin4'); var coin5 = document.getElementById('coin5');

var coinNum; var comNum; var isStarted;

//起動時コインは3枚表示 coin4.className = 'hidden'; coin5.className = 'hidden'; coinNum = 3; //スタートボタンが押されているか否か isStarted = false;

start.addEventListener('click', startSlot); oneMore.addEventListener('click', startSlot); oneMore.addEventListener('click', reset); gu.addEventListener('click', guFunc); gu.addEventListener('click', btnFunc); choki.addEventListener('click', chokiFunc); choki.addEventListener('click', btnFunc); pa.addEventListener('click', paFunc); pa.addEventListener('click', btnFunc);

reset();

//コインの枚数管理 function coinState() { if (coinNum < = 0) { coinNum = 0; gameOver.className = 'active'; oneMore.textContent = 'REPLAY'; oneMore.addEventListener('click', function () { //ページリロード location.reload(); }) } else if (coinNum >= 5) { clear.className = 'active'; oneMore.textContent = 'REPLAY'; oneMore.addEventListener('click', function () { location.reload(); }) } switch (coinNum) { case 0: coin1.className = 'hidden'; coin2.className = 'hidden'; coin3.className = 'hidden'; coin4.className = 'hidden'; coin5.className = 'hidden'; break; case 1: coin1.className = 'active'; coin2.className = 'hidden'; coin3.className = 'hidden'; coin4.className = 'hidden'; coin5.className = 'hidden'; break; case 2: coin1.className = 'active'; coin2.className = 'active'; coin3.className = 'hidden'; coin4.className = 'hidden'; coin5.className = 'hidden'; break; case 3: coin1.className = 'active'; coin2.className = 'active'; coin3.className = 'active'; coin4.className = 'hidden'; coin5.className = 'hidden'; break; case 4: coin1.className = 'active'; coin2.className = 'active'; coin3.className = 'active'; coin4.className = 'active'; coin5.className = 'hidden'; break; case 5: coin1.className = 'active'; coin2.className = 'active'; coin3.className = 'active'; coin4.className = 'active'; coin5.className = 'active'; break; } }

//スタート時とリセット(ワンモアを押した)時 function reset() { result.className = 'hidden'; oneMore.className = 'hidden'; gu.className = 'no-push'; choki.className = 'no-push'; pa.className = 'no-push'; gameOver.className = 'hidden'; clear.className = 'hidden'; }

//gu-choki-paボタン共通処理 function btnFunc() { if (isStarted === false) { return; } this.className = 'pushed'; oneMore.className = 'active'; isStarted = false; setTimeout(coinState, 500); }

//スロット処理 function startSlot() { isStarted = true; start.className = 'hidden'; var id = setTimeout(startSlot, 50); //じゃんけんボタンを押したときの処理 function stopSlot() { clearTimeout(id); }

comNum = Math.floor(Math.random() * 3); console.log(comNum); switch (comNum) { case 0: comHand.src = "/wp-content/uploads/2018/03/gu.png"; break; case 1: comHand.src = "/wp-content/uploads/2018/03/choki.png"; break; case 2: comHand.src = "/wp-content/uploads/2018/03/pa.png"; break; } id;

gu.addEventListener('click', stopSlot); choki.addEventListener('click', stopSlot); pa.addEventListener('click', stopSlot); }

function guFunc() { if (isStarted === false) { return; } if (comNum === 0) { drawFunc(); } else if (comNum === 1) { winFunc(); } else { loseFunc(); } }

function chokiFunc() { if (isStarted === false) { return; } if (comNum === 0) { loseFunc(); } else if (comNum === 1) { drawFunc(); } else { winFunc(); } }

function paFunc() { if (isStarted === false) { return; } if (comNum === 0) { winFunc(); } else if (comNum === 1) { loseFunc(); } else { drawFunc(); } btnFunc(); }

// 勝ち function winFunc() { result.className = 'active'; result.textContent = 'WIN'; coinNum++;

} // 負け function loseFunc() { result.className = 'active'; result.textContent = 'LOSE'; coinNum--;

} // あいこ function drawFunc() { result.className = 'active'; result.textContent = 'DRAW'; }

})();

拙いですが以下ソースコードです。本当に基礎知識のみで構成されているので、同じように初心者の方々の参考にはなる、かも…!?

(来年の今頃には「なんて未熟なコードなんだ!」と嘆いていることでしょう…)

HTML

<div class="janken-box">
        <div class="coin-area">
            <table class="t-coin">
                <tr>
                    <td>
                        <img id="coin1" src="image/coin.png">
                    </td>
                    <td>
                        <img id="coin2" src="image/coin.png">
                    </td>
                    <td>
                        <img id="coin3" src="image/coin.png"> Continue reading 
続きを読む...

Live2D超入門~移動編~           

2017年12月30日

単純な移動・回転・拡大縮小の範囲内でLive2Dアニメーションを作りたい、という方に向けた「超入門簡易版チュートリアル」、
初回は超単純!移動編です。
フレームイン→移動→フレームアウトするはねぷーのアニメーションを作ってみます。
Live2D入門

レイヤーを調整したPSDファイルを準備

下準備として、psdファイルを準備します。今回動きがあるのは1か所のみなので、レイヤーは背景とはねぷー(動く部分)の2枚だけです。

Live2D Modelerでの作業

次は本番です。Live2DModelerを起動、「FREE版として起動」を選択します。
「ファイル」→「psdファイルインポート」から先ほど準備したpsdファイルを選択(またはファイルをキャンバス部分にドラックアンドドロップ)
psdファイルが読み込まれこのような画面になります。
Live2D入門
なんだか色々設定値がありますね。
しかし初心者にはなんのことだか分からないので、「OK」で先行っちゃいましょう。

キャンバスにpsdファイルで保存した状態の画像が表示されます。

左上のパーツタブからもPSDがインポートされているのが分かります。
PSDを展開するとレイヤー単位で分けられたオブジェクトが格納されています。
Live2D入門

今回動かすのは「はねぷー」のみなので、さっそく「はねぷー」オブジェクトを選択しましょう。
Live2D入門

フレームイン→フレームアウトの流れを作りたいので、はねぷーをフレーム外へ移動させます。
十字キーが表示されている状態で、shiftを押しながらドラッグすると水平に移動します。
Live2D入門
これがアニメーションの最初の状態になります。

次にはねぷーオブジェクトにパラメータを設定します。
デフォルトのパラメータ名だと後から混乱しそうなので、パラメータ名を書き換えておきましょう
Live2D入門
「パラメータ設定」を選択

Live2D入門
「角度」を選択し「編集」

Live2D入門
任意のパラメータ名と数値を設定することができます。2点の動きの場合、0→1などの数値が分かりやすいと思います。

準備が出来たらオブジェクトにパラメータを付加しましょう。
パラメータが「0」の時に画面の右側から移動をはじめ、「1」の時に左側まで移動を終える、という風に設定します。

「はねぷー」を選択した状態でパラメータタブの[移動]ボタンをクリック
Live2D入門
今回は右から左という2点の動きなので、[2点挿入]をクリック。
Live2D入門
先ほど設定した0、1という数値が挿入されました。「OK」をクリック。

Live2D入門
2点を挿入したので、両端に二つの丸が表示されました。

左端の丸を選択すると0.00という値が、右端の丸を選択すると1.00という値が表示されます。

「1」の時点で、はねぷーを左端に移動させたいので、右端の丸を選択した状態(淵が赤くなります)キャンバスのオブジェクトを移動させます。
Live2D入門

移動パラメータの丸をドラッグで左右に動かしてみましょう。
キャンバスのオブジェクトがどのように移動するのか確認できます。
Live2D入門

これでLive2D Modelerの作業は終了です。
「ファイル」→「保存」で拡張子cmoxのファイルを保存します。

Live2D Animaterでの作業

Live2D Continue reading

続きを読む...

初めてのLive2D~1枚の絵が動き出す!次世代のグラフィックソフトウェア~

2017年12月5日

「自作のイラストを動かしてアニメーションを作りたい…でも何枚も絵を描く時間はない…」
そんなわがままな夢をかなえてくれるのがLive2Dというグラフィックソフトウェアです。
たった一枚のイラストから2Dアニメーションを作りだすことが出来るLive2Dはまさに夢の技術。近年幅広い分野で活用されています。
はねオンラインでは、スマートフォンアプリ「ひらがなの種」を開発するにあたって、このLive2Dの技術を使ってアニメーションを制作しました。

アプリ開発に携わる前の私には、photoshopを使った単純なgifアニメーション制作経験しかありませんでした。
そこで公式サイトのチュートリアルで一からLive2D操作を学ぶことに。
とても丁寧に解説されていてありがたい…こんな画期的な技い術が無料ソフトで使えるなんて素晴らしい!…

しかしその時強く思ったことが、

入門編にしては複雑過ぎない…?

もっとサルでもわかるように教えて…

ということでした。


入門チュートリアルのこちらの女の子、「シンプルちゃん」というらしいです。でも正直
初心者にとっては全然シンプルじゃない。
まばたきや小首をかしげる仕草は可愛らしいけれど、私がマスターしたいのは
右のものが左に移動するとかくるくる回り続けるとかそういう超単純な動きなのに!

これは後からわかったことですが、単純な移動回転のみの動作をさせる場合、チュートリアルのステップ2・3にあたる
・描画オブジェクトをパーツに振り分ける
・ポリゴンを整える
といった操作はまず必要ありません
特にポリゴンの編集は初心者には感覚的に分かりづらく、躓いてしまう可能性があります。
なので最初の段階では飛ばしてしまって差支えないと個人的には思います。

そこで単純な移動・回転・拡大縮小の範囲内でLive2Dアニメーションを作りたい、という方に向けた「超入門簡易版チュートリアル」を次回の記事で解説していきたいと思います。

続きを読む...

和泉プロパンとはねオンラインが共同開発!ゲームアプリ『ひらがなの種』配信開始!

2017年11月9日

大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』

和泉プロパン住宅設備有限会社システム開発部のIZUMIPJ Appsと私たちはねオンライン株式会社は、大人も小さなお子様も一緒に楽しく遊べる育成ゲーム『ひらがなの種』を共同開発し、2017年11月1日よりiOSネイティブアプリの配信を開始いたしました。


>>アプリの詳細はコチラ


>>『ひらがなの種』ダウンロードはコチラ

はねオンラインでは本ゲームアプリで育成するキャラクター(主に「か行ステージ」以降に登場)のイラスト及びアニメーション制作、背景イラスト制作などを担当しています。

初回リリースに向けて計86点のイラストを制作し、そのうち77点にはLive2dを用いてアニメーションを付加しました。

Illustratorでのイラスト制作
大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』

Live2dでのアニメーション制作
大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』

全てのキャラクターをご紹介したいところですが、どんなものが育成されるかは実際にアプリで遊んだ時のお楽しみにしていただきたい…
そこで各ステージから私が特に気に入っているものを1点ずつご紹介させていただきます!

まずは「あ行」ステージから
『おくら』

大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』
意外とこの形状で生ることを知らない方も多いのでは?子どもたちの興味関心のきっかけになれば、と花やつぼみも丁寧に描画しました。
「か行」ステージから
『火星(かせい)』

大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』
右上でぴこぴこしてるのは火星人です。(※タコではありません)H.G.ウェルズが描いた由緒正しき(?)火星人のイメージです。(※決してタコではありません)
「さ行」ステージから
『セイウチ』

大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』
割と渋いイメージのある動物なので、かわいらしく描くためにまろやかな曲線を意識しました。(
結果ひよこまんじゅうのようなシルエットに…)
「た行」ステージから
『天使(てんし)』

大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』
現実でも滅多にお目にかかれない天使ちゃんはゲーム内でももちろんレアキャラです。最初金髪の巻き毛を描こうとしていたのですが、どうにもパンチパーマに見えてしまう(私の性格を反映している…?)ので最終的にツルっとなりました。
「な行」ステージから
『上り龍(のぼりりゅう)』

大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』
勇壮果敢な上り龍をいかにポップに描くか、試行錯誤の結果シンプルに落ち着きました。『ひらがなの種』のダウンロード数も天に向かって上昇しますように!
本アプリは「大人と子供へ少しでもコミュニケーションのきっかけになって欲しい」という想いのもと制作されました。
一つ一つのイラストやアニメーションも、「どの年代の方にもわかりやすく親しみやすいもの」を心がけています。

簡単操作で誰にでも遊べるので、子育て世代の方だけではなく、様々な年齢層の方にプレイして頂けます。お父さんお母さんと子供たち、おじいちゃんおばあちゃんとお孫さんたち、兄弟や友達の間でも、いろいろな人たちの間で『ひらがなの種』が楽しいコミュニケーションのきっかけとなることを願っています。

無料配信ですので、どうぞお気軽に遊んでみてください。
評価・レビューお待ちしております!


大人と子どもが一緒に遊べるゲームアプリ『ひらがなの種』


iOSゲームアプリ『ひらがなの種』ダウンロードページ

共同開発:
和泉プロパン住宅設備有限会社

続きを読む...

WordPressで記事を投稿する方法(写真・画像編)

wordpressで記事を投稿する方法(写真・画像編)

ブログ記事には内容に沿った写真や画像を入れることがとても効果的です。 たった一枚の画像があるだけで、ブログの内容やイメージがよりわかりやすくなります。

ここでは、WordPressを使ってブログ記事に写真や画像を挿入する方法を解説いたします。

主な流れ
  1. WordPressにメディア(画像)をアップロード
  2. タイトル・代替テキストを設定
  3. 表示形式を設定
  4. 本文に挿入

1.WordPressにメディア(画像)をアップロード

では、ブログに画像を追加してみましょう。まずは画像を表示させたい場所にカーソルを移動させて、タイトルの左下にある「メディアを追加」をクリックします。

WordPressにメディア(画像)をアップロード

上のタブで「ファイルをアップロード」を選択して、追加したい画像をこの上にドラッグドロップしてください。アップロードしたい画像ファイルを選択するという方法もあります。画像ファイルを選んで、「投稿に挿入」をクリックすればOKです。

WordPressにメディア(画像)をアップロード WordPressにメディア(画像)をアップロード

2.タイトル・代替テキストを設定

アップロードが終わると、写真に情報を入れる画面になります。

これは絶対に入れないといけないというわけではありませんが 検索上で有利にする為、ユーザーに親切にするために 「タイトル」「代替テキスト」ぐらいは入れておく事をオススメします。

タイトル」は写真にふさわしいタイトル 「代替テキスト」は画像が表示されない場合に表示される文字です。

タイトル・代替テキストを設定

3.表示形式を設定

続いて、その下にある「添付ファイルの表示設定」に移ります。設定項目は「配置」「リンク先」「サイズ」があり、クリックすると各設定が選択できます。

表示形式を設定

「配置」は中央を、「リンク先」はなしを選びましょう。最後の「サイズ」ですが、ブログに使う画像の標準サイズを事前に設定して、そのサイズを選ぶようにします。(設定方法は後述)

4.本文に挿入

最後に「投稿に挿入」をクリックすると、画像が追加されます。

本文に挿入

WordPress 画像サイズの設定

画像サイズの設定は、ブログに使う画像の標準サイズを事前に決めてから、左側メニューの「設定」→「メディア」で行います。

WordPress 画像サイズの設定

画像サイズはブログの外観に合わせて自由に決めてください。普通はメイン表示領域の横幅より少し小さいサイズに設定しますが、幅一杯まで画像を表示させてもOKです。

WordPress 画像サイズの設定

最後に「変更を保存」をお忘れなく。

続きを読む...

WordPressで記事を投稿する方法(テキスト編)

Wordpressで記事を投稿する方法

ブログの更新頻度はSEO(検索結果)に影響します。
ブログを頻繁に更新することはホームページへのアクセス増加、ひいては集客増加に繋がります。

そのためはねオンラインでは、お客様自身でも積極的にブログを更新して頂くことをお勧めしています。魅力的な投稿を作成して頂くため、私たちが日々全面的にサポート致します。

ここではワードプレスで記事をはじめて投稿する初心者向け操作方法について解説していきます。

ここで紹介する基本的な機能でも、素晴らしいページを作ることができます。まずは基本的な記事の投稿方法と、その際にこれだけは必ず設定してほしいという項目を解説します。

主な流れ

  1. ブログ管理画面にログイン
  2. 管理画面からブログ新規投稿
  3. タイトルの作成
  4. 本文の作成
  5. カテゴリーの設定
  6. プレビューで確認・公開

細かい設定はひとまず置いて、まずは文章の作成をスタートしましょう。ブログの更新を続けること、これが一番大事です。そして、更新に慣れたら少しずつステップアップしていきましょう。

1.ブログ管理画面にログイン

まずはWordPressにログインしてください。

http://あなたのホームページアドレス/wp-admin/

をブラウザの上側のURLを入力する部分に入れてログインページに訪問します。

わからない場合は、ホームページのトップページを表示させて、URLの後ろに「wp-admin」を追加すればOKです。このページはブックマークに入れておくと便利です。

ここから管理画面へログインします。弊社がお伝えしたユーザー名パスワードを入力し、「ログイン」をクリックしてください。

「ログイン状態を保存する」にチェックを入れると、次回からこの動作を省略することができます

Wordpressで管理画面へログイン

2.管理画面からブログ新規投稿

こちらがWordPressの管理画面(ダッシュボード)です。

WordPressの管理画面(ダッシュボード)

では、さっそく記事を投稿してみましょう。ブログ記事の投稿は、左メニューの「投稿」「新規追加」をクリックしてください。

Wordpressで「新規追加」

「新規投稿を追加」画面が表示されます

「新規投稿を追加」画面

3.タイトルの作成

まずはブログ記事のタイトルを入力します。

Wordpressでタイトルを入力

記事の内容に興味を持ち、本文を読んでもらえるかどうかはタイトル次第です。最初はこの3要素を踏まえてタイトルを考えるようにしてください。

  • 記事の内容が対象に伝わっているか
  • SEOにつながるキーワードが含まれているか Continue reading
続きを読む...

イラストレーターでキャラクターイラストを作ろう! ~使用歴6ヶ月のわたしでもここまでできたイラスト作成術~

2016年7月20日

Adobe〔アドビ〕の二大看板(だと個人的には思っている)イラストレーターとフォトショップと出会ってはや半年が過ぎました。

知れば知るほど奥の深いこの2つのアプリケーション…。「一生かかっても使いこなせる気がしない…」 と途方にくれることもしばしば。

ですが!

その奥深さでますますこの2つのアプリに夢中にさせられています(*^^*)

毎日発見を繰り返す中で、イラストレーターでキャラクターイラストを作成する際の自分なりの手順ができてきたので、備忘録としてここに書き留めておこうと思います。

非効率な点多々あると思いますがあくまで一例としてご参考になさってください(^^)

Continue reading
続きを読む...

思い出のタイピング習得

先日ニュースでこんな話題を耳にしました。 「最近の若い世代はタブレットに親しんでいるため、パソコン離れが進んでいる」 というのです。 若者たちの間ではフリック入力が当たり前で、キーボード入力なんて必要性を感じないのだとか。 かくいう私はと言いますと、 小学生高学年に始まったパソコンの授業が大好きで、 中学に上がるころにはブラインドタッチのようなものを習得していました。 私の世代でこれは結構珍しかったので、当時私は鼻高々に スタタカターン! とキーを打ち鳴らしておりました…。 (思い出すとものすごく恥ずかしいです…) なぜできるようになったかといいますと、 私には巨人の星があったからです! 正確に言うと、 「巨人の星タイピング養成ギプス」 というタイピング練習ゲームにはまっていたのです。 こちらが実物のCDソフトです。 物置から発掘してまいりました。 IMG_20160317_174748 10数年ぶりに起動してみましょう! わくわく あれ? blog0317 blog0317-2 起動できませんでした… …放っておき過ぎたようです。 巨人の星のストーリーをなぞりながらタイピングが習得できるという素晴らしいソフトだったので残念です(´・ω・`) プレイ画面はこんな感じ ↓ thumb300x225-images657067 ダウンロード ミスが続くと当然… b9f1fe60 ↑ 檄が飛び、ちゃぶ台も返ります(笑) 友人たちがゲームボーイでポケモンをゲットしているかたわら、 私は夜ごと一徹さんとタイピング修行に明け暮れていました。 おかげで割と早いうちにタイピング習得できたのです(^^) ありがとう巨人の星タイピング養成ギプス! そんな私が、今ではwebクリエイターを目指しています! (あんまり関係ないですね!) パソコンに苦手意識を持たずに済んだのはこのソフトのおかげだったかも…。 何事も楽しみながら習得していくことが大切ですね。 スマホ世代の若者にもキーボードの良さを感じてほしいです。
続きを読む...

はねもふがやってきたの巻 ニューキャラクターご紹介

みなさんこんにちは!

今日から新しい月になりますが、

はねオンラインにも新入キャラが入社(?)しました。

名前は 「はねもふ」 ちゃんです!

022601

はねぷーちゃんにもなついていて、いい相棒になってくれそうです。

よく眠ってます。

まだまだ謎多き生命体です…(笑)

はねもふと雲
今後は先輩はねぷーとともに、はねオンラインの広報に努めてもらう予定です。

皆さまニューキャラクター「はねもふ」をよろしくお願いします!
022202

続きを読む...

わたしのイラストレーター入門②

2016年1月14日

今日はイラストレーターの醍醐味である「パス」と「ベジェ曲線」を習得するべく

当社の看板キャラクター「はねぷー」ちゃんを描いてみました!

hane-poo01
線の少ない単調なイラストですが、実は複数のオブジェクトからできています。

試しに分解してみると

bara
こうなります!

このように見えない線までパーツとして描画することによって、自由自在に変形することが可能になります。

例えばお耳をめくってみたり…hane-poo3

ほっぺをつねってみたり…hane-poo4

前髪を切ってみたり…hane-poo5
いろんなことができちゃいます♪

photoshopのアニメーション機能と組み合わせれば、動かすことも!
正面ぷーanime
「パス」ってすごい!

想像以上に柔軟なツールだと実感しました。

まだまだ慣れないので編集も根気が要りますが(*_*;)

着せ替え遊びのようで楽しい作業です(*^^*)

使いこなせればweb制作においてもきっと役立つはず!

イラストレーターのパスツール、引き続き勉強していきたいと思います。

続きを読む...