iPhoneだけでノマドワーク

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

CSSやjavascriptのcanvasでも作成した事がありますが、SVGのほうが比較的簡単に描く事が出来ました。

１の目

<svg width="40" height="40" viewBox="0 0 40 40">
<rect width="40" height="40" fill="#fff" stroke="#999" stroke-width="1" rx="6" ry="6"></rect>
<circle cx="20" cy="20" r="6" fill="red"></circle>
</svg>

２の目

<svg width="40" height="40" viewBox="0 0 40 40">
<rect width="40" height="40" fill="#fff" stroke="#999" stroke-width="1" rx="6" ry="6"></rect>
<circle cx="12" cy="12" r="4"></circle>
<circle cx="28" cy="28" r="4"></circle>
</svg>

３の目

<svg width="40" height="40" viewBox="0 0 40 40">
<rect width="40" height="40" fill="#fff" stroke="#999" stroke-width="1" rx="6" ry="6"></rect>
<circle cx="10" cy="10" r="3"></circle>
<circle cx="20" cy="20" r="3"></circle>
<circle cx="30" cy="30" r="3"></circle>
</svg>

４の目

<svg width="40" height="40" viewBox="0 0 40 40">
<rect width="40" height="40" fill="#fff" stroke="#999" stroke-width="1" rx="6" ry="6"></rect>
<circle cx="10" cy="10" r="3"></circle>
<circle cx="10" cy="30" r="3"></circle>
<circle cx="30" cy="10" r="3"></circle>
<circle cx="30" cy="30" r="3"></circle>
</svg>

５の目

<svg width="40" height="40" viewBox="0 0 40 40">
<rect width="40" height="40" fill="#fff" stroke="#999" stroke-width="1" rx="6" ry="6"></rect>
<circle cx="10" cy="10" r="3"></circle>
<circle cx="10" cy="30" r="3"></circle>
<circle cx="30" cy="10" r="3"></circle>
<circle cx="30" cy="30" r="3"></circle>
<circle cx="20" cy="20" r="3"></circle>
</svg>

６の目

<svg width="40" height="40" viewBox="0 0 40 40">
<rect width="40" height="40" fill="#fff" stroke="#999" stroke-width="1" rx="6" ry="6"></rect>
<circle cx="10" cy="10" r="3"></circle>
<circle cx="10" cy="30" r="3"></circle>
<circle cx="30" cy="10" r="3"></circle>
<circle cx="30" cy="30" r="3"></circle>
<circle cx="10" cy="20" r="3"></circle>
<circle cx="30" cy="20" r="3"></circle>
</svg>

javascriptでサイコロを振るプログラムを作成してみたくなりました。

一見、動きそうに見えますが、ダミーです！

実際に動くプログラムは別窓で御覧下さいね。

サイコロプログラム

相変わらずにiPhoneで色々やっているj.sakamotoですが、スマホ用のボタンは大きいほうが良いですよね。

input type="button"でボタンを作成できますが、スタイルシートでカスタマイズすると目立つボタンが作れますね。

<input type="button" onclick="location.href='URL'" value="表示文字列">

普通に作るとこんなボタンになりますが、スタイルシートで装飾して試してみました。

<input type="button" onclick="location.href='URL'" value="表示文字列" style="width:270px; height:40px; background-color:rgba(150,255,150,0.5); color:#800; font-size:22px; font-weight:bold; text-shadow:2px 2px 1px #ff7;">

CSSで色々できるので、オリジナルボタンが作成できますね。

色々なデザインなどをiOSアプリ 「FTP精霊」で作成しています。

ゲームを作成するときのボタンのデザインをしていた時に、ふと「ブログではinput type="button"がどう表示されるか気になってしまい、テストしてみました。プレビューが様々で勉強になりました。

では、ゲーム制作に戻りますm(_ _)m

累計500万人が利用しているポイントサイト！
タダでお小遣いが貯められるコンテンツが充実★
貯めたポイントはAmazonギフトやiTunesギフト、
Webmoney、現金等に交換できちゃう♪

なんと、モッピーを通じて
＼月間50万円以上／獲得している方も♪

簡単１分　無料会員登録しよう♪
http://moppy.jp/top.php?YCHae1a5

登録が完了したら、メールが届くよ！
メール内記載のURLにアクセスしてみよう♪

あなたにオススメの広告が表示されるよ！
表示されただけでなんと、10ポイントGET♪

他にもアプリダウンロードや無料会員登録をするだけで
どんどんポイントが貯まっちゃいます！！

さらにあなたのタイプに合わせてお小遣いを貯めよう♪

▼▼▼　遊びながらで貯めたい方必見　▼▼▼

＼完全無料／毎日見るだけ♪遊ぶだけ♪
PCでもスマートフォンでも参加OK！
タダでお小遣いが貯められるコンテンツが充実！

▼▼▼　ショッピングで貯めたい方必見　▼▼▼

＼ショッピングページがリニューアルOPEN／

ネットショッピングするだけでポイント貯まる♪
最大50％OFF！人気のショップも充実！
今だけ限定キャンペーンも実施中★

▼▼▼　ゲーム課金で貯めたい方必見　▼▼▼

モッピー経由でアプリを起動して
普段通り課金するだけで課金額の3％を還元！
お気に入りのゲームで楽しみながらポイントを貯めよう！

▼　簡単１分　無料会員登録　▼
http://moppy.jp/top.php?YCHae1a5

★★　貯めたポイントを交換しよう　★★

モッピーは１Ｐ＝１円であらゆる交換先に対応！

貯めたポイントは
現金や電子マネー、ギフト券に交換できちゃうよ♪

【現金】
全ての金融機関を取り扱っています！

【電子マネー】
nanacoポイント、楽天Edy、WebMoney、WAONポイント

【ギフト券】
iTunesギフトコード、Amazonギフト券、Vプリカなどなど

＞＞さあ！今すぐお小遣い貯めちゃおう☆＜＜
http://moppy.jp/top.php?YCHae1a5

SVG

CSSアニメーションは表示できる事が分かったので、次はSVGで落書きをしてみます。

実は午前中に複雑なSVGを作成してブログにアップしてみましたが、表示されていないようなので記事を削除してしまいました。今度は簡単なSVGを試してみますが、表示されなくても分かる様にテキストエリアにコードを書いてあります。

アメブロではもう少し複雑なコードを読んでくれましたが、こっちはいかがでしょうかね。

去年から少しサボっていましたが、HTML５,CSS,javascriptとiPhoneで復習しています。

色々な事を覚えたつもりが、少し経つと忘れてしまいます。なので、備忘録用にテキストエリアにコードを残しておきますが、一応自分用のメモという事なので御了承願います。

今後はコードを残しながら色々やってみたいと思います。

午前中は<svg width="60" height="40">で書いていましたが、今回は<svg width="60" height="40" viewBox="0 0 60 40">に修正してみました。

これでも表示されなければ諦めるかも...

新しい時代の幕開け！

アメリカの大統領就任のニュースが流れています。個人的にはトランプ氏を応援していたので「メデタシ,メデタシ」です。報道番組では以前から評判が良くない様に感じますが、彼がアメリカ国民に選ばれた大統領だという事に間違いはありません。

色々と問題はあるのかもしれませんが、ビジネスマンパワーで改革してくれることを期待します。

トランプ違い！

賛否両論あるので、アメリカ大統領は置いといて、私はサーバーを整理していたら作りかけのプログラムを思い出しました。丁度トランプのゲームを作成しようとしていたときのフォルダにトランプの画像がありました。

トランプ違いですが、画像を貼り付けてみました。この画像は無料画像配布サイトからダウンロードして使わせて頂いてますが、サイト名を忘れてしまいました(ゴメンナサイ)

実際にゲームなどで使うには、CSSのClipプロパティで切り抜いて使っていますが、iPhoneで編集するにはちょっとシンドイです。ここでくり抜こうとも思いましたが、今回は止めておきます。なんて.........本当はやったら失敗してしまいましたσ^_^;

病み上がりとは言えもっとスキルアップしたいj.sakamotoです！

ちょっと宣伝

去年より無料のサーバーでサイトを作成していましたが、体調不良で公開していませんでした。今回、無事に公開したので、もしよろしければ覗いて下さいね(^｡^)

iPhoneだけでHP作成

今回はCSSアニメーションでリンクを張ってみました。サイトはiOSアプリ「FTP精霊」でウェブ作成する為の入り口(初心者向け)です。

なるべくスマホで御覧下さい！ではbye-bye(^O^)／