Web Technologyの最近のブログ記事

今回作ったデモサイトはこちら
Strikinglyを使ってみる


strikingly01.png

この手の「コード書かなくても無料でサイト作れます」というサービスが
ここ最近、どんどん出てきますね〜!
その中でも、Strikinglyはモバイルに特化しているという点で優れていると思います。
ページ遷移は基本的になし。
1ページのみの中で、スクロールしていって情報を表示します。

Japanese-old-tale.jpg

いつも参考にさせてもらっているcodropsで昨年末に、絵本のようにページがめくれるJQueryのデモを見つけました。
これを使って、絵本を作りたいなーとずっと考えていて、今回挑戦してみました。

中身のjsを隅々まで理解することはできないのですが、フレームワークを利用してHTMLを書き換えるだけで、PCでもスマホでも見られるレスポンシブの絵本ができあがりました!

ここから見られます

デモを見る



制作環境を見直し中

フリーランスで仕事していると、自室にこもって作業する時間が長いため視野が狭くなりがちですが、先日はWordCampのキックオフミーティングやSassの勉強会に参加してきました。
そこでいろんな人たちに会いまして、本屋のWebデザインコーナーに平積みになっているあの本を書いた人とか、時々ブログを読んで参考にさせていただいている方とか・・・。

みなさんそれぞれに得意分野を持っていて、

「いいアイディアがあったらアプリ開発するよ」
「PHPなら任せて」
「印刷・Webどっちもできます」

・・・なんて具合に、羨ましいくらい素晴らしい技術と才能を持っていることに刺激を受けて、「やっぱりフリーランスは自分の価値をいかに高めるかを、もっと真剣に考えないといかんなー」と思ったのでした。



まずは制作環境の見直しから

スキルアップをめざすなら、まずできることは、情報収集と環境を整えること! というわけで、今日は最近やってみたことを発表してみることにします。

I had let appear in the sidebar of WordPress timeline twitter, had not been displayed suddenly in October.
You seem to have no longer able to by changing the Twitter API, to display a tweet using jQuery apparently.
Here's how I fixed.

I tried to find out a little, in March of 2013, also seems to be stopped (version 1 of TwitterAPI) current methods.
In the Web world, because it is often such changes, after you create a site, to mean that, you still do not put anything does not go.

How to resolve the following.
At the [USERNAME], please put your Twitter user name.

The original source

<ul id="twitter_update_list"></ul><!- Twitter posts will be shown here -> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=5"></script>

How does this fix ...

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

The modified source

<ul id="twitter_update_list"></ul><!- Twitter posts will be shown here -> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="https://api.twitter.com/1/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=5"></script>

I think about the twitter and facebook, there are many changes to the specification.
Because technology has advanced rapidly, in each case, we are not only going to chase after.

FacebookのOGP設定後にチェックすること

いいねボタンを設置して、OGPも設置したのにサムネイルがうまく表示されなかったりしたので、ちょっとメモ。
まずはここで、正しい情報が取得されているかどうかをチェックするべし。

Facebookのいいねボタンをつけたときのデバッガ

それでもうまく取得されていなかったら、サーバのアクセスログを見て文字コードチェックすると解決できる場合があるそうです。

参考にしたのはこちら

Mac OS X 10.4.11の名前解決(ホスト名設定)

MT用のテストサーバを参照するために、初めてhostsの設定をいじってみた。
結局、元に戻す事になったんだけど・・・
以下、覚え書き。

Mac(Mac OS X 10.4.11)では、固定のホスト名設定はhostsファイルで行うのではなく
[アプリケーション][ユーティリティ][NetInfoマネージャ]
(/Applications/Utilities/NetInfo Manager.app)で行ないます。


(1) NetInfoマネージャを起動
(2) [セキュリティ][認証]をクリック 
(3) ルートのパスワードを入力 
(4) machinesを選択
(5) [ディレクトリ][新規のサブディレクトリ]をクリック→machinesの下にnew_directoryという要素が作成される
(6) 下のプロパティシートの「値」の欄をダブルクリック、編集可能状態になるので登録したいホスト名を入力
(7) [ディレクトリ][新規のプロパティ]をクリック→新規要素が追加される
(8) [プロパティ]をダブルクリックして、「ip_address」に変更
(9) [値]をダブルクリックし、IPアドレスを入力
(10) NetInfoマネージャを終了→保存するか聞かれるので保存



「NetInfoマネージャ」によるホスト名の名前解決の設定

10.5からは一般UNIX,Linuxと同様に/etc/hosts ファイルで設定するらしい。
規約に「同意する」ボタンを押すまでは、「決定」ボタンがグレーで押せない状態になっている。
・・・というサイトをよく見かけますが、これはjacascriptでわりと簡単にできるようです。

http://artown.jp/e_javascript/limit/4-5.html

化粧品のショッピングサイトでこの機能を使うことになり、
今日実装してみました。
動きはまずまず。

CGIと連携させてもきちんと動作するか確認中です。


profile-image
Job:Web Designer
Location:Tokyo/Shinjuku
Machine:Mac book Pro

東京在住のWebデザイナーです。最近はWordPressで構築する案件が多いです。PHP/JavaScript/レスポンシブWebデザインなど勉強したことの忘備録として書き留めています。

チームStudioBrainのメンバーとしても活動中。 Twitter Button from twitbuttons.com pixeldesign_logo