読者です 読者をやめる 読者になる 読者になる

pythonerになりたいWEBエンジニア(仮)

python、WEB開発、ExcelVBA、自動化、VR、Unityについて書いていきます

python + djangoでアプリ開発4

こんばんわ、siroです。

前回までで、CSSの読み込みに成功したため、画面のフォームを作ってみました。

※前回記事は以下参照

a-zero.hatenablog.com

 

 

新規登録画面モック作成

新規登録画面の画面モック作成をしました。

画面モックとは、処理を含んでいないHTMLで作成したサンプル画面のことです。

 

フォーム系の部品はsemantic-UIでほぼ作成しましたが、h1、h2などについては、

ネットで探したものを少し直したりして、自作しました。

semantic-UIはボタン可愛くていい感じです。

 

f:id:sirosiro346:20170504000918p:plain

 

ちょっと時間がなくて画面しか作れなかったですが、次はDB連携して実際にデータ登録するところを作ってみようと思います。

 

DB連携時はpythonSQLを書く方法と、SQLServerのストアド(ストアドプロシージャ)を作成し、pythonでストアド実行する方法の両方で調査してみようと思います。

 

ストアドに書く方法の方が個人的には好きなんだけど(速度的な意味で)、pythonでできるといいなー

 

ではではーノシ

 

python + djangoでアプリ開発3

こんばんわ、siroです。

先日python + DjangoでWEBアプリ作ってやるぜ!と以下記事で意気込んでスタートしたんですが、初っ端躓いたのでブログに残しておこうと思います。笑

※前回の記事は以下参照

a-zero.hatenablog.com

 

つまづいたこと

前回の記事でも書きましたが、まずはサンプルのページを作っていこう!

ということになったので、さっそくcssフレームワークであるsemantic-UIを入れて、

サンプルページ開いてみたんです。

その時の画像がこちら。

 

f:id:sirosiro346:20170501233438p:plain

 

・・・え!!?

いや、これぺーじ?え?

 

一瞬何が起きたのか意味不明でした。

だって、本来はこうなるはずなんですから・・・

 

f:id:sirosiro346:20170501233639p:plain

 

なんだろうね。

初っ端うまくいかないとやる気なくなるよね。笑

 

で、色々調べた結果、djangoで静的ファイル(cssとかimgとか)を読み込むときは、

若干設定がいることが判明。

なにやら、セキュリティを意識してどこでもアクセスできるようにしていないんだとか。

そのため、静的ファイルを読み込む設定が必要となるそうな。

※詳しいことはあまり調べていません

 

Djangoで静的ファイルを読み込む設定方法

設定ファイルと、表示するhtmlの先頭におまじないをし、パス設定時も特定の記述をすれば良いとのことでした。

※以下参考

Python Django チュートリアル(6) - Qiita

 

setting.pyに以下追加

STATIC_URL = '/static/'
STATICFILES_DIRS = (
     os.path.join(BASE_DIR, 'static'),
)

 

フォルダ構成を以下のように変更


PJ名

 |--PJ名
 |
 |---template 
 |   |---index.html
 |

 |---static
  |--css
  |
  |--img
  |
  |--script
  |
  |--Semantic-UI-master

 

htmlファイルを以下のように修正

staticファイルを読み込む記述を先頭に追加

{% load staticfiles %} <!-- ← 追加 -->

cssなどの静的ファイル読み込み時のパスを以下のように設定

<link rel="stylesheet" type="text/css" href="{% static 'Semantic-UI-master/dist/components/〇〇〇〇.css' %}">

 

 semantic-UIのサンプルを利用した図書管理システムサンプル

そして、semantic-UIのexampleにあるfixed.htmlを少しいじって、できたサンプル画面がこちら。

f:id:sirosiro346:20170501235430p:plain

おおー

なんとなくそれっぽい画面ができた。笑

 

ヘッダメニューがあって、コンテンツが真ん中にあるのでいったん良しとします。笑

なにより、

 

CSSちゃんと読み込めたしOKです!!!!

 

まさかこんなところで躓くと思わなかったけど、新しい言語学ぶとこういったことはあるあるなので、これからもへこたれずにやろうと思います。

 

次回はいよいよ新規登録画面作ります。

テキストボックスやら、ラベルやらいろいろ用意して、入力したデータをDBに登録するところって感じですな。

入力チェックもそれなりに入れたいね。凝りすぎない程度に。

ログイン画面はまー、最後でもいいかな。笑

さっそく予定が崩れてきてますが、モチベ優先でやっていこうと思います。笑

 

ではではーノシ

python + djangoでアプリ開発2

おひさしぶりです。siroです。

下記記事を書いてから本業が忙しくなり全然更新できていませんでした。

 

a-zero.hatenablog.com

 

ゴールデンウィークに突入したので、いよいよdjangoでWEBアプリ開発してみようと思います。

phpC#以来なので久々ですが。笑

 

 

WEBアプリ開発学習の方針

開発にあたって、まずは学習の方針をきめておこうとおもいます。

何事も最初がふわっとなりすぎると、作ってみて飽きてしまったり、途中でやめてしまったりするので。

 

 

今回ですが、まずは「python + django」の初利用ということで、簡単な新規登録、更新、削除、登録内容表示などの、いわゆるCRUDアプリを開発しようと思います。

登録内容もできるだけ凝ったものにはせず、簡易的なものでスモールスタートしようと思います。

 

以下簡単にシステムの概要やらなんやら書いてみました。笑

 

システム

  • 図書管理システム

機能一覧

  • ログイン
  • 新規登録
  • 更新
  • 削除
  • 一覧表示( 検索機能は一旦設けない )

その他

  • CSSフレームワークにはsemantic-UIを使用予定
  • 検索表示機能や、CSV一括取り込み、一括更新などの凝った機能は一旦考慮しない
  • DBにはSQL Serverpythonに使用しやすいDBを探して利用
  • 開発後にデプロイ先のレンタルサーバなどは探すが一旦ローカルで開発する

 

図書管理システム開発で学ぶこと

今回のWEB開発で学ぶことは、pyhton + djnagoを利用した基本的なCRUDアプリを作れるようになることです。

pythonを使っているため機械学習を取り入れた方がいいんじゃないかとか最初は考えましたが、どちらかというとそれは次のステップかなーとも思うので。

シンプルに言うと、

 

pythonでWEB開発の土俵に立つ!

 

これが目的ですね。笑

 

 

スケジュール

スケジュールといっても作業単位でいつまでに?というのは決めない予定ですが、

一旦下記流れで開発を予定しています。

  1. 簡単な画面構成検討・モックページ作成
  2. pythonSQL server連携する方法の調査・検証
  3. 簡易DB設計 (今回のアプリのDB構成を簡単に考えます)
  4. 製造 - ログイン画面
  5. 製造 - 新規登録画面
  6. 製造 - 一覧表示画面
  7. 製造 - 更新画面
  8. 製造 - 削除画面
  9. デプロイ先サーバ調査
  10. リリース

本来はどこにどのぐらい工数がかかるか見積もったうえでやっていくべきなんだろうけど、一旦見積もりはしません。笑

厳密にやればやるほど、最初の準備につかれて開発がストップしてしまうのが自分なので、楽しく開発していきたいと思います。笑

 

さて、やったったんぞー。

ではまたーノシ

参考

  • semantic-UI

job-is.jp

 

  • DB設計ツール - a5mk2

forest.watch.impress.co.jp

 

初めてのLeapMotion - 買って動かしてみた

さて、今日はLeapMotionを使ってみるよ!

リープモーションってなんぞ・・・?



・・・はい、ということでLeapMotion買って動かしてみましたので、記事にしました。
買ってみたはいいものの、PCにグラボがなくて、動かない雰囲気だったのですが、
グラフィックオンボードで動きました!ヌルヌルではないんですけどねー
以下詳細





LeapMotionとは?


操作コントローラとして利用できるセンサーの一つで、手を画面に表示して操作できるんです。
こんな感じ

f:id:sirosiro346:20170402122424p:plain

環境構築


下記サイト参考にしました。

gigazine.net



要約すると、https://www.leapmotion.com/setupにアクセスして専用ツールをダウンロードして実行するだけなんですが、
このインストール時に問題発生。

NVDIAのドライバを最新にしてくださいというメッセージと、リンク先にとんだんですが、
そもそもPCにグラボが履いていなかったため、NVDIAのドライバインストールしようとしても

グラボがないのでインストールできませんw

というメッセージにあおられ、その日は断念。


後日、インスタでLeapMotionを使っている方にPCスペックについて質問したところ、ノートPCの方は
グラフィックオンボードを使っているとのこと。
ハード全く詳しくなかったので調べてみると・・・グラボではないが、グラボみたいなものがもともと備わっている?らしく、
それを利用できるらしい。
※テキトーな表現ですみません。笑

つ・ま・り、
NVDIAのメッセージ全スキップでも、動かすことできますよ
とのことだったので、全スキップしてみた結果

f:id:sirosiro346:20170402123224g:plain


うごいた!!!!!(´;ω;`)


これで、Unity使って開発する準備が整いました。
一旦勉強がてら、pythonでUnity開発後のサンプルをアップするサイトでも作ろうかな。
実績を残せるようなサイトで、WEB展示できるようなシステムにしたいなー

やー、教えてもらってなんとかできたってだけなんだけど、とても達成感がある。
これだから開発はやめられんわー♪
チュートリアル動かしただけだろというツッコミはなしでお願いしますw

ではまたーノシ

はてなブログ力向上 - 会話形式のCSS追加

これからは会話形式で進めていくよ。宜しくね。

ITさっぱりちんぷんかんぷんなのでお願いしまーす♪

という会話形式のCSSを利用し、実際に会話してみたけど結構おもろいな。笑
キャラは知り合いの絵描きさんに書いてもらったやつです。以前これでゲーム開発とかしてました。笑
就活性の後輩にパワポ資料作るときにも出したことあったなー笑

以下参考にしました。 georges.hatenablog.jp

python + djangoでアプリ開発1

おはようございます。siroです。
python環境構築進めて、以下記事にて「pythonw.exe」がwindows用だったんだ!
と書きましたが、どうやらそもそも実行の方法が間違っていただけらしい・・・
Anaconda環境にPyCharm導入 (途中で失敗w) - pythonerになりたいWEBエンジニア(仮)

C# + VisualStudioをメインに利用していたところから、
python触り始めたので、色々と自分の中で認識違いが多いらしい。
先にことわりを入れておきますが、pythonアンチではないです。
今まで使用して慣れている環境との違いを理解して、次へ進むための備忘録です。笑


アジェンダ




C# + ASP.NET + IIS + VisualStudioの場合

 とにかくソース実行したいときはVisualStudioでソース開いてF5押してデバック確認可能!
 設定もろもろあるっちゃあるけど特にやらなくても開いているソースがそのまま実行される。
 変更もHTMLやCSS等のフロントレベルならそのまま書き換えて更新可能、それ以外も一時停止して更新可能
 ※usingや、そもそもメソッドの名前書き換えたりは実行中はできないため停止してからになる
 

python + django + PyCharmの場合

 PyCharmを起動し、『コンソール』を立ち上げて以下文実行
 「python manage.py runserver」
 これが、ViusualStudioの実行と同義らしい
 VisualStudioで実施していたように、manage.pyを開いてPyCharmの実行のボタンをクリックしてもなぜかエラーになる。
 
 下記どちらかかもしれない

  • コンソールから必ず起動が必要?
  • PyCharm介して実行する際の設定として権限的な何かを設定する必要?  
    とりいそぎ、『コンソール』で「python manage.py runserver」実行として動くので、このまま進めてみようと思う




【結論】実行はコンソールでやることを学びました。



django環境構築はこの人の記事を参考にしました。
qiita.com



上記参考にPyCharmにて環境設定後、コンソールにて以下実行でdjango用のディレクトリ構成及び、 動作に必要なファイルの作成ができます。

django-admin startproject ※プロジェクト名」
 ※プロジェクト名mysiteにしました

で、実行もコンソール使います。
一旦下記で実行可能

python manage.py runserver」
※先に、cdコマンドで、manage.pyがあるフォルダに移動しておく必要があります。
  今回の例で言うと、「cd webapp」⇒「python manage.py runserver」の流れですね。


こんなかんじ
f:id:sirosiro346:20170319085613p:plain



実行後、localhostに接続すると?
f:id:sirosiro346:20170319085649p:plain



キタ━━━━(゚∀゚)━━━━!!

とまあ、色々ありましたが動くところまでやっときました。
いよいよ開発が本格化してきそうです。

ワクワクしてきたー


これからも楽しんで開発進めようと思います。



ではではー

Excel効率化 - ショートカットキーで操作効率化!の巻

Instagramにて、Excel効率化案の需要について聞いてみたんですが、それなりにいいねがあったのでまとめてみました。

f:id:sirosiro346:20170316003641p:plain

目次





Excelショートカットキー既存編

Excelで簡単に一覧化しました。下記ご確認ください。
マウス操作を無くすほどに操作速度は上がっていくと思います。
※こちらは既存のショートカットのみで覚えた方がいいものをピックアップしています。
f:id:sirosiro346:20170315235420p:plain





Excelショートカットキーカスタマイズ編

ここからが本番です。
ショートカットキーって使いたい機能を覚えようとすると、平気で3つボタンが必要だったりしませんか?
使い続ければそれなりに早くなるかもしれませんが、よく使う機能だったりすると指つりますよね?笑
そんな時は、クイックアクセスツールバーに登録しましょう。ボタン2つで実行ができるようになります。


クイックアクセスツールバーとは?

画面左上に存在するボタンのショートカットキーです。
こちら設定しておくとなんと、『Alt + 数字』で利用できるんです。


クイックアクセスツールバー設定方法

利用する機能のボタンで右クリックし、『クイックアクセスツールバーに追加する』を選択するだけです。
※例では、セル結合をクイックアクセスツールバーに追加しています。
f:id:sirosiro346:20170316000007p:plain f:id:sirosiro346:20170315235941p:plain

上記設定すると、『Alt + 1』でセル結合ができるようになります。




クイックアクセスツールバーおすすめ設定

私の場合は以下のように設定しています。
基本的にはよく利用する機能をクイックアクセスツールバーに追加し、
使う順に1から設定すればかなり効率化できるかと。

f:id:sirosiro346:20170315235920p:plain f:id:sirosiro346:20170316000012p:plain

自分以外にあまり使っている人を見たことないので、覚えておくとちょっぴり注目されるかもしれませんね。



さらに効率化したい方

実はこのクイックアクセスツールバーにマクロをボタンにして追加が可能です。
そのため、よく使う機能はマクロ化し、クイックアクセスツールバー化しておくと、
限りなく速度を早められます。


・よく使うテーブル構造をマクロ化しておき、ボタン一つで挿入
・アクティブになっているシートをコピーして新規シート作成
etc…


マクロについては今度書き方とかまとめますね。pythonメインなので、少し後になりそうですが。。。笑
需要がありそうであれば書きます。


ではではー

siro