サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
blog.cgfm.jp
@mutsukingの Webデザイン概論講座 | MutsuLogでもスライドが公開されてますが、 3月にAIP CafeでWebデザイン概論の講義をさせてもらいました。 この場を借りて。 このような機会を与えてくださったグローバルブレインズ株式会社、株式会社 福岡CSKの関係者のみなさま、本当にありがとうございました。 参加してくださった方々も最後までお付き合いしていただき、本当にお疲れ様でした。 このスライドと当日資料は@mutsukingと二人で作成し、当日の話し手は僕がやらせてもらいました。 そのスライドを作る際の草案のマインドマップや、当日の様子なんか書いてみたいと思います。 マインドマップで講義の流れを組み立てる ↓がスライドを作る前に、二人で考えた講義の骨組みとなったマインドマップです。 スライド画像が大きすぎるので、このページ上でうまく見れない人は下記の直接の画像リンクを
特徴 利用可能な絵文字変換表一覧はこちら 対応機種はdocomo,au,Softbankの3G以降。 auの絵文字名(sun等)で指定可能:何の絵文字を指定しているかわかりやすい au,Softbankにあり、docomoに無い絵文字も記号で代用できる場合は変換。(↓↑○等) docomoの絵文字に色指定を簡単に。デフォルトの絵文字色指定も可能。 auは文字の大小指定(font-size)に応じて、3段階の大きさで出力。 PHP4,5以降に対応 独自の絵文字変換表も地味に更新中 謝辞 以下のサイトのデータを使わせていただきました。 本当に感謝です! My First HDML http://www001.upp.so-net.ne.jp/hdml/ 各キャリア(EZwebの絵文字,iモードの絵文字,SoftBankの絵文字)のテキストデータ(CSV)を利用 PCプレビュー用に絵文字画像(d
3月にAIP Cafeにて Webデザイン概論についてお話しさせていただきました。 その時の資料を公開する許可をいただきましたので お言葉に甘えて公開してみました。 内容は、主にBtoBのシステム開発をされている エンジニア、プログラマの方を対象に BtoCなサービスに関わることの多いWebデザイナーが Webサイトのデザインする上で心がけている(であろう)ことを 簡単にまとめたものです。 今回この資料を作成するにあたり 私たちにとっても別の収穫がありました。 自分たちが、Webサイトを作る上で 常に心がけていること気をつけていることを 敢えて文章や図に落とし込むことで 改めて自分たちの考えをまとめることができました。 このような機会を与えてくださった グローバルブレインズ株式会社、株式会社 福岡CSKの関係者のみなさま ありがとうございました。 ワークショップで取り上げたFOICのサイト
2017/07/14追記 スマホも冷えた保冷剤で冷却するのは危険です! スマホが熱くなるからって保冷剤をくっつけちゃダメ – Togetterまとめ ずっと辛くて書けなかったのですが、書かないと前に進まないので書きます。 まず結論から。 MacBook Proが熱いからと『保冷剤』で冷やすと内部結露でショートして、Apple側では「水漏れ」と判断され修理保証外になるので絶対に保冷剤で冷やさないこと! なぜこんな事になったの? 2009年8月、西日が差し込むと、気温も湿度もとても上がる福岡市都心部。 そんな部屋でMacBookPro17″で作業していると、左手がとても熱くなり、何かで冷やそうと考えた。 保冷剤を選んだ時に内部結露する可能性を全く考えてなかったのが僕の最大の「うっかり」。
MENU 著者について プロフィール 雑感 コミュニティ WebDesign PHP CSS JavaScript MAC CGFM WordPress 我流天性 がらくた屋 著者について ホームWebDesignJavaScriptWordPressの投稿記事内に直接Javascriptを書いてみる WordPressの投稿記事内に直接Javascriptを書いてみる 2009 4/21 JavaScript PHP 2009年4月21日
WordCamp Fukuoka 2010の多目的ホール1で 「サイト運営マニュアルの必要性」 というサト研っぽい?テーマで話させていただきました。 わざわざ見に来てくださった皆さん、本当にありがとうございました! その時のスライドを公開します。 プレゼン中の補足 紹介サイト BaserCMS 「コーポレーションサイトにちょうどいい」 お問い合わせフォームは、WordpressのContact Form 7に引けを取らない高機能! 福岡県産CMS! 2010/03/27(土) in AIPcafe で第1回 BaserCMS勉強会@福岡が開催されます (ATNDはこちら) ディスクトップキャプチャー(動画作成)ソフト JING Windows , Mac対応 フリー (Pro版は $14.95/年) カムタジア スタジオ6 30日無料の体験版はこちら 実演できなかったですが、スマートフォー
勢いでナストマのモーフィングGIFアニメを作ってしまいました。 その時の全く役に立たないTIPSを書いてみますw (個人的に敢えてFlashを使ってないのがミソです) イラストレーターのブレンド機能でキャラクターのモーフィング Fireworksで複数画像を一発でステート(CS3までのフレーム)に配置してGIFアニメに イラストレーターのブレンド機能でキャラクターのモーフィング illustoratorにはブレンド機能という、A→Bの変化の段階を自動的に生成してくれる便利な機能があります。 しかし、トマトとナスみたいなキャラクターの場合、パスが多すぎて中間の計算がおかしくなります(図1) イラストレーター 図1 : 通常のブレンド そこで、各パーツ単位でブレンドを掛けることで上手くいきます。 図2: ブレンド調整後 図3: 各パーツ毎にブレンドした Fireworksで複数画像を一発でステ
MENU 著者について プロフィール 雑感 コミュニティ WebDesign PHP CSS JavaScript MAC CGFM WordPress 我流天性 がらくた屋 著者について ホームMACMacBookProに環境を移行して、新たに制作環境を構築した時のメモ MacBookProに環境を移行して、新たに制作環境を構築した時のメモ 2009 6/22 MAC 雑感 2009年6月21日2009年6月22日
税理士の河上康洋さんは、東京経済ニュースにも取材で取り上げられる程の今売り出し中の税理士さんで、 経歴も生命環境科学研究科卒と、異色の経歴の持ち主です。 東経ニュース 会社訪問 河上康洋税理士事務所〜3つの視点で経営をサポート 河上康洋税理士事務所〜3つの視点で経営をサポート – livedoor ニュース そんな方のサイト制作に携わらせていただき、とてもやりがいのあるお仕事でした。 サイト構成や原稿、キャッチコピーもかなり時間をかけて考えました。 河上さんがお客さんへ伝えたい熱い想いはたくさんあって、 それを如何にわかりやすく整理して盛り込むかに注力してます。 イラストで親しみやすさを また親近感を感じてもらうために、顔写真よりもイラストを作成しました。 もちろん、イラストはカネウチカズコです。 サイト構成の検討、ワイヤフレーム作成にはCacooを使いました ▼コンセプトを検討したマイン
2-3. Flashの上にHTML要素のレイヤーを重ねる <param name=”wmode” value=”opaquze” />と設定すれば、 CSSのz-indexで重ねられます。 サンプル
Cacoo – Web上で図の作成とリアルタイムコラボレーション 以前このブログでオンラインで共有できるワイヤーフレーム作成ソフトをいくつか紹介しましたが もっと良さげなソフト「Cacoo(カクー)」が今日公開されました。 遠く離れた方と打ち合わせしたいとき 普通は電話やSkypeチャットを使ったりしますが Cacooだと、リアルタイムに編集できる図を交えたやり取りができます。 文章だと表現しづらかったり説明がややこしくなることも 図や絵にすると一発で伝えられたりしますね。 私はワイヤーフレームを共有できたらいいな、と思ってたので これは朗報です。 ワイヤーフレームを作る時 共通部分は別レイヤーにして他ページでも読み込んで使い回したいものです。 Gliffyだと テンプレート部分をいちいちコピー&ペーストしてました。 テンプレート部分に修正が加わると、全ページ修正しなくてはなりません。 C
IEとそれ以外のモダンブラウザで確認する事 objectタグだけの表示の場合 IEだけ表示、それ以外は表示されない。 embedタグだけの表示の場合 IEは非表示、それ以外は表示される object、embed両方タグだけの表示の場合 IE、それ以外のモダンブラウザでも表示される。 ただし、このコードはレガシーコード(古い)。 このような2段構えの構造になっている理由は、IE以外のWebブラウザではobjectタグのclassid属性などのサポートが不十分なため、SWFを表示する際に必要な情報を取得できないからです。そこで、objectタグの内側に、IE以外のWebブラウザ用でもちゃんと解釈できるembedタグを入れ子にして置いているわけです。(X)HTMLの仕様では、解釈できないobjectタグがある場合、そのタグの内側へと代替コンテンツを求めるようになっています。レガシーコードの場合、
Online Diagram Software – Gliffy Webデザインのお仕事をいただいた時は いきなりPhotoshopやFireworksで画面デザインを起こさず ワイヤーフレームを作成し、Webサイトの構成や内容をまとめて 情報整理してからデザイン案を起こしている。 通常は、Illustratorでワイヤーフレームを作成しPDF化してから クライアントに確認していただいている。 クライアント側から ワイヤーフレームの内容について修正指示が入る場合は メール、もしくはPDFの注釈機能に書き込んでいただいている。 その修正指示を見ながら、Illustratorデータに修正を加えて 再度クライアントに提出する、この繰り返しである。 そのやり取りの中で 修正指示をうっかり見落としたり クライアントの意図を誤解して、意図に反する修正を行ったり… というミスも出てくる。 もしも、制作会
自分用メモです。 何度も同じ事調べてたのでメモ。 (不確定、要確認したい項目) テンプレートタグで使える変数の種類 typeの種類 型 type 説明 テキスト
▼テンプレートの変数名に日本語を使う。 <!-- TemplateParam name="01_ページタイトル" type="text" value="" --> ↓ <title>@@(_document['01_ページタイトル'])@@</title> テンプレートの編集領域を設定する時に日本語名を入れればOK。...
前記事「「文字の動き」の参考になりそうな映画やアニメのOP/EDのメモ(超個人的趣味)」が意外に周囲に反応良かった(?)みたいなので、 最近、僕がFlash等のモーションタイポグラフィ(Motion Type Graphy)に参考になりそうだなーと思った動画やサイトも紹介してみます。 ほぼYoutubeで、超個人的主観です。 (他に良い作品があったら教えてください) ▼追加:2012/02/02 ◯YouTube – DADA RADWIMPS MV 日本語ならではのこの感性、個人的にツボ過ぎです。大好きです。 ▼ほぼテキストだけの構成 Getting Started With Google Analytics « WordPress.tv WordPress.tvのチュートリアル動画。 セリフと合わせてアナログチックな展開がいい味出してる。 YouTube – Type in motio
筆者:我流@CGFMがFlashでいつも調べたりする事の覚え書きです。 講師業のFlashの授業で、生徒に教えるためにまとめたものです。 1. 基本:SWFをHTMLに貼付ける Dreamweaverの自動貼付け <object>タグと<embed>タグ SWFからの外部ファイル読み込みの位置関係 FLVPlaybackのSkin*.swfと呼び出し元swfが同じ階層の場合 FLVPlaybackのSkin*.swfと呼び出し元swfが違う階層の場合 IEのセキュリティとJavascriptの関係 2. 応用:SWFをHTMLに貼付ける JSライブラリの利用(SWFObject) 背景色を透明に (要注意) Flashの上にHTML要素のレイヤーを重ねる 3. HTMLからFLashに変数を送る SWFのURLのパラメーターによる指定方法("src=&***.swf?hoge=123&ho
自分用のメモです。 Mac OS X のターミナルで以下のコマンドを実行。 find . -name .AppleDouble -exec rm -rf {} \; NASのHDDのフォーマットがNTFSなので、MAC OS Xでアクセスするとたびたび生成されます。 普段は不可視ファイルなので全く問題ないのですが、 Dreamwever (CS3)上では認識されてしまい、PUT/チェックインの際、[.AppleDouble]のフォルダをサーバーにアップしてしまいます。 「ローカルで作業すればいいじゃん!」 と言われたらそのままなんですが。 NAS上を使ってる理由はこんなところ。 複数のPC/ユーザーで作業する(Windowsも含めて) NASをファイルサーバーにして、NASに付けたUSBのHDDでミラーリングしてる なんとなくローカルの領域は埋めたくない(軽くしておきたいから) 自分は古い
→[文字の動き] モーションタイポグラフィで参考になった動画のまとめはこちら 追記:2009/05/30) 最近のアニメ系に3本追加。 @evianさん、ありがと〜〜 Flashなどで「文字に動きをつける」事を、Type Motion(タイプモーション) もしくはType Motion Design(タイプモーションデザイン)って僕の中では呼んでるんですが、間違ってる? テキストモーションなのかな? 追記:2009/05/28) 「モーションタイポグラフィ」だ! やっとすっきりした。 Lens氏、ありがと〜! でもモーションデザインってのはあると思うんだ。 「動き」も表現手法の1つだし、 動き次第で「硬度/質感/属性/性格/質量」等を表現できるから。 そんなわけで(どんなわけだよ)、主にタイトルや文字の動きで参考になりそうな映画やアニメ系の動画をYoutubeで探してみました。 3DCGで
前々から自分用にカスタマイズしながら使っていた、携帯絵文字を簡単に表示できるPHPのライブラリをcodecheck.inにコミットしました。 ▼Firefox拡張:FireMobileSimulatorでの絵文字テストのスクリーンショット codecheck.in:PHP携帯絵文字表示ライブラリ(PHP埋込型・au絵文字名対応版)のダウンロードサイトはこちら ダウンロードや使い方の説明、絵文字一覧表等は上記のリンク先をご覧ください。 絵文字表示/出力コードの動作確認には、当ブログの、User Agent Switcher の携帯用のXML や、Firefoxを簡単に携帯エミュレータにするアドオン「FireMobileSimulator」が素晴らしい件について を見てもらうといいです。 特徴(ver 1.00) 利用可能な絵文字変換表一覧はこちら 対応機種はdocomo,au,Softban
参考サイト YouTube - Evolution of Dance jQueryで横スライドのサイドメニューのサンプル - 我流天性 がらくた屋 よく見るサイドメニューのサンプル | CSS Lecture jQuery: jQuery実践サンプル 春と修羅-初版- jQueryを使ったブラウザ分岐 | A Day in the Life Selectors humming bird:JavaScript - 正規表現 Pattern チェック 修正箇所 Youtubeの動画切替を以下のブラウザで対応/動作確認 Windows XP/IE6,Vista/IE7 Mac/Safari3,Opera9 サイドメニューの背景画像を透過PNGに Youtubeの動画は自動再生に。(入替urlに "autoplay=1" を追加)
Dreamweaverのテンプレート機能の参考サイトの自分用メモです。 使いこなせれば、中小規模のサイトをシステム無しで、 Webデザイナーのみで管理/運営ができます。 頑張ってContributeと連携すれば、こんなサイトも運用できちゃったりします。 Dreamweaverのテンプレートを使った事例 サッポロビールにおけるテンプレート活用事例 | デベロッパーセンター http://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_sapporobeer_02.html あの大手サイトもテンプレート機能を使ってます。一通り全部読んでみる事をお勧め。 北九州芸術劇場 http://www.kitakyushu-performingartscenter.or.jp/ 手前味噌ですいません…(汗 Dreamweaver Templ
携帯サイトで以下の場合の検索置換のメモ。 テキスト中の「,(半角カンマ)」を「、(半角句点)」に置換する。 但し数値や金額の3桁区切りの「,」は置換しない。 Dreamweaverの「検索」対象を「テキスト」に指定 「正規表現を使用」にチェック 検索:[^\d]+,[^\d]+ 検索:([^\d]),([^\d]) 置換:$1、$2 修正) 最初の検索文はとんでもないことになった、反省。 難しいっすね、正規表現。ちゃんと確認します。 ([^\d]) は”数字以外の何か1文字”の指定(のはず) “数字以外の何か1文字”に挟まれてる「,(半角カンマ)」を対象とするので、 “15,000円”とか数字の桁区切りは対象に入らない(はず) 「、。(半角句読点)」は外字だから文字化けする!と言われてるけど、今まで携帯ブラウザで確認してきた限りでは、どれも文字化けしてなかった。 (3年前の石携帯ですら。)
WindowsのFirefox3で白い半透明のDIVで覆われる原因はGoogle Analyticsだった 2008 11/09 ある日、何も手を加えていないブログに、突然ブログ画面上が白い半透明のボックスに覆われてしまいました。 リンクも効かなくなりました。 現象は、Windows XP / Firefox3だけの現象です。 原因を調べると、アクセス解析で利用してるGoogle AnalyticsのJavaScriptが関係してるようで、以下のDIVタグがページ内に生成されてました。 <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 1000px; background-color: rgb(238, 238, 238); opacity: 0.5; z-index: 100000; dis
ホームWebToolsDreamweaverDreamweaverのライブラリのディレクトリ指定のリンクの不具合のせいで、docomoで301エラー 今制作してる携帯サイトの案件で、かなり参りました。 携帯サイトで共通パーツがあり、ページによって表示/非表示させたり順番を並べ替えないといけなかったしてしたので、 Dreamweaverのライブラリを使いました。 そしたら、Dreamweaver CS3でフォルダへのリンクの不具合を解決するハック – kazkiScopeでも書かれてる以下の不具合に遭遇。 不具合その2:ライブラリでフォルダをリンク先に指定したとき、末尾のスラッシュが外れる これも再現してみます。ライブラリを作成して、特定のフォルダへのリンクを作成します。 <a href="../folder/">フォルダへのリンク</a> (/Library/test.lbi) そして、こ
CSS a.icon1 { padding:2px 20px 2px 0; background:url(icon_pdf.gif) no-repeat right center; } HTML <a href="#" class="icon1">ファイル名ファイル名ファイル名ファイル名</a> IE以外モダンブラウザでは正しく表示される。 IEでY軸右中央寄せ[ background-position:right center ]だと画像が半分で途切れる場合も。 IEでY軸右下寄せ[ background-position:right bottom ] だと、BOX幅での一番最後の行の右側に表示しようとするため見えなくなる。
追記:2009/05/20 Backlogの開発ブログに紹介されちゃいました(・∀・)/ 導入TIPS:”Backlogをプロジェクトに導入する時に最初にする事” | Backlog開発者ブログ 先日、ついにBacklogの無料コースから、有料コースに変更。 プレミアムコースです。 ユーザー、プロジェクトが無制限 ガントチャート、バーンダウンチャートが使える! ファイル共有/Subversionの容量が1GB! 何でコース変更したかというと、今抱えてる携帯サイトの案件のスケジュールがタイトなのと、 頻繁なソースコードのやりとりが発生しそうになったからです。 これはBacklog&Subversionの出番だなと。 初めての新しいシステムを使ってもらうために敷居を下げる工夫 それでこっちでBacklogを用意してプロジェクトを設定したのですが、 その時に僕なりに気をつけたり配慮してみたりした
遅ればせながら、1/31(土)に10周年イベントのご紹介 |パソナテック10周年記念サイト|パソナテック(PASONA TECH) に行ってきた感想を。 詳しいレポートやまとめは「Webデベロッパの祭典+ちょっと新年会気分で。@福岡レポート – ナカオ日記−フリーランスの轍 」を見るといいと思います!(nishiaki風に) 他の方のブログへのリンクまとめも「Webデベロッパの祭典+ちょっと新年会気分で。@福岡レポートまとめ – ナカオ日記−フリーランスの轍」が一番まとまってると思います。 A-1 は既に応募が締め切られてたので未参加。 B-2:国内最大規模のRuby on Railsサイト 「クックパッド」の裏側見せます。 技術的な部分は、僕には理解できない所も多かったけども、 モノ作りのこだわりや魂を聞けたのがとてもモチベーションが上がった 「BESTに集中する」 やりたい:情熱を持っ
福岡のプログラマーもデザイナーも集まるコミュニティ「codecheck.in」 でIRCというチャットシステム?が熱いので僕も参加してみることにしました。 LimeChat というMac OSX用のIRCクライアントを教えてもらったので、これをcodecheck.inに繋げるまでの設定メモです。 チャットソフトと言えば、メッセンジャーかSkypeぐらいしか思いつかない僕にとって、「IRCって何?」ってぐらい始めは全くわからんかったので、これから初めてIRCソフトを触る人にお役に立てれば幸いです。 まずはダウンロード とインストール 以下の二つをダウンロードします。 RubyCocoa 0.13.2以上 LimeChat: IRC Client for OSX LimeChato配布サイトにも明記されてますが、RubyCocoaは必ずダウンロードしましょう。 RubyCocoa 0.13.2
次のページ
このページを最初にブックマークしてみませんか?
『blog.cgfm.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く