Web Design Diary https://tomco.blog.shinobi.jp/ テクニカル日記 Fri, 08 Aug 2014 07:03:46 GMT ja © Ninja Tools Inc. 忍者ホームページを更新しました。 忍者ホームページに複製しました。

FileZillaをインストールしたんですが、シンプルでカッコいいデザインです。

FFFTPもCiberDuckも使ってみたけど、カラフルですこーし使いにくかったんです。

今日は新たにjQueryのアニメーションモジュールを追加して、遊び心満点のトップページにしました。

Facebook で公開したら3分程で3like つきました！1分1 likeです！！

毎日いろんな機能を追加できたら、どんどん増えていきそうだけど、それはけっこう大変で。

何故なら他にもたくさん更新しないといけないサイトがいくつかあるのです。

昨日は1日かけて、これを更新しました。

Art Box

このサイトは海外のフリーテンプレートで作ったので、ずっと英語メインでしたが、最近日本語ページを作りました。

その他、iPhone５ケースのオンライン販売のページもあります。（海外販売です）

Bootstrapを使っているので、Responsive デザイン（スマホ最適化）です。

こんな感じでこれからも更新を続けていきますので、温かく見守って頂けたら幸いです。]]> ホームページ https://tomco.blog.shinobi.jp/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8/%E5%BF%8D%E8%80%85%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E6%9B%B4%E6%96%B0%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82 Fri, 08 Aug 2014 07:03:46 GMT tomco.blog.shinobi.jp://entry/5 ダイナシ
何これ？と思って早速登録してみました。

動物好きでお笑い好きの私にピッタリかと思いましたが、実際作ろうと思うとそう簡単でもありません。

ダイナシ

動物に限らず、電車やバス、いろんな題材写真を元にコピーライティング。

すぐに投稿して公開します。Twitterでつぶやくもあり、Google+で拡散するもあり
Facebookとはてなで簡単投稿。

投稿して、クリックされて見られた回数でポイントが増えるとのことです。

早速投稿してみました。
題材は、見つめる猫で emoji

その他にも 短縮URLサービスでツールを使って誰かに紹介するとポイントが貯まるというtopicon

まとめリンク集を作るとポイントが貯まるリンコレ

コンビニで購入した商品のレビューを書くとポイントが貯まるumacon


などなど。侍ファクトリーさん、素晴らしいサービスを展開なさっていますね☆]]> ホームページ https://tomco.blog.shinobi.jp/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8/%E3%83%80%E3%82%A4%E3%83%8A%E3%82%B7 Wed, 06 Aug 2014 07:37:32 GMT tomco.blog.shinobi.jp://entry/4 忍者ホームページを立ち上げてみた いろんなツールが追加できて、楽しくなってきました。
特にサンドボックスって、とっても便利ですね。
レスポンシブで、スマホからでも閲覧できるのには、ちょっと感動しました。
アップロードが早いのなんのって、とってもびっくり... !
Photo Gallery 

このブログも今まで使って来たブログより使いやすくて、（特に見ながら編集とソースコードに分かれている所）お気に入りになりました。
今日はホームページも作ってみました。

FTPの操作ガイドもあったし、FileZillaのインストールからファイルのアップロードまで
さほど時間もかからず出来ました。
ちょっと手間取ったと言えばディレクトリが初回のため解らず、フォルダごとアップしてしまいまして、表示が出来ませんでした。
ヘルプページを見て、解答通りに操作していくと出来ました！

忍者AdMaxも追加、漫画による説明も判りやすくて、早速貼ってみました。

PHPを使っていて、名前を入力するとシロクマ君がぺこっとあいさつする様に仕組まれています☆

そしてこの猛暑への対策として動物写真館を追加しました。おそらく癒されるスペースになっていますので、ぜひぜひ見に来て下さいね ^-^/
Dinner with TOMCO





]]> ホームページ https://tomco.blog.shinobi.jp/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8/%E5%BF%8D%E8%80%85%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92 Tue, 05 Aug 2014 04:57:29 GMT tomco.blog.shinobi.jp://entry/3 Codecademyで文字をアニメーション化する http://www.codecademy.com/

CodecademyはNYに所在する無料でコードの書き方を教えてくれるウェブサイトです。
とても丁寧に教えてくれるので、挫折しないです。（英語ですが・・・）

コードは英語が判っているとさらに楽しいので、英語の勉強もできたりします。

自分の名前を書いてみようという(Animate Your Name )プログラムでは、アニメーション化されたものが創れるというコースになっていて、完成したらちょっと嬉しいです。

プログラムのコースでは少しずつ指示が出て、出来上がるたびに褒めてくれるので本当に挫折しないんです。 （英語だけど・・）
プログラムが終われば、勲章にバッジが与えられるし、楽しく学べるんです！

こんな感じに出来上がりました☆

jsdoint]]> 未選択 https://tomco.blog.shinobi.jp/%E6%9C%AA%E9%81%B8%E6%8A%9E/codecademy%E3%81%A7%E6%96%87%E5%AD%97%E3%82%92%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%8C%96%E3%81%99%E3%82%8B Thu, 31 Jul 2014 14:06:34 GMT tomco.blog.shinobi.jp://entry/2 HTML5 Makerを使って楽しくスライドをつくる HTML5 Maker.com それはとっても素敵な私のお気に入りサイト。
HTML5を勉強するのにはここが一番カンタン。 アーティスティックなアニメーションがすぐに創れる♡
作ったらファイルをダウンロードが出来て、自分のサーバーにアップしたりする事ができて 楽しいです。
フリープランでは、Download / Share / Embedを使うと楽しいです。 ダウンロードできるファイルの種類が選べて、また便利！
javascriptかhtml(5)か、はたまたflashか・・・。 Editor画面も英語ですが、本当に2,3度操作したら使い方が解ってくると思います。
文字に影をつけたりするのも、イラレで画像作成してコーディングしていたら一日かかるんです、 その手間を思うと、html5 Makerは本当にすごいんです !
サンプルページ

オリジナルチュートリアルはこちら

今日はこの間の続きで、Responsive Websiteのコーディング方法までの動画を創ってみました☆


・・・見えにくくってごめんなさい

ポイントはEmbedでResponsiveにチェックするっていう所です。

HTML5はスマホに対応するレスポンシブなので、なぜにわざわざ？という疑問が湧かないとは言い切れません。そして、見逃してしまいがちなんです。（少なくとも私は）

で、Responsiveにチェックすると、JavaScriptらしきコードが追加されたものが提示されます。

で、それをファイルに追加して、終わりです

それとは別で、ダウンロードしたフォルダは単なる数字の羅列です。
しかもhtmlファイルが３個もあり、どれを開いても同じ物が表示される。。

これは不思議。じっくり観察して階層を理解する必要があるでしょうのでしょう、きっと

でも、1ページしか使わないんだから、1ページの階層さえ解っていれば何とかなるはず。という理屈でこのビデオは進んでいっています

あと、もう一つ気をつけるとしたら、Sign Inです

Sign Inする時にHTML5マジックにかかると、前に創ったファイルをいくら残しておいても
たどり着けない場合があります。

その場合でも、あきらめないで欲しいんです！ Create Animationをクリックしてみてもらうと、すぐにEditor画面に入れるんです。

一から創り直さないといけないのは面倒ですが、慣れるまではこのやり方を頭の片隅にいれておくと、使いこなせる様になります☆

Anonymousアカウントで入ると、HTML5 Makerのロゴが入ってしまうんですがフリープランなので、仕方がありませんね。。

ちなみに自分のメールアドレスやソーシャルアカウントを利用して、創った場合にはサンプルの様にロゴが入りません。
ビデオで作ったWebページの Sample Page

引用元

]]> HTML5 https://tomco.blog.shinobi.jp/html5/html5%20maker%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E6%A5%BD%E3%81%97%E3%81%8F%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B Thu, 31 Jul 2014 01:35:01 GMT tomco.blog.shinobi.jp://entry/1