Anthor.Net » Développement http://www.anthor.net Mon, 05 Dec 2011 16:29:41 +0000 en hourly 1 WebGL avec Three.js http://www.anthor.net/blog/developpement/webgl-avec-three-js/ http://www.anthor.net/blog/developpement/webgl-avec-three-js/#comments Sun, 12 Jun 2011 13:23:30 +0000 Anthor http://www.anthor.net/?p=794 Avec l’arrivée de WebGL dans les derniers navigateurs, il était temps de faire quelques essais. N’ayant aucune connaissance en programmation 3D, je me suis aidé de Three.js, une librairie permettent de proposer un API « simple ». La documentation est inexistante, mais les exemples fournis sont nombreux et permettent rapidement d’obtenir quelques résultats, à condition d’avoir de bonnes connaissances en JavaScript et de savoir se débrouiller !

Pour commencer, il me fallait quelque chose de simple, jouant à Minecraft depuis quelques mois, je me suis dit, qu’utiliser des cubes serait un bon moyen de tester les possibilités, sans entrer dans des formes complexes. De ce constat est né l’idée de Minecraft Blueprint, un service qui permettrait de créer des formes en ligne, composées des matériaux disponibles dans Minecraft, et proposant aux visiteurs de pouvoir recréer ces plans avec facilité.

Je n’avais pas prévu au départ d’ouvrir le site publiquement avant d’avoir un éditeur complet et stable, mais la version de développement ayant été relayé sur LearningWebGL, il en a été autrement !

Finalement, j’ai réussi rapidement à avoir quelques rendus sympathiques, mais mes connaissances restent trop limitées pour arriver à optimiser mon code pour les différentes versions de Firefox et de Chrome.
Aujourd’hui les dernières versions de ces deux navigateurs proposent WebGL activé par défaut, et sont plutôt bien introduites. De plus Three.JS proposent aussi un moteur de rendu en Canvas et en SVG, bien que les performances en sont bien moindres.

Malgré cela, je pense qu’il y a de bonnes applications pour les jeux par navigateur, et pour des applications en ligne. On peux tout à fait imaginer des plateaux de jeux en 3D, des cartes, des interfaces, des pages d’accueil…

Il me reste encore quelques ajustements à faire pour sortir l’éditeur publiquement, mais le travail est en bonne voie ! Actuellement j’ai réussi à implémenter une grande majorité des blocs du jeu, et je dois m’attaquer aux objets avec une orientation, ainsi qu’à plusieurs travaux d’optimisations, surtout sur des constructions de plus de 2000 blocs.

]]> http://www.anthor.net/blog/developpement/webgl-avec-three-js/feed/ 0 Démarrage rapide avec Webgame Achievements http://www.anthor.net/blog/developpement/demarrage-rapide-avec-webgame-achievements/ http://www.anthor.net/blog/developpement/demarrage-rapide-avec-webgame-achievements/#comments Tue, 05 Oct 2010 17:23:35 +0000 Anthor http://www.anthor.net/?p=768 Un service destiné à être utilisé par des néophytes se doit d’avoir une bonne documentation, actuellement, ceci manque sur Achievements, principalement par manque de temps, et aussi car j’aime avoir un contact proche avec les participants.

Néanmoins, je livre ici une première version du « Quick Start », et d’autres suivront. La publication va permettre de motiver plus de jeux à participer, notamment en expliquant de façon un peu plus détaillé le fonctionnement de l’API. Ce tuto est disponible pour les éditeurs, de façon privé, dans leur interface.

Achievements se compose d’une classe PHP ainsi que d’une feuille de style, permettant la communication avec le service et l’affichage au sein du jeu.

Le service requiert d’installer sur le serveur l’extension CURL (Pour communiquer avec le serveur) et l’extension MCRYPT (Pour crypter les communications entre votre jeu et le serveur).

Imaginons une page standard comportant un formulaire, ce formulaire servira à introduire les mécanismes de communication vers le service, en simulant l’activité du joueur, tel qu’une attaque ou une création d’objets. 

<?php
$nbObject = 0;
 
if( isset($_POST['playerAction']) && !empty($_POST['playerAction']) )
{
    // Ici votre code habituel pour gérer l'action du joueur
    $nbObject = (int) $_POST['playerAction'];
}
?>
<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Démarrez rapidement avec Achievements</title>
</head>
 
<body>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <input type="text" name="playerAction" value="<?php echo $nbObject; ?>" />
        <input type="submit" value="Action du joueur" />
    </form>
</body>
</html>

La page d’exemple est volontairement simplifiée afin de se concentrer sur la mise en place du service.

Inclure la classe Achievements

Récupérer le code PHP de la classe Achievements (Disponible dans la rubrique Éditeur » Fichier API) afin de l’injecter dans un fichier « Achievements.php ».
Si vous utilisez la version commune, il faut penser à modifier les clés privées et publiques, pour correspondre à celle de votre jeu.

Une fois le fichier créé, il suffit de l’inclure dans votre projet. De cette manière, la classe est accessible pour être utilisée. 

<?php
require_once APPLICATION_PATH . '/Achievements.php';
 
$nbObject = 0;
 
if( isset($_POST['playerAction']) && !empty($_POST['playerAction']) )
{
    // Ici votre code habituel pour gérer l'action du joueur
    $nbObject = (int) $_POST['playerAction'];
}
?>
<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Démarrez rapidement avec Achievements</title>
</head>
 
<body>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <input type="text" name="playerAction" value="<?php echo $nbObject; ?>" />
        <input type="submit" value="Action du joueur" />
    </form>
</body>
</html>

Il est recommandé de placer cette ligne le plus tôt possible dans votre projet et avant toute sortie HTML.

Inclure le style CSS

Vous pouvez définir différentes couleurs afin d’harmoniser le service avec votre jeu dans la rubrique Éditeur » Éditeur de style CSS.

Une fois vos couleurs définies, copier/coller le code source obtenu à la fin de votre fichier CSS actuel, ou bien en créer un nouveau et intégrez-le dans le header de votre jeu. 

<?php
require_once APPLICATION_PATH . '/Achievements.php';
 
$nbObject = 0;
 
if( isset($_POST['playerAction']) && !empty($_POST['playerAction']) )
{
    // Ici votre code habituel pour gérer l'action du joueur
    $nbObject = (int) $_POST['playerAction'];
}
?>
<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Démarrez rapidement avec Achievements</title>
 
    <link href="/css/achievements.css" media="screen" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <input type="text" name="playerAction" value="<?php echo $nbObject; ?>" />
        <input type="submit" value="Action du joueur" />
    </form>
</body>
</html>

Il est recommandé d’utiliser votre fichier CSS existant afin de limiter le nombre de requêtes sur votre serveur.

Instancier un joueur spécifique

Un joueur est reconnu sur Achievements grâce au hash de son email.
L’architecture de la classe permet de travailler sur plusieurs joueurs à la fois, ainsi, vous pouvez tout à fait accorder un succès à un joueur qui a paré l’attaque du joueur courant.

Dans notre exemple, nous instancions uniquement le joueur courant, afin d’envoyer des informations le concernant.
Dans tous les cas le hash de l’email est unique, assurant que le joueur retrouvera ces informations qu’il soit inscrit ou non sur Achievements au moment de l’action. 

<?php
require_once APPLICATION_PATH . '/Achievements.php';
 
$myPlayerAchievements = Achievements::getInstance( 'emailDuJoueur@domaine.com' );
 
$nbObject = 0;
 
if( isset($_POST['playerAction']) && !empty($_POST['playerAction']) )
{
    // Ici votre code habituel pour gérer l'action du joueur
    $nbObject = (int) $_POST['playerAction'];
}
?>
<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Démarrez rapidement avec Achievements</title>
 
    <link href="/css/achievements.css" media="screen" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <input type="text" name="playerAction" value="<?php echo $nbObject; ?>" />
        <input type="submit" value="Action du joueur" />
    </form>
</body>
</html>

Afficher les succès au joueur

Une fois que vous avez accès à l’instance du joueur courant, il faut pouvoir lui afficher le résultat de ses succès.
Une méthode dédiée s’occupe de cela en fournissant un code xHTML, ainsi que le javascript associé.

En la plaçant avant la fermeture de la balise , vous vous assurez que les messages destinés au joueur courant lui parvienne uniquement lorsqu’il affiche une page complète.
En effet en cas de redirection, la méthode n’est pas appelée et les messages restent dans le cache jusqu’à ce que le joueur affiche une page. 

<?php
require_once APPLICATION_PATH . '/Achievements.php';
 
$myPlayerAchievements = Achievements::getInstance( 'emailDuJoueur@domaine.com' );
 
$nbObject = 0;
 
if( isset($_POST['playerAction']) && !empty($_POST['playerAction']) )
{
    // Ici votre code habituel pour gérer l'action du joueur
    $nbObject = (int) $_POST['playerAction'];
}
?>
<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Démarrez rapidement avec Achievements</title>
 
    <link href="/css/achievements.css" media="screen" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <input type="text" name="playerAction" value="<?php echo $nbObject; ?>" />
        <input type="submit" value="Action du joueur" />
    </form>
 
    <?php echo $myPlayerAchievements->printStatus(); ?>
</body>
</html>

Communiquer avec Achievements

Une fois la mise en place effectuée, il ne reste plus qu’à communiquer avec Achievements lorsqu’un joueur effectue une action.

Pour cela il faut créer un succès dans l’interface du service, et récupérer le code donné. La clé du succès est automatiquement remplacée par la clé du succès courant.
Le service recevra la valeur donnée et renverra une réponse contenant les informations nécessaires à l’affichage.
Ces informations sont traitées de façon automatisées par la classe, et vous n’avez donc pas à vous en préoccuper. 

<?php
require_once APPLICATION_PATH . '/Achievements.php';
 
$myPlayerAchievements = Achievements::getInstance( 'emailDuJoueur@domaine.com' );
 
$nbObject = 0;
 
if( isset($_POST['playerAction']) && !empty($_POST['playerAction']) )
{
    // Ici votre code habituel pour gérer l'action du joueur
    $nbObject = (int) $_POST['playerAction'];
 
    // Le code envoyant la valeur courante à Achievements
    try
    {   
        $myPlayerAchievements->updateAchievement(
            'XXXXXXXX', // Clé du succès
            $nbObject
        );
    }
    catch( Exception $e ) 
    {
        // Mettre ici votre gestion d'erreurs.
        // Ou laisser vide pour ne pas bloquer le jeu en cas de panne du service.
    }
}
?>
<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Démarrez rapidement avec Achievements</title>
 
    <link href="/css/achievements.css" media="screen" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <input type="text" name="playerAction" value="<?php echo $nbObject; ?>" />
        <input type="submit" value="Action du joueur" />
    </form>
 
    <?php echo $myPlayerAchievements->printStatus(); ?>
</body>
</html>
]]> http://www.anthor.net/blog/developpement/demarrage-rapide-avec-webgame-achievements/feed/ 4 Webgame Achievements http://www.anthor.net/blog/developpement/webgame-achievements/ http://www.anthor.net/blog/developpement/webgame-achievements/#comments Mon, 30 Aug 2010 13:44:00 +0000 Anthor http://www.anthor.net/?p=741 J’en avais vaguement parlé dans un précédent billet, et c’est aujourd’hui chose faite !

« Achievements » est en ligne dans une première version et n’attend plus que des jeux se joignent à l’aventure pour prendre son envol.

Comme l’explique SorenS, Achievements permettra aux jeux par navigateur de fidéliser un peu plus leurs joueurs avec un service simple à mettre en place.

Une classe PHP permet de communiquer avec l’API et gère l’affichage du résultat pour les joueurs. Le résultat est visible sur les démonstrations, qui utilisent la même API que les jeux. Ces démonstrations sont avant tout destinées aux futurs éditeurs du service afin de comprendre les différents types de succès qu’il est possible de mettre en place.
Grâce à un système de cache évolué aussi bien côté serveur que côté client, le service est rapide et ne fait pas plus de requêtes que nécessaire.

Par exemple, si un joueur a déverrouillé un succès, alors aucune requête ne sera faite à l’API. De la même manière des vérifications permettent lors de l’édition d’un succès de débloquer le cache afin de refaire des requêtes vers l’API lorsque le joueur effectuera des actions sur le jeu. Tout cela étant évidemment transparent, car il n’y a que 3 méthodes pouvant être appelées.

// Un singleton pour utiliser un joueur en particulier
$myAchievement = Achievements::getInstance( 'emaildujoueur@mondomaine.com' );
 
// Une fonction lorsqu'un joueur se connecte au jeu
$myAchievement->playerPlays( 'login' );
 
// Une fonction pour mettre à jour un succès
try
{  
    $myAchievement->updateAchievement( 'clé du succès', 'valeur' );
}
catch( Exception $e )
{
    echo 'Exception: ' . $e->getMessage();
    die();
}
 
// Une fonction à n'utiliser qu'en fin de fichier avant la fermeture de <body> 
// pour gérer l'affichage du joueur concerné par l'instance.
$myAchievement->printStatus();

Le service est fourni avec un back-office complet qui permet aux éditeurs d’être globalement autonome dans la gestion de leurs jeux et de leurs succès. Il est gratuit, et le seul retour se situe lors de l’affichage des succès pour le joueur, afin de le rediriger sur son profil. Concernant les emails, ils ne sont pas envoyés au service. Tout fonctionne grâce à une clé unique générée pour chaque email.

]]> http://www.anthor.net/blog/developpement/webgame-achievements/feed/ 2 Trophées et Succès dans les jeux par navigateur http://www.anthor.net/blog/developpement/trophees-et-succes-dans-les-jeux-par-navigateur/ http://www.anthor.net/blog/developpement/trophees-et-succes-dans-les-jeux-par-navigateur/#comments Fri, 04 Jun 2010 21:40:25 +0000 Anthor http://www.anthor.net/?p=715 Qu’ils soient appelés Trophées sur PS3, Succès sur xBox ou Steam, ou différemment sur d’autres plateformes, la fonctionnalité reste la même.
Rassembler les joueurs vers un but secondaire afin d’ajouter un challenge aux jeux.

Psychologiquement, ça à l’air de fonctionner, l’effet sur les joueurs est immédiat en donnant l’envie d’atteindre un but pouvant être comparé avec d’autres joueurs, voir ses amis.

Techniquement, ce n’est pas compliqué à implémenter, mais alors pourquoi les jeux web n’en proposent pas plus ?
Tout simplement je pense car le domaine est trop fragmenté. Un jeu seul ou un éditeur seul aura moins de poids qu’une plateforme qui mélange un grand nombre de jeux différents.

Il existe Muxxu, mais celui-ci reste limité à quelques-uns des jeux Motion-Twin. Si le portail est intéressant, il reste limité car non ouvert.

Dès le début du développement de Tarschool, j’avais en tête de le relier à un portail permettant de partager à la fois les comptes, mais aussi des succès. De plus, les joueurs me l’ont suggéré.

Je suis donc parti sur une API permettant de communiquer avec un portail. Un joueur est identifié grâce au hash de son email.
Lorsqu’il effectue une action sur le jeu, l’API est contactée et renvoie soit une erreur, soit la réussite de l’envoi, et gère elle-même l’affichage pour les joueurs si un succès est débloqué.

On distinguera trois types de succès : Atteindre une certaine valeur, Atteindre une valeur unique, Effectuer une action unique. Le dernier correspondant à une valeur unique de 1 ^^ Ces succès pouvant aussi avoir un prérequis avant de pouvoir être débutés/validés.

Toutes les communications se feront en cryptées à l’aide d’une clé publique et d’une clé privé. En l’état actuel, la classe servant pour le jeu est bien avancé, le plus compliqué a été de rendre compatible le cryptage avec le plus de configuration possible.

Plus d’infos bientôt, si certains sont intéressés pour des tests, n’hésitez pas à me contacter.

]]> http://www.anthor.net/blog/developpement/trophees-et-succes-dans-les-jeux-par-navigateur/feed/ 4 Pics Engine 3.5 et Google Analytics http://www.anthor.net/blog/developpement/pics-engine-3-5-et-google-analytics/ http://www.anthor.net/blog/developpement/pics-engine-3-5-et-google-analytics/#comments Sun, 24 Jan 2010 14:26:36 +0000 Anthor http://www.anthor.net/?p=539 Si comme moi vous souhaitez tracker votre galerie PicsEngine, il suffit simplement de modifier deux fichiers.

Dans /admin/inc/gallery.php, il suffit de remplacer la section de Pics Engine par la suivante.

<body>
    <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
        try {
        var pageTracker = _gat._getTracker("UA-XXXXXX-XX"); // Remplacer par votre identifiant.
        pageTracker._setAllowAnchor(true);
        pageTracker._trackPageview();
        } catch(err) {}
    </script>
    <script src="<?php echo $core->getSelf(); ?>admin/?public&amp;action=gallery&amp;redirect_iphone=false" type="text/javascript" charset="utf-8"></script>
</body>

La partie importante de l’opération est l’activation du tracking des ancres dans Google Analytics, le reste du code est le code de tracking proposé de base par Google Analytics.
(Cf: Docs GA – _setAllowAnchor )

Dans /admin/library/controller/Controller.Public.php, remplacer la ligne 459

$toWrite .= '<script type="text/javascript" charset="utf-8">function exec(s) { eval(s); } function saveUrl(u) { window.open(u,"_self"); }</script>';

Par :

$toWrite .= '<script type="text/javascript" charset="utf-8">function exec(s) { eval(s); } function saveUrl(u) { window.open(u,"_self"); if(pageTracker){ pageTracker._trackPageview("/" + u); } }</script>';

De cette manière, le code permettant de traquer la page en cours n’est exécuté que si Google Analytics est présent.

Pour voir le script en action, vous pouvez rajouter ce bout de code :

alert("/" + u); /* Renvoi : /#photo=347/album=7 */

Voilà, c’est tout. Pas de grosses modifications. Si cela pouvait être intégré de base, avec une option dans l’admin pour simplement entrer l’identifiant de tracking, ce serait parfait.
Hélas le changement de la barre d’adresse ne semble fonctionner qu’au premier album et à la première photo dans la version actuelle. De même si on arrive pas sur la page d’accueil, le changement d’url ne semble plus fonctionner non plus.
L’auteur du script m’a fourni une version plus récente qui corrige ce problème et avec laquelle le tracking est 100% fonctionnelle. Merci à lui.

A partir de la version 3.5.2 qui devrait sortir prochainement, il n’y aura donc plus de problème pour effectuer vos statistiques. Concernant les mises à jour, pour l’instant, je pense qu’il faudra refaire la manipulation à la main pour le moment.

]]> http://www.anthor.net/blog/developpement/pics-engine-3-5-et-google-analytics/feed/ 18 Utiliser Zend_Search_Lucene pour créer son propre moteur de recherche ! http://www.anthor.net/blog/developpement/utiliser-zend_search_lucene-pour-creer-son-propre-moteur-de-recherche/ http://www.anthor.net/blog/developpement/utiliser-zend_search_lucene-pour-creer-son-propre-moteur-de-recherche/#comments Fri, 08 Jan 2010 11:00:40 +0000 Anthor http://www.anthor.net/?p=533
Le Zend Framework contient un composant permettant de créer rapidement et simplement son propre moteur de recherche ! Ce composant nommé Zend_Search_Lucene est un portage, du projet Java du même nom, totalement écrit en PHP5.

Ce composant est autonome et ne demande aucune architecture spécifique. De ce fait il peux servir pour tout nouveau projet ou s’intégrer dans un projet existant. Aucune base de données n’est nécessaire. De plus les index peuvent être utilisés aussi bien avec Zend_Search_Lucene, qu’avec tout autre portage de Lucene (Attention toutefois, tous les encodages ne sont pas supportés !)
Il supporte différents encodages grâce à l’utilisation de différents analyseurs, mais pas l’UTF-8 par défaut, comme PHP me direz-vous :p

Contrairement au reste de la documentation et des autres composants du Zend Framework, le fonctionnement de Zend_Search_Lucene n’est pas des plus explicites.
Dans cet article nous verrons donc, comment utiliser Zend_Search_Lucene pour construire un index, construire les requêtes de recherches et enfin afficher les résultats dans une page. Le tout en UTF-8 bien évidemment.

Configuration du module

Tout d’abord, commençons par modifier le comportement par défaut du composant, en lui passant un analyseur compatible avec l’UTF8, les caractères numériques mais aussi insensible à la casse.

Zend_Search_Lucene_Analysis_Analyzer::setDefault( new Zend_Search_Lucene_Analysis_Analyzer_Common_Utf8Num_CaseInsensitive() );

L’index de recherche

Avant de pouvoir effectuer la moindre recherche, il faut d’abord construire l’index qui nous servira de base pour la recherche.
La construction de l’index permet d’importer des documents, eux-mêmes composés de champs. Ce sont les champs qui permettent à Zend_Search_Lucene de retrouver quel document doit ressortir dans les résultats de recherche.

$index = Zend_Search_Lucene::create( APPLICATION_PATH . '/data/lucene' );

Une fois l’index créé, nous devons inclure des documents à celui-ci, il ne faut pas oublier de forcer l’encodage des champs en UTF-8, afin qu’il soit concordant avec l’encodage de l’analyseur.
Chaque champs du document représente différents type, permettant ainsi de découper les résultats sous plusieurs formes en s’adaptant à la structure de l’application. On y stocke par exemple l’URL de la page à voir, son titre, son auteur…

Les différents types de champs possibles sont :

  • Keyword : Les données sont indexées et stockées, mais pas tokenisées. Par exemple pour l’identifiant, l’url…
  • UnIndexed : Les données sont stockées mais pas indexées. Par exemple pour l’aperçu du contenu, la date de création…
  • UnStored : Les données ne sont pas stockées, mais indexées et tokenisées. Par exemple pour le contenu du document…
  • Text : Les données sont indexées, stockées et tokenisées. Par exemple pour le titre, l’auteur…
  • Binary : Les données ne sont pas indexées, ni tokenisées, mais sont stockées en binaire. Par exemple pour l’image…

Les données stockées peuvent être affichées dans les résultats de recherche. Les données indexées permettent de trier les résultats de recherche par ordre d’importance. Les données tokenisées permettent de découper le contenu en mots clés pour la recherche.

$document = new Zend_Search_Lucene_Document();
 
$document->addField( Zend_Search_Lucene_Field::keyword( 'idPost', 52, 'utf-8' ) );
$document->addField( Zend_Search_Lucene_Field::unIndexed( 'preview', 'contenu contenu2...', 'utf-8' ) );
$document->addField( Zend_Search_Lucene_Field::unStored( 'content', 'contenu contenu2 contenu3 contenu4', 'utf-8' ) );
$document->addField( Zend_Search_Lucene_Field::text( 'title', 'Titre de mon résultat', 'utf-8' ) );
 
$index->addDocument( $document );

Jusqu’ici nous avons ajouté des documents, mais aucune modification n’est apporté à l’index tant que la méthode commit() n’est pas appelée. Il est donc tout à fait possible de boucler des éléments d’une table pour les convertir en document pour l’index. En cas de mises à jour successives, la méthode optimize() permet d’optimiser l’index.

Il existe bien évidemment d’autres types de documents permettant d’importer directement des fichiers Word 2007, Powerpoint 2007 ou encore Excel 2007 dans l’index.
Attention, on ne peux utiliser de champs nommé « id », celui-ci correspond à l’id du document dans l’index.

$index->commit();
$index->optimize();

Et voilà, l’index de recherche est créé, et contient des documents. Il est maintenant possible d’effectuer des requêtes sur cet index et d’en retourner les résultats.

Requêtes et affichage des résultats

Afin d’interroger l’index, il suffit de l’ouvrir avec la méthode appropriée. Une fois l’index ouvert, il suffit simplement de passer une variable contenant la recherche dans la méthode find() qui retourne les résultats.

$index = Zend_Search_Lucene::open( APPLICATION_PATH . '/data/lucene' );
$this->view->results = $index->find( $q ); // $q = 'test recherche';
 
$page = Zend_Paginator::factory( $this->view->results );
$page->setPageRange( 10 );
$page->setCurrentPageNumber( $this->_getParam('page', 1) );
$page->setItemCountPerPage( 20 );
$this->view->results = $page;

Comme on peux le constater, le composant est compatible avec le paginator, ce qui permet de paginer simplement les résultats comme n’importe quel autre sources !
Ceci est une petite approche rapide, mais qui permet déjà d’instaurer rapidement un moteur de recherche sur votre site.

]]> http://www.anthor.net/blog/developpement/utiliser-zend_search_lucene-pour-creer-son-propre-moteur-de-recherche/feed/ 1 Ajax Queue avec jQuery http://www.anthor.net/blog/developpement/ajax-queue-avec-jquery/ http://www.anthor.net/blog/developpement/ajax-queue-avec-jquery/#comments Sun, 18 Oct 2009 09:19:54 +0000 Anthor http://www.anthor.net/?p=526 En travaillant sur un nouvel outil ce week-end, je me suis rendu compte que l’utilisation des queues en Ajax avec jQuery n’était pas natif.
Il existe quelques pistes à ces adresses, mais rien de vraiment pratique :

Puis j’ai trouvé une version plus intéressante de celui-ci dans le plugin [jQuery Autocomplete|http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/|en], néanmoins, même si la fonction ABORT fonctionne correctement, mes appels en queue ne fonctionnaient pas.
J’en ai donc légèrement modifié les sources, en ajoutant un mode DEQUEUE me permettant de lancer la liste d’attente en fin de boucle par exemple.

Grâce à l’utilisation de la variable PORT, on peux ainsi contrôler indépendamment plusieurs queues, ou annuler des requêtes spécifiques, le tout en utilisant la fonction Ajax de jQuery.

Le plugin

/**
 * Ajax Queue Plugin
 */
(function($) {
    var ajax = $.ajax;
    var pendingRequests = {};
 
    $.ajax = function(settings) {
        settings = jQuery.extend(
            settings, 
            jQuery.extend(
                {}, 
                jQuery.ajaxSettings, 
                settings
            )
        );	
        var port = settings.port;
 
        switch(settings.mode) {
            case "abort": 
                if ( pendingRequests[port] ) {
                    pendingRequests[port].abort();
                }
                return pendingRequests[port] = ajax.apply(this, arguments);
 
            case "queue": 
                var _old = settings.complete;
                settings.complete = function(){
                    if ( _old )
                        _old.apply( this, arguments );
                    jQuery([ajax]).dequeue("ajax" + port );
                };
 
                jQuery([ ajax ]).queue("ajax" + port, function(){
                    ajax( settings );
                });
                return;
 
            case "dequeue": 
                jQuery([ajax]).dequeue("ajax" + port );
 
                if(jQuery.isFunction(settings.complete))
                    settings.complete(settings);
 
                return;
        }
 
        return ajax.apply(this, arguments);
    };
})(jQuery);

Utilisation de la méthode ABORT

$input.bind('keyup', function(event) {
    if($searchTimeout != undefined) {
        clearTimeout($searchTimeout);
    }
 
    $searchTimeout = setTimeout(function() {
        $searchTimeout = undefined;
 
        var inputVal = $input.val().replace(/^\s+/g,'').replace(/\s+$/g,'');
 
        $.ajax({
            mode    : 'abort',
            port    : 'ajaxSuggestions',
            type    : 'POST',
            url     : 'test.php',
            data    : { 'keywords': inputVal },
            success : function(msg) {
                alert(msg);
            }
        });
    }, 500);
});

Cette méthode est plus qu’intéressante dans le cas par exemple ou l’on souhaite afficher des informations au fur et à mesure que l’utilisateur écrit une information. Les requêtes précédentes utilisant le même port sont annulées au profit de la nouvelle requête, évitant un engorgement des informations et des erreurs dans le cas ou une requête ultérieure soit plus rapide que les précédentes.

Utilisation de la méthode QUEUE

for( i = 0 ; i <= 10 ; i++ ) {
    $.ajax({
        mode: 'queue',
        port: 'ajaxWhois',
        type: 'POST',
        url: 'test.php',
        data: { 'increment': i },
        success: function(msg){
            alert(msg);
        }
    });
}
 
$.ajax({ mode: 'dequeue', port: 'ajaxWhois' });

La méthode queue permet de boucler facilement sur plusieurs requêtes et ne les lancer qu’au moment choisit. Les requêtes ainsi lancées, le sont les unes à la suite des autres, évitant un engorgement des données reçues.

]]> http://www.anthor.net/blog/developpement/ajax-queue-avec-jquery/feed/ 14 Formatter un fichier Excel avec PHP http://www.anthor.net/blog/developpement/formatter-un-fichier-excel-avec-php/ http://www.anthor.net/blog/developpement/formatter-un-fichier-excel-avec-php/#comments Sun, 06 Sep 2009 16:10:45 +0000 Anthor http://www.anthor.net/?p=460 Certains clients me demandent parfois des exports en Excel dans leurs back-office. Loin d’être compliqué cet export demande tout de même quelques manipulations.
Rien de bien compliqué néanmoins, puisque une fonction et un header permettent de s’affranchir de cet exercice en moins de temps qu’il n’en faut.

Certes cette méthode affiche un avertissement lors de la première ouverture, mais il faut savoir qu’Excel gère très bien les tableaux. Le fichier s’ouvre donc parfaitement avec les versions XP et 2007.

Pour le header du fichier, c’est très simple :

header("Content-Type: application/vnd.ms-excel;");

Le formatage du tableau permet d’utiliser la plupart des formatage disponibles dans Excel :

<table>
    <tr>
        <td>Texte</td>
        <td style='mso-number-format:\@'>On formate un texte</td>
    </tr>
    <tr>
        <td>Nombre sur 3 décimales ( 2.345 )</td>
        <td style='mso-number-format:"0\.000"'>2.345678</td>
    </tr>
    <tr>
        <td>Nombre séparé par un espace, avec 3 décimales ( 1 234.567 )</td>
        <td style='mso-number-format:\#\ \#\#0\.000'>1234.56789</td>
    </tr>
    <tr>
        <td>Une date ( 06/09/2009 )</td>
        <td style='mso-number-format:"dd\/mm\/yyyy"'>2009-09-06 13:37:45</td>
    </tr>
</table>

Voilà, il suffit juste ensuite de produire une simple boucle pour obtenir des exports de données vers Excel.
En utilisant les headers, les colspans, les rowspans, etc, on peux rapidement obtenir des exports beaucoup plus poussés.
Les couleurs de textes et les fonds de cellules sont aussi utilisables.

]]> http://www.anthor.net/blog/developpement/formatter-un-fichier-excel-avec-php/feed/ 4 L’importance de compresser les fichiers statiques http://www.anthor.net/blog/developpement/limportance-de-compresser-les-fichiers-statiques/ http://www.anthor.net/blog/developpement/limportance-de-compresser-les-fichiers-statiques/#comments Thu, 13 Aug 2009 11:45:15 +0000 Anthor http://www.anthor.net/?p=453 Lorsque j’ai commencé Tarschool, j’ai immédiatement mis en place un système de compression des fichiers. Celui-ci est de deux sortes :

  • Minification des fichiers JS et CSS
  • Compression avec le mode deflate des fichiers JS et CSS

Faciles et rapides à mettre en place, ces solutions permettent souvent d’économiser au minimum 75% de la bande passante utilisé par le serveur en mode normal.

Voici un petit récapitulatif des solutions que nous avons mis en place et de leurs économies associées.

Pour la minification, je vous laisse voir de votre côté, personnellement, j’ai plusieurs scripts qui tournent avec YUICompressor, mais d’autres solutions sont possibles.
Par exemple: JSmin, CSSminifier, DOJO Compressor… C’est au choix, je pense qu’elles ont toutes leurs avantages et leurs inconvénients. YUICompressor est, dans mon cas utilisé en local avant upload des fichiers.

Pour le DEFLATE, un simple copier/coller suffit dans un .htaccess à la racine, ces lignes ayant déjà été donné dans mon .htaccess par défaut, cette méthode doit normalement resté active le plus souvent possible, et être activé de façon transparente. Notons que si le mod_deflate n’est pas initié par Apache, la ligne est purement et simplement ignorée.

<IfModule mod_deflate.c>
	<FilesMatch "\.(js|css)$">
		SetOutputFilter DEFLATE
	</FilesMatch>
</IfModule>

Pour montrer la bande passante économisée, je prend les logs d’accès du mois de juillet. Je vais effectuer la comparaison sur deux fichiers CSS et deux fichiers JS.
Sur Tarschool, les plus utilisés sont :

Nom du fichier Taille originale Taille minifié Taille après DEFLATE
global.css 22 566 18 260 [80.9%] 3 664 [20%]
globalMember.css 2 185 1 732 [79.2%] 679 [39.2%]
jquery.tarschool.js 113 480 55 283 [48.7%] 17 264 [31.2%]
jquery.tarschool.voirCombat.js 4 458 2 655 [59.1%] 1 048 [39.4%]

Pour le mois de Juillet, voici donc le nombre d’accès total, dans lequel nous allons séparer les fichiers effectivement transmis et ceux dont le cache a été utilisé.
En effet par défaut, on peux déjà économiser une quantité significative. Pour contrôler un peu mieux ce cache, il existe différentes solutions qui ne seront pas abordées ici.
Pour ma part je rajoute simplement un time de la dernière modification du bootstrap lors de l’appel des fichiers à mettre en cache. Je laisse le reste à Apache et pour le moment cela me convient.

Nom du fichier Nombre d’accès Total 200 (OK) 304 (Not Modified) Ratio
global.css 18 298 5 078 13 220 [27.7%]
globalMember.css 14 962 3 082 11 880 [20.5%]
jquery.tarschool.js 18 006 5 004 13 002 [27.7%]
jquery.tarschool.voirCombat.js 3 892 1 978 1 914 [50.8%]

En ne prenant en compte que les fichiers effectivement transmis, je peux donc calculer la bande passante utilisée avec la compression, la bande passante théorique (basée sur la taille réelle du fichier source), et les pourcentages de gains réalisés :

Nom du fichier Nombre d’accès Bande Passante Théorique Bande Passante Réelle Ratio
global.css 5 078 114 590 148 18 605 792 [16.2%]
globalMember.css 3 082 6 734 170 2 092 678 [31%]
jquery.tarschool.js 5 004 567 853 920 86 389 056 [15.2%]
jquery.tarschool.voirCombat.js 1 978 8 817 924 2 072 944 [23.5%]

En conclusion, l’apport du module deflate, couplé à une minification des fichiers permet d’économiser d’énormes quantités de bandes passantes, généralement de l’ordre de 75%.

]]> http://www.anthor.net/blog/developpement/limportance-de-compresser-les-fichiers-statiques/feed/ 1 Plateau de jeu en 3d isométrique, le retour (1)… http://www.anthor.net/blog/developpement/plateau-de-jeu-en-3d-isometrique-le-retour-1/ http://www.anthor.net/blog/developpement/plateau-de-jeu-en-3d-isometrique-le-retour-1/#comments Sat, 04 Jul 2009 07:34:41 +0000 Anthor http://www.anthor.net/?p=403 Il y a quelques mois déjà, j’avais mis au point un module de plateau de jeu en 3d isométrique. Mis de côté pour le développement de Tarschool, je n’avais plus du tout mis le nez dedans.

Ayant un peu plus de temps, et parfois le besoin de me changer les idées, il m’arrive désormais de travailler un peu dessus.

Je me suis pour le moment principalement attelé à la création du continent au nord, avec sa côte ouest, et ses 14 villes. Pour le moment seul l’emplacement des villes et des rivières a été terminé.
Cette partie représente environ 200 cases de large sur 200 cases de haut. Ce qui fait environ 1/12ème du monde prévu pour le moment.

J’espère très prochainement pouvoir ouvrir ce monde à la visite, mais il reste des optimisations à faire au niveau de l’affichage.

]]> http://www.anthor.net/blog/developpement/plateau-de-jeu-en-3d-isometrique-le-retour-1/feed/ 4