（仮）

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

スクリーンショットを撮って、手順にペタペタとマークをつけるだけ。

この辺はexcelだったりpdfの手順書が豊富にあった現場でスクリーンショット＋マークの基本を学んだおかげで
さくさくと進めることができました。

やっぱ絵があるとわかりやすいですよね。絵しか組み立て手順がない某東欧からの家具？屋さんじゃないけど…



と連絡がくる。よかった。。。



もともとのテンプレートのスマホ版バグを修正し、無事アップロード完了。
（さらっと書きましたが、このスマホ版バグとりが一番めんどかった。。。）

これにて３回にわたるドキュメントは終了です。



やってみればできるもんだということがわかりました。

デザインはなくても、どうこうする技術があるひとたち！！作れますよ！笑

すごいシンプルなものをお見せした結果、可もなく不可もなくといった反応。
「デザインはbootstrapのcssを借りてきて」みたいな表現をわからない人に説明する不親切さMAXの自分。
その結果、「他のもできるの？」みたいな反応を受けたので
きっと他のも見てみたい（＝これでは満足してない）んだろうな。。。ということがわかりました。


無料配布デザインテンプレートがないか探しました。
→自分でデザインできないなら、得意分野のテンプレート適用する努力すればいいや、に方向転換。
結果、メニュー選択すると指定のコンテンツまでスクロールして。。。みたいな構成の一画面テンプレートを適用することに決めました。


・おしゃれなコンテンツが用意されているがどれを使おうか迷う（→この辺が非おしゃれの時間の使いどころ）
・スマホ対応してるはずのデザインなのに、あとになってスマホサイズだと問題があることが発覚（しかし、無料のデザインにそんな贅沢を言えるわけもなく。英語だしな←）


↑のデザインを見せてみたところ、第一弾よりは好感触（当たり前だ）だったのでこのデザインで進めることになりました。

youTubeのframe タグが、公式のままだとスマホ時に横幅が可変にならないなどの問題が出てきました。

style="max-width:100%;"
をframeに追加するだけでした。

まぁ他にも問題がいくつか残りつつ、次回でサイトをついにオープンできそうなとこまで持ってきました。
自分でも編集できるようになりたいというので簡単に手順を説明したのですが、
「わかるけど翌日から再現できる気がしない」という素直な感想をいただきました。
やっぱり、サルでもわかる説明書を作るのがエンジニアの基本かな。。。と思い、手順書を作ることにしたので続きは後日。

2014,2015年は定時で上がることを推奨される職場にいたので、自己啓発をかねて勉強会に挑んでました。

pyLadies東京がたぶん初参加で、
会の間はほぼ無言。。。（ほぼ知らないのにpython興味がある程度で行ってしまったので発言することがない）

ということが多いので、行った気になってるだけという会ばかりでした。
これだと何の学びにもなってなくてどうにかしたいなと思ったとき見つけたのが
面白そうなハッカソンでした。

勢いに任せて前日予約したけどぎりぎりまでキャンセルしようか悩んでましたね…
でも予約したし、と奮い立たせて会場に入ったら人がすでにけっこういてもう帰りたい

隅のほうに座ってPCを起動してそれっぽい雰囲気を出しておいて
開始を待ちました。

目的はバズる記事を作る。
E2D3を使ってデータをグラフ化して掲載する。
が発表されてハードルの高さにいまさら慄く。

最初は近くのひととブレストする時間→いきなり発案と発言力が求められてんぱる

次に面白そうなものを１案だして発表→この時点で発表者は他の案に飛びつけず不公平感
正直、他のチームで面白そうな案があったので入りたかったのですが自分たちの案に人が集まらないので申し訳ないな。。。と思ったときに同じ状態のひとから「やりましょう！」といわれ自分たちの出した案のチームに入ることにしました。

チームでハッカソン開始。
なんと、チームはエンジニア３人。（ライターもデザイナーもカメラマンも不在）
途中、E2D3の使い方講座やjThree講座などがありながらも使いこなせるレベルに達せなくて焦りました。（結局リーダーしてくれたひとがやってくれました）

案自体がふわっとしてて、どうする…みたいな重たい空気が最初の１時間流れましたが、
チームに誘ってくれた人が「このままパソコンの前に座ってても仕方ない、外に行こう」と言うので使えそうな写真を撮りに外に出ることにしました。
外に行こうと言い出したひとはもともとLIGブログが好きで、この会のために東京にきた学生さんでした。
「どういう展開になっても楽しむ、ことに目的をおいてきた。あのまま悩んで他のチームに行けばよかったと後悔したくなかったから結果はどうなっても過程を楽しみたい」
という思いを聞いて、ちゃんとしたものを作らなきゃとか目立ったことしたくないみたいな気持ちを一旦抑えました。

その代わりに、一緒に楽しもうという考えにチェンジすることにしました。
被写体になることも修行だ！って吹っ切ってみたり
エンジニア枠は優秀なリーダーがやってくれてるから自分は写真に添える文章を書きました。

他チームの記事はサイト上で確認しましたが
その発想！？みたいなのもいくつかあって面白かったです。
怪奇現象かなんかの記事は結果発表のひとが観点がおもしろいと熱く語っていてから興味が沸きました。
あと数学好き天才小学生がいて将来有望だとかニヤニヤほほえましくてしました。
個人的には一番最後のチームの写真へのつっこみが絶妙で好きでした。※
結果発表でなんらかの賞はもらえましたが、他のチームが要件を満たしてない相対、くらいのものだろうと思ったのでチームとして楽しんで自分の写真は公開されずに済んで一安心しました（とくに後者の安心感はんぱなかったです）

あと、そのあとに開催された懇親会でうれしかったのは
「タイトルが少しずれてるのが笑えた」と一番お話した方に言われたことです。
しかも、※のつっこみ記事書いた人だったのでなおさらです。

これだけは言っておきたいのですがE2D3といえばいがらしさんですが、
この方がおもしろいからきたというリーダーさんの言葉がうなずける人をひきつける力のあるひとだなと思いました。
No知識でいったので、覚えたてのR2D2とごっちゃになって正しく認識するのに時間がかかったことをここで白状します。

その後の２次会で最初におもしろそうな案だな、と思ったチーム（優勝されました！）の方ともお話できて
そこで起きていたドラマを聞いてから、私の初ハッカソンdayを終えました。

そろそろ時間も経過して検索にひっかからないであろうことを予測したタイミングでの公開です。。

プログラマ暦でいうと10年くらいあるんですが、デザインに関してはこんな感じ
�@基本１から作ることがない
（テンプレートが用意されている(デザインがhtml、cssで用意されたものを起こす)
ということしかしてないjavaエンジニア)

�A絵心やデザインセンスを持ち合わせずなんとかしてきた
デザイン以外のお客様の要望には応えてきた。3年目くらいで自社のHPデザイン変更を求められやってみたが自分ですら「センスないひとが作ったな」と思ったとか思わなかったとか。わかったのは画像作る技術や色の組み合わせ等は別物だということ

�B「ホームページとか作れるんですか？」と聞かれると「一応は…」
プログラマ以外の人に職業を話すと大体聞かれる質問なのに、毎回うろたえる

そして、ついにこの日がくる
「ホームページ作ってほしいんだけど」

デザインできないから。。。って言ったんですが、そんなのhtmlわからない人にはわからないんだろうな･･･
と、どう断るかしか考えてないなかでふと思ったのは
「だから私はできない（やらない）ままなんだな」ということ。

そういう人にイラつくくせに、自分もそうならやってみるしかないなと思い
「代金は出来たものを採用するかどうかで決めて欲しい」と言い、作ってみることにしました。
この時点でほぼ自分のためにやるから代金はもらうとしてもご飯代くらいにしよう（相手も無料じゃ気がすまない場合）でスタート。


3年目に会社のHP作ったときに直面したのがここだったのでまず考えました。
・どこに置くか（サーバー無料/有料)で、できることの制約も変わります。
月並みに「ワードプレス使えばデザインセンスない部分を解決できる」と思い
ワードプレス使えるレンタルサーバを調べ(月額1000円以下)依頼人に伝えると
今つかってるところをそのまま使いたい、デザイン変更だけでいい
と回答が来ましただからデザインできないって言ったのに。。。

そのため
・htmlベース
・画像は外部ソース使えない
・当然ワードプレス使えない
という制約がのしかかりました。おやおや…いきなりビハインドの風が。

しかし、おかげで
・htmlで作ればよい（PHPなどで動的につくらなくてよい)
・デザイン変更だけでいいなら主な文章は考えなくて良い（現行の使い回しできる）
・デザインは現状の和なデザインを変えるだけで一旦よしとする
・サーバは現行引き続きなので考えなくて良い(xdomainの無料プラン）
というのがわかってきて一安心


次にしたのが、今使われているhtmlで何をしてるかをちゃんと見ることでした。

わかったこと
・スマホ対応してないので、スマホでgoogle検索してもHPがヒットしない（別のブログや他のサイトの情報は出るのに、本家が出ないという矛盾が生じている）
・SEO対策が皆無
・情報が古い（htmlのテーマですよね。。。更新しなければ更新されない。本人のマメさにもよるのか）
・内容はいたってシンプル

上記を調べてやりたいこと
・スマホ対応をなんらかの形で行う→bootstrapを使ってレスポンシブ対応する
・SEO対策する
・デザイン変更だけでいいとは言われたけど、情報も少し更新してあげたほうが親切だからやろう


・自分のやる気（お正月でやると言ったのに結局まったく手付かず。デザインに詰まって逃避行動を重ねたのが原因）
無料で引き受けると決めたわりに、結局それを逃げ道に使っていました。
お金もらうんだからちゃんとやろう、プロなんだからという意識で取り組む必要がありました。
色々回り道しましたが、大枠の作成は8時間もかからなかったので１日で作ることができました。
・デザインセンスないくせになんとかしようと背景やら色の組み合わせに懲りだして時間を使い、飽きる。

色々なサイトを参考にしているときに「初心者はデザインを自分でやるな、時間の浪費」記事を読んでやめることにしました。
bootstrapで提供されているデザインをそのまま使うやり方に変更しました（自分で色かえたりしない）


Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】
このページを上からコピペして確認してから使うデザインを決めていきました
Googleも推奨！アニメーションライブラリTweenMaxの使い方　入門編
画像が限られているため少しでも凝っている風に見せようと行き着いたのがこれでした。動かしたりじわじわ表示させたり程度にしておいて、凝るのはストップ（時間の浪費w）。
youtubeの動画をサイトに埋め込んで再生できるようにする
入門編しか見てないですね。そうです、いきなり上級なことできるはずがありません。まずは基礎。
依頼人はアーティストさんなので自分の動画もできたら載せたいという要望がありましたが、もともとyoutubeにあげているLIVE動画をそのまま使えることだけは知っていたのでサーバの容量問題はクリアしました。
画像が自ディレクトリのものしか使えない制約があるので、試してからになります。

そして、今日その仮で作ったものを依頼人に見せる日です。報告はまた別途。

PCを以前に使っていた人の環境引き継ぎましたが、mongoは使っていないのでサービス自体を削除したくなりました。
「mongoDB アンインストール windows」で検索してもそのものが出てこないし、
windowsのコントロールパネルの「プログラムのアンインストール」にはそもそもリストアップされていないし。。。なんで
と試行錯誤しながらやっとアンインストールできました。

基本操作はこれでOK
なのですが、注意したほうがいいのが２点ほどあったので書いておきます。


権限がないユーザでコマンドプロンプトを起動したから。
起動時に「管理者として起動する」を選択しましょう。
（いつもショートカットキーを打って起動していたのですが権限がないユーザでしかログインできないときもありますもんね）


削除コマンドを打ってもこれまた認識されない。
それもそのはず、このコマンドをうったときのカレントディレクトリが違うところだったからです。
mongoDBをインストールしているディレクトリ（mongod.exeがある階層)で実行してみてください。

C:\Windows\system32>mongod.exe --remove
'mongod.exe' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

cd c:\mongodb\bin
c:\mongodb\bin>mongod.exe --remove
2016-01-12T15:30:06.835+0900 I CONTROL Hotfix XX1234567 or later update is not
installed, will zero-out data files
2016-01-12T15:30:06.837+0900 I CONTROL Trying to remove Windows service 'MongoD
B'
2016-01-12T15:30:06.903+0900 I CONTROL Service 'MongoDB' removed

これで、サービスを更新してみると削除されていることが確認できます。

バージョンが古いけど実行環境をこれで作ったので、ここでの覚書き。
いろんなサイトさまの情報を元にしてもバージョンの差で各種エラーが出てそのとおりいかないことなどをメモしておきます。

python2.7→python3系で対応してないものがあるかも&情報がまだ少ないので2.7を選んだ
django1.9→現状(2016.1.8)の最新がこれだった。2.7以上で対応してるっぽいので問題ないと判断。

IDEはeclipse(pleiades-e4.3)、pydevは4.4.0です。

djangoプロジェクトの作成

1. Pydevパッケージエクスプローラーで右クリック→「新規」→「その他」
2. Pydev→「Pydev Djangoプロジェクト」を選択しで「次へ」
3. プロジェクト名を任意で入力(ex.komekome)※他の値は初期値ですがプロジェクトタイプは「Python」、文法バージョンは2.7でした。)
4. 参照されるプロジェクトがある場合はそれにチェック(今回は新規なのでチェックなし）で「次へ」
5. Django version→「1.4 or later」(※1.9だから)、データベースは今は使わないので変更せず「完了」

djangoプロジェクトは１つで、その中に各種アプリを追加するイメージらしいので、この作業は基本１回だけのようです。

現状のディレクトリ構成

komekome
--manage.py

-- komekome
    --__init__.py
    --settings.py
    --urls.py
    --wsgi.py

この時点で実行（実行→Pydev/Django）したのち、「http://127.0.0.1:8000/」とやると、「It worked!」が青背景で表示されたらここまではOKです。
駅伝でいうと走れる権利を得てスタート地点に並んでるくらいです（ここまでくるのも大変だったがまだ始まってない）

アプリケーションの追加

1. プロジェクト「komekome」を右クリック→「django」→「create application(manage.py startapp)」
2. app nameに任意記入(ex:onigiri)→OK

現状のディレクトリ構成

komekome
--manage.py

-- komekome
    --__init__.py
    --settings.py
    --urls.py
    --wsgi.py
-- onigiri # --NEW!!
    --migrations
    --__init__.py
    --admin.py
    --apps.py
    --models.py
    --tests.py
    --views.py

やりたいこと：「http://127.0.0.1:8000/onigiri/」とブラウザで指定するとなんらかのおにぎりの具材が表示される
そのための設定を各種追加していきます。

1. 表示するhtmlを作成
2. settings.pyにhtmlのあるディレクトリを追加
3. views.pyにロジックを追加
4. urls.pyにurlのパスを追加

1.プロジェクトの直下に「template」フォルダを作成し、「onigiri/index.html」を作成
2.htmlを作成

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    今日のおにぎりは何食べたい？<br/>
    {{message}}<br/>
</body>
</html>

プロジェクトにひとつだけの「komekome」フォルダにある「settings.py」にパスを通します。

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

となっている「DIRS」が編集対象です。絶対パスを通します。

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['/workspace/komekome/template'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

TEMPLATE_DIRSとして、TEMPLATESと別の定義にしてしまうと
と怒られるので、当環境のdjango1.9ではTEMPLATESの中にdict形式で追加するしかなさそうです。

def index(request):
return render(request, 'onigiri/index.html', {"message": "うめ"},)

ルートとなる「komekome」のurls.pyへの定義は必須ですが
各アプリのパスを細かくここに定義するもよし、細分化するもよし（諸説ありそうですが）
私は今回、細分化するほうを選びました。
1.komekome/urls.pyの編集

from django.conf.urls import url,include

urlpatterns = [
url(r'^onigiri/', include('onigiri.urls')),
]

onigiriのパスはonigiriディレクトリのurls.pyを見るようにしていると思われます。

2.onigiri/urls.pyの編集
ファイルがない場合はまずurls.pyを作成してから

from django.conf.urls import include, url
from onigiri import views # ← views.pyをimport

urlpatterns = [
url(r'^$', views.index , name='index'),
#url(r'^(?P\d+)/$', 'firstapp.views.detail'),
]

このurlの定義によるエラーがけっこう取れなくて苦労しました。。エラーが出るので間違っていることはわかっても。
一番参考になったのは、komekome/views.pyに最初から載っているコメント文です。

"""komekome URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/1.9/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: url(r'^$', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.conf.urls import url, include
2. Add a URL to urlpatterns: url(r'^blog/', include('blog.urls'))
"""

定義を置く階層ごとに指定するものが違う。。。？ことに最初に気づかせてもらったのもこれのおかげです。

あとは、これで「実行」→「Pydev:Django」でサーバ起動し、ブラウザで
http://127.0.0.1:8000/onigiri/
とすると、あれ？エラー。

というエラーが出ているので、たぶん文字コード問題と推察し、
onigiri/views.pyを以下のように編集

# -*- coding: utf-8 -*-

from django.shortcuts import render

# Create your views here.
def index(request):
return render(request, 'onigiri/index.html', {"message": "うめ"},)

どのタイミングでもこの前提に気をつけるだけで違いそうですね。

それではもう一度、
http://127.0.0.1:8000/onigiri/を指定

今日のおにぎりは何食べたい？
うめと昆布

が表示されました！
かなりの初歩ですがやっとできた！この定義問題にはまりまくったので動くとうれしい！
けっこうバージョンで定義のお作法が違うので安易になんでもいけるわけではなさそうです（当たり前）

いきなりdjangoをやろうとしたから初心者（=me)つまづいんだ。。。と改めて

pythonをコマンドプロンプトで実行する基礎から学びだしました。

もっぱらお世話になっているサイト→ここ

私の実行環境だと、日本語はすべて



としないと、文字コードが化けてしまう問題がありながらも、最初に「u」つければいいだけじゃん

と楽観視していたのですが、そこでぶつかった壁が

DBからとってきた値の文字化けでした。

このselectサンプルを実行すると

===== Hit! =====
code -- 1
name -- python
===== Hit! =====
code -- 2
name -- 繝代う繧ｽ繝ｳ
===== Hit! =====
code -- 3
name -- 縺ｱ縺・◎繧

となってしまうんです。utf8に指定しているのになんでだろう。

結果
文字コードの重複指定？

for row in result:
print "===== Hit! ====="
print "code -- " + row[0]
print "name -- " + row[1] #row[0].encode('utf-8') にするとかえって日本語が文字化ける

こうすると

===== Hit! =====
code -- 1
name -- python
===== Hit! =====
code -- 2
name -- パイソン
===== Hit! =====
code -- 3
name -- ぱいそん

が表示されるようになりました。

先行のかたがたのブログを読ませていただくと、文字コードが永遠のテーマのように書かれていますが
自分で経験すると本当にそのとおりなのかもしれないなと理解した次第でした。

プロジェクトを右クリック→「チーム」→「切り替え」
で、エラーになって切り替えできない時、選択肢が３つ出てきます

• commit
• stash
• リセット

■今回は「編集したものは破棄でいいよ。残さないよ」＝リセットしました。





残り２つは必要に迫られたら随時編集します。。。

==========
2015/10/20 必要に迫られたのでstashを使ってみました！
作業中のブランチ(ex:localA)をコミットせずに違うブランチ(ex:master)に切り替えたくて、ためしにstashを選択してみました。
コメントを求められたので(temp workspace)と雑なコメントを残してみました。

それからlocalAに戻してみたものの、先ほどの編集してたものは戻っていない…（汗）

と思いきや

1. ブランチを右クリック
2. チーム
3. stash


4. [0:temp workspace]を選択
5. 先ほどコミットしてなかったファイルの一覧が出てくる

あとは、このファイルの一覧から「Compare with workspace」を選択するとマージツールが起動するのでそこから修正できました。

これが今までしたかった！！！今までよくわからず自分で退避フォルダ作ってからリセットしてた浅はかな自分を笑うかのようなstash機能でした。

SourceTreeがバージョンアップされたら何か変わったっぽいので再投稿。

■環境
SourceTree version 1.6.22.0

■目的
eclipseで作業中のワークスペースおよびリポジトリを操作できるようにしたい

■操作

1. メニューバーの「新規/クローンを作成する」を押下
2. タブは「作業コピーを追加」を選択（初期は「リポジトリをクローン」になってるけどクローンしたくないので）
3. 「作業コピーのパス:」の欄に作業中のgit作業ディレクトリを選択
4. 追加

eclipseでpythonを動かすにはプラグインが必要です。

・「ヘルプ」→「Eclipseマーケットプレース」→検索でpyDevを選択

とにもかくにもインストール。してみる。

私の環境の場合、ネットワーク接続でHTTPSの設定ができてなくてインストールでつまづいたのでご注意。

で、Django使ってみたいなーと考えたので、

こちらの情報をもとにインストール。

ちなみに、わからないながらもPyDevのインタープリターに設定を追加しました。

「ウィンドウ」→「設定」→「PyDev」→「インタープリター」→「Python InterPreter」→インストールしたPythonを指定。（私ならC:\Python34\python.exe)


補足 pip install hogehogeが使えず、。
'pip' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
が出続けて困ってました。
Pathも通したけど、おそるおそるコマンドプロンプトのカレントディレクトリを変更したら認識されました。

×C:\Python34>
〇C:\Python34\Scripts

さらに追記
上記「Pathも通したけど」はシステム環境変数に指定したときでした。
システムだけでなく「ユーザ環境変数」にもPathを通したらできました。
詳しくはここを参照しました